javascript 如何计算像geojson.io这样的Leaflet中折线的距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31221088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to calculate the distance of a polyline in Leaflet like geojson.io?
提问by Rohan
I am working on a map with Mapbox and Leaflet and I am supposed to let the user draw polygons and calculate and show the are of that polygon and I also need to let the user draw a polyline and show the distance of the polyline.
我正在使用 Mapbox 和 Leaflet 制作地图，我应该让用户绘制多边形并计算并显示该多边形的面积，我还需要让用户绘制多段线并显示多段线的距离。
I have figured out the polygon area feature but I cannot figure out how to calculate the distance of a 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 the LGeo lib itself which will help me calculate the distance of the polyline? The devs at geogson.ioalso have a way to calculate the distance but I cannot seem to figure it out looking at their code. I am not a seasoned Javascript developer. Any help is welcome. :)
LGeo 库本身是否有一种方法可以帮助我计算折线的距离？geogson.io的开发人员也有一种计算距离的方法，但我似乎无法通过查看他们的代码来弄清楚。我不是经验丰富的 Javascript 开发人员。欢迎任何帮助。:)
回答by Rohan
So I finally came up with an algorithm myself. I basically found the property of the polyline which holds all the latlngsof the polyline and then I made it go through a loop and I used the distanceTomethod from Leaflet to calculate distance between points and kept on adding them to a totalDistancevariable.
所以我终于自己想出了一个算法。我基本上找到了保存所有折线的折线的属性，latlngs然后我让它通过一个循环，我使用distanceToLeaflet 中的方法来计算点之间的距离并继续将它们添加到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();
}
回答by mineroot
I solved this by extending L.Polylineclass, and using LatLng's distanceTomethod:
我解决了这个通过扩展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;
}
}
});
Hope it helps someone.
希望它可以帮助某人。
回答by serifsadi
And also that's the solution of calculate the area of 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();
}
回答by biomiker
I would also encourage readers to check out the turf library. It works great with leaflet and has many useful methods including polyline distance. http://turfjs.org/docs
我还鼓励读者查看草坪图书馆。它适用于传单，并有许多有用的方法，包括折线距离。 http://turfjs.org/docs
