如何使用 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: "&copy; <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());

解释:

  1. 要在给定的经纬度([17.387140, 78.491684]) 上设置地图视图,13 表示缩放。
  2. 在地图上添加图块。
  3. 经纬度。
  4. 通过设置css绘制多段线蚂蚁路径。
  5. 将图层添加到路径。