如何使用 Leaflet 在两个节点之间绘制路径
How to draw a path between two nodes using Leaflet
我有一组纬度和经度点,它们构成了从源到目的地的路线。我用Leaflet的polyline方法绘制了源到目的地之间的路径,但它给出了一个混乱的路径。
var firstpolyline = new L.polyline(latlong, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(mym[![enter image description here][1]][1]ap);
上面代码中的latlong是一个经纬度点数组。但它给出了这样的混乱输出:
imgur.com/aZrGa.jpg
但是经纬度点形成了一条从源到目的地的正确路径。我一直在使用折线。我在做什么错误?我应该使用 Leaflet 的其他方法吗?
在@ivansanchez 评论后编辑
latlong 数组的类型为 L.LatLng(x,y),其中 L 是 Leaflet 对象。这是一个片段:
是我的错误,Polyline 工作正常。我有一组没有按顺序排列的 latlng。放置有序的 latlng 点帮助我在源和目的地之间正确绘制路线。
1. var mymap = L.map('mapid').setView([17.387140, 78.491684], 13);
2. L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(mymap);
3. var latlngs = [
[15.89625,80.53544],
[15.89626,80.53542],
[15.89628,80.53536],
[15.89617,80.53539],
[15.89621,80.53547]
];
4. var path = L.polyline.antPath(latlngs,{"delay":400,"dashArray":[10,20],"weight":5,"color":"black","paused":true,"reverse":false}
).addTo(mymap);
5. mymap.addLayer(path);
mymap.fitBounds(path.getBounds());
解释:
- 要在给定的经纬度([17.387140, 78.491684]) 上设置地图视图,13 表示缩放。
- 在地图上添加图块。
- 经纬度。
- 通过设置css绘制多段线蚂蚁路径。
- 将图层添加到路径。
我有一组纬度和经度点,它们构成了从源到目的地的路线。我用Leaflet的polyline方法绘制了源到目的地之间的路径,但它给出了一个混乱的路径。
var firstpolyline = new L.polyline(latlong, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(mym[![enter image description here][1]][1]ap);
上面代码中的latlong是一个经纬度点数组。但它给出了这样的混乱输出:
但是经纬度点形成了一条从源到目的地的正确路径。我一直在使用折线。我在做什么错误?我应该使用 Leaflet 的其他方法吗?
在@ivansanchez 评论后编辑
latlong 数组的类型为 L.LatLng(x,y),其中 L 是 Leaflet 对象。这是一个片段:
是我的错误,Polyline 工作正常。我有一组没有按顺序排列的 latlng。放置有序的 latlng 点帮助我在源和目的地之间正确绘制路线。
1. var mymap = L.map('mapid').setView([17.387140, 78.491684], 13);
2. L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(mymap);
3. var latlngs = [
[15.89625,80.53544],
[15.89626,80.53542],
[15.89628,80.53536],
[15.89617,80.53539],
[15.89621,80.53547]
];
4. var path = L.polyline.antPath(latlngs,{"delay":400,"dashArray":[10,20],"weight":5,"color":"black","paused":true,"reverse":false}
).addTo(mymap);
5. mymap.addLayer(path);
mymap.fitBounds(path.getBounds());
解释:
- 要在给定的经纬度([17.387140, 78.491684]) 上设置地图视图,13 表示缩放。
- 在地图上添加图块。
- 经纬度。
- 通过设置css绘制多段线蚂蚁路径。
- 将图层添加到路径。