2015-07-04 1 views
6

Я работаю над картой с Mapbox и 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. Любая помощь приветствуется. :)

ответ

11

Итак, я, наконец, придумал алгоритм. Я в основном нашел свойство полилинии, которое содержит всю строку latlngs полилинии, а затем я провел ее через цикл, и я использовал метод 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(); 
} 
+0

Bravo, идеальное решение! Как насчет расчета площади круга? Как я могу получить радиус круга (созданный или отредактированный)? – serifsadi

4

А также это решение вычислить площадь круга.

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

Я решил эту проблему путем расширения L.Polyline класса, и с помощью LatLng «s 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.

+1

это сработало для меня после смены .extend на .include –

+0

@JillRussek Вы правы, спасибо! Я представил предложение для редактирования. – frzsombor

1

Я бы также рекомендовал читателям проверить библиотеку дерна. Он отлично работает с листовкой и имеет множество полезных методов, включая расстояние между полилиниями. http://turfjs.org/docs

 Смежные вопросы

  • Нет связанных вопросов^_^