要使用Leaflet Routing Machine的L.Routing.control绘制路线,您需要完成以下步骤:

  1. 引入Leaflet和Leaflet Routing Machine库文件。您可以在页面中添加以下<script>标签来引入这两个库文件:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.3.4/leaflet-routing-machine.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.3.4/leaflet-routing-machine.css" />
  1. 创建一个Leaflet地图实例并将其添加到页面中的某个元素中:
<div id="map" style="height: 400px;"></div>

<script>
  var map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>
  1. 创建一个L.Routing.control实例并将其添加到地图上:
<script>
  var control = L.Routing.control({
    waypoints: [
      L.latLng(51.5, -0.09),
      L.latLng(51.51, -0.1)
    ],
    routeWhileDragging: true
  }).addTo(map);
</script>

上述代码中的waypoints参数指定了路线的起点和终点坐标。您可以根据需要添加更多的途径点。routeWhileDragging参数设置为true表示在拖动途径点时实时绘制路线。

通过以上步骤,您就可以使用Leaflet Routing Machine的L.Routing.control绘制路线了。您可以根据需要调整地图视图和路线的起点、终点和途径点坐标

如何使用Leaflet Routing Machine的LRoutingcontrol绘制路线

原文地址: https://www.cveoy.top/t/topic/ixNV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录