如何使用Leaflet在两个节点之间绘制路径

问题描述 投票:0回答:2

我有一组纬度和经度点,形成从源到目的地的路线。我使用Leaflet的折线方法来绘制源到目的地之间的路径,但它给出了一条混乱的路径。

      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 对象。这是一个片段:

leaflet openstreetmap
2个回答
2
投票

这是我的错误,折线工作正常。我有一系列未按顺序排列的 latlng。放置有序的经纬度点可以帮助我正确绘制源和目的地之间的路线。


2
投票
// 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. 将图层添加到路径。
© www.soinside.com 2019 - 2024. All rights reserved.