2015-07-04 12 views
6

Sto lavorando su una mappa con Mapbox e Leaflet e dovrei consentire all'utente di disegnare poligoni e calcolare e mostrare il loro poligono e devo anche consentire all'utente di disegnare una polilinea e mostrare la distanza della polilinea.Come calcolare la distanza di una polilinea in Leaflet come geojson.io?

Ho individuato la funzione dell'area del poligono ma non riesco a capire come calcolare la distanza di una polilinea.

Il mio codice è il seguente:

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

    } 
    }); 
}); 

Esiste un metodo nella LGeo lib in sé che mi aiuterà a calcolare la distanza della polilinea? Gli sviluppatori allo geogson.io hanno anche un modo per calcolare la distanza ma non riesco a capirlo guardando il loro codice. Non sono uno sviluppatore JavaScript esperto. Qualsiasi aiuto è benvenuto. :)

risposta

11

Quindi alla fine ho trovato un algoritmo. Fondamentalmente ho trovato la proprietà della polilinea che contiene tutto lo latlngs della polilinea e quindi l'ho fatto passare attraverso un loop e ho usato il metodo distanceTo da Leaflet per calcolare la distanza tra i punti e continuato ad aggiungerli a una variabile 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, soluzione perfetta! Che dire del calcolo dell'area del cerchio? Come posso ottenere il raggio di un cerchio (creato o modificato)? – serifsadi

4

E anche questa è la soluzione per calcolare l'area del cerchio.

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

Ho risolto questo estendendo L.Polyline di classe, e l'utilizzo di LatLng s' distanceTo metodo:

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

spero che hepls qualcuno.

+1

questo ha funzionato per me dopo aver cambiato .extend to .include –

+0

@JillRussek Hai ragione, grazie! Ho inviato un suggerimento di modifica. – frzsombor

1

Vorrei anche incoraggiare i lettori a consultare la biblioteca del tappeto erboso. Funziona benissimo con il volantino e ha molti metodi utili tra cui la distanza della polilinea. http://turfjs.org/docs