Làm thế nào để tính toán khoảng cách của một polyline trong Leaflet như geojson.io?

Question

Tôi đang làm việc trên một bản đồ với Mapbox và Leaflet và tôi cho phép người dùng vẽ đa giác và tính toán và hiển thị các đa giác đó và tôi cũng cần cho phép người dùng vẽ một polyline và hiển thị khoảng cách của polyline.

Tôi đã tìm ra tính năng vùng đa giác nhưng tôi không thể tìm ra cách tính khoảng cách của đường polyline.

Mã của tôi là như sau:

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(); 
     } 

    } 
    }); 
}); 

Có một phương pháp trong LGeo lib chính nó mà sẽ giúp tôi tính toán khoảng cách của polyline? Các nhà phát triển tại geogson.io cũng có một cách để tính toán khoảng cách nhưng tôi không thể hình dung nó ra nhìn vào mã của họ. Tôi không phải là nhà phát triển Javascript dày dặn. Bất kỳ trợ giúp đều được chào đón. :)

Answer 1

Vì vậy, cuối cùng tôi đã tìm ra thuật toán. Về cơ bản tôi tìm thấy thuộc tính của polyline giữ tất cả các latlngs của polyline và sau đó tôi thực hiện nó thông qua một vòng lặp và tôi đã sử dụng phương thức distanceTo từ Leaflet để tính khoảng cách giữa các điểm và tiếp tục thêm chúng vào biến số 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(); 
} 

Answer 2

Và đó cũng là giải pháp tính diện tích hình tròn.

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(); 
} 

Answer 3

tôi giải quyết điều này bằng cách mở rộng L.Polyline lớp, và sử dụng LatLng 's distanceTo phương pháp:

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; 
     } 
    } 
}); 

Hy vọng nó hepls một ai đó.

Answer 4

Tôi cũng sẽ khuyến khích người đọc kiểm tra thư viện sân cỏ. Nó hoạt động tốt với tờ rơi và có nhiều phương pháp hữu ích bao gồm cả khoảng cách polyline. http://turfjs.org/docs