Geek Answers Handbook

How to calculate the distance of a polyline in a sheet, for example geojson.io?

I am working on a map with Mapbox and Leaflet, and I must allow the user to draw polygons, calculate and show that it is a polygon, and I must also allow the user to draw a polyline and show the distance from the polyline.

I figured out the function of the polygon area, but I can’t figure out how to calculate the distance from the polyline.

My code is as follows:

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

Is there a method in LGeo lib itself that will help me calculate the distance from the polyline? The geogson.io developers also have a way to calculate the distance, but I can't figure out what it is looking at their code. I am not an experienced Javascript developer. Any help is appreciated. :)

+6
source share
4 answers

So, I finally came up with an algorithm. I basically found a polyline property that contains all the latlngs polyline, and then I latlngs through it, and I used the distanceTo method from the Leaflet to calculate the distance between the points and continued to add them to 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(); }
+12
source

I solved this by extending the L.Polyline class and using the LatLng distanceTo method:

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

Hope someone does it.

+7
source

And also that decision to calculate the area of ​​a circle.

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

I also encourage readers to check out the turf library. It works great with a flyer and has many useful methods, including the distance between polylines. http://turfjs.org/docs

+1
source

More articles:


All Articles