Leaflet Routing Machine 入门教程:如何在 Leaflet 中添加路线功能
要在 Leaflet 中引入 Leaflet Routing Machine,可以按照以下步骤进行操作:
- 引入库文件:首先,确保已经引入了 Leaflet 和 Leaflet Routing Machine 的库文件。可以通过在 HTML 文件中添加以下代码来引入它们:
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/leaflet-routing-machine@3.3.4/dist/leaflet-routing-machine.css' />
<script src='https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js'></script>
<script src='https://cdn.jsdelivr.net/npm/leaflet-routing-machine@3.3.4/dist/leaflet-routing-machine.js'></script>
- 创建地图容器:创建一个包含地图的容器。可以在 HTML 文件中添加一个具有唯一 ID 的
<div>元素,作为地图的容器。例如:
<div id='map' style='height: 400px;'></div>
- 创建地图实例:在 JavaScript 代码中,创建地图实例并设置初始视图。在这个实例中,你可以设置地图的中心点和缩放级别。例如:
var map = L.map('map').setView([51.505, -0.09], 13);
- 添加基础图层:添加一个基础图层到地图上。你可以使用 Leaflet 提供的基础图层或者其他第三方提供的图层。例如,添加一个 OpenStreetMap 图层:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href='https://openstreetmap.org'>OpenStreetMap</a> contributors'
}).addTo(map);
- 创建路线实例:创建一个 Leaflet Routing Machine 实例,并将其添加到地图上。例如:
L.Routing.control({
waypoints: [
L.latLng(51.5, -0.1),
L.latLng(51.51, -0.12)
],
routeWhileDragging: true
}).addTo(map);
在这个例子中,我们创建了一个包含两个路点的路线。你可以根据需要添加更多的路点。
- 运行代码:运行代码并在浏览器中查看结果。你应该能够在地图上看到一条连接两个路点的路线。
这就是在 Leaflet 中引入 Leaflet Routing Machine 的基本教程。你可以根据自己的需求进行进一步的定制和调整。
原文地址: https://www.cveoy.top/t/topic/qe4i 著作权归作者所有。请勿转载和采集!