Leaflet学习，基于leaflet-routing-machine插件的路径规划

在百度地图上，我们经常会使用这个功能，从点A到点B的路径；

今天，我们就利用leaflet-routing-machine插件进行简单的路径规划；

首先，我们下载这个插件，并引用；

在这个demo中，我们使用右键菜单来选取起点和终点的坐标；

 setStartPoint (e) {
 this.startPoint = [e.latlng.lat, e.latlng.lng]
 this.pathPlanningGroup.addLayer(L.circle(this.startPoint, {
 color: "green",
 fillColor: 'green',
 fillOpacity: 1,
 radius: 300
 }));
 var startIcon = L.divIcon({
 html: "起点",
 className: 'icon',
 iconSize: 30
 });
 this.pathPlanningGroup.addLayer(L.marker(this.startPoint, { icon: startIcon }))
 }

效果如下：

我们选取起点和终点后默认开始继续路径规划；

pathPlanning () {
 var routing = L.Routing.control({
 waypoints: [
 L.latLng(this.startPoint),
 L.latLng(this.endPoint)
 ]
 }).addTo(this.map);
 }

在动态图片上查看效果：