如何使用Leaflet Routing Machine的LRoutingcontrol绘制路线
要使用Leaflet Routing Machine的L.Routing.control绘制路线,您需要完成以下步骤:
- 引入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" />
- 创建一个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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
- 创建一个
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绘制路线了。您可以根据需要调整地图视图和路线的起点、终点和途径点坐标
原文地址: https://www.cveoy.top/t/topic/ixNV 著作权归作者所有。请勿转载和采集!