如何計算Leaflet中多段線的距離，例如geojson.io？

我正在使用Mapbox和Leaflet進行地圖工作，我應該讓用戶繪製多邊形並計算並顯示該多邊形的幾何圖形，並且還需要讓用戶繪製多段線並顯示多段線的距離。如何計算Leaflet中多段線的距離，例如geojson.io？

我已經想出了多邊形區域的功能，但我無法弄清楚如何計算多段線的距離。

我的代碼如下：

loadScript('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js', function(){ 
    loadScript('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js', function(){ 
     var featureGroup = L.featureGroup().addTo(map); 

     var drawControl = new L.Control.Draw({ 
     edit: { 
      featureGroup: featureGroup 
     }, 
     draw: { 
      polygon: true, 
      polyline: true, 
      rectangle: false, 
      circle: false, 
      marker: false 
     } 
    }).addTo(map); 

    map.on('draw:created', showPolygonArea); 
    map.on('draw:edited', showPolygonAreaEdited); 

    function showPolygonAreaEdited(e) { 
     e.layers.eachLayer(function(layer) { 
      showPolygonArea({ layer: layer }); 
     }); 
    } 
    function showPolygonArea(e) { 
     var type = e.layerType, 
     layer = e.layer; 

     if (type === 'polygon') { 
      featureGroup.clearLayers(); 
      featureGroup.addLayer(e.layer); 
      e.layer.bindPopup(((LGeo.area(e.layer)/1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>'); 
      e.layer.openPopup(); 
     } 

     if (type === 'polyline') { 
      featureGroup.clearLayers(); 
      featureGroup.addLayer(e.layer); 
      // What do I do different here to calculate the distance of the polyline? 
      // Is there a method in the LGeo lib itself? 
      // e.layer.bindPopup(((LGeo.area(e.layer)/1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>'); 
      e.layer.openPopup(); 
     } 

    } 
    }); 
});

有沒有在LGeo LIB本身的方法，這將幫我算算折線的距離是多少？在geogson.io的開發者也可以計算距離，但我似乎無法弄清楚他們的代碼。我不是一個經驗豐富的Javascript開發人員。歡迎任何幫助。 :)

來源

2015-07-04 Rohan

所以我終於想出了一個算法我自己。我基本上找到了折線的屬性，該折線包含折線的所有latlngs，然後我通過一個循環，並使用Leaflet中的distanceTo方法來計算點之間的距離並將它們添加到totalDistance變量。

if (type === 'polyline') { 
    featureGroup.clearLayers(); 
    featureGroup.addLayer(e.layer); 

    // Calculating the distance of the polyline 
    var tempLatLng = null; 
    var totalDistance = 0.00000; 
    $.each(e.layer._latlngs, function(i, latlng){ 
     if(tempLatLng == null){ 
      tempLatLng = latlng; 
      return; 
     } 

     totalDistance += tempLatLng.distanceTo(latlng); 
     tempLatLng = latlng; 
    }); 
    e.layer.bindPopup((totalDistance).toFixed(2) + ' meters'); 
    e.layer.openPopup(); 
}

來源

2015-07-04 18:19:25 Rohan

布拉沃，完美的解決方案！如何計算圈的面積？我如何獲得圓的半徑（創建或編輯）？ – serifsadi

而且這也是計算圓的面積的解決方案。

else if (type === 'circle') { 
    var area = 0; 
    var radius = e.layer.getRadius(); 
    area = (Math.PI) * (radius * radius); 
    e.layer.bindPopup((area/1000000).toFixed(2) + ' km<sup>2</sup>'); 
    e.layer.openPopup(); 
}

來源

2015-07-24 11:58:03 serifsadi

我解決了這個通過擴展L.Polyline類，並使用LatLng的distanceTo方法：

L.Polyline = L.Polyline.include({ 
    getDistance: function(system) { 
     // distance in meters 
     var mDistanse = 0, 
      length = this._latlngs.length; 
     for (var i = 1; i < length; i++) { 
      mDistanse += this._latlngs[i].distanceTo(this._latlngs[i - 1]); 
     } 
     // optional 
     if (system === 'imperial') { 
      return mDistanse/1609.34; 
     } else { 
      return mDistanse/1000; 
     } 
    } 
});

希望它hepls人。

來源

2016-01-16 12:20:45 mineroot

這個改變後，我工作.extend。包括 –

@JillRussek你是對的，謝謝！我已提交修改建議。 – frzsombor

我也會鼓勵讀者看看草地圖書館。它適用於傳單，並有許多有用的方法，包括折線距離。 http://turfjs.org/docs

來源

2016-12-20 19:47:50 biomiker

如何計算Leaflet中多段線的距離，例如geojson.io？

回答

相關問題