如何计算Leaflet中折线的距离,如geojson.io? [英] How to calculate the distance of a polyline in Leaflet like geojson.io?
问题描述
我正在使用Mapbox和Leaflet处理地图,我应该让用户绘制多边形并计算并显示该多边形的数量,我还需要让用户绘制折线并显示折线的距离。
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.
我已经找到了多边形区域功能,但我无法弄清楚如何计算折线的距离。
I have figured out the polygon area feature but I cannot figure out how to calculate the distance of a polyline.
我的代码如下:
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开发人员。欢迎任何帮助。 :)
Is there a method in the LGeo lib itself which will help me calculate the distance of the polyline? The devs at geogson.io also 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. :)
推荐答案
所以我终于想出了一个算法。我基本上找到了折线的属性,它保存了折线的所有 latlngs
,然后我让它经历一个循环,我用 distanceTo
来自Leaflet的方法来计算点之间的距离,并继续将它们添加到 totalDistance
变量。
So I finally came up with an algorithm myself. I basically found the property of the polyline which holds all the latlngs
of the polyline and then I made it go through a loop and I used the distanceTo
method from Leaflet to calculate distance between points and kept on adding them to a totalDistance
variable.
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();
}
这篇关于如何计算Leaflet中折线的距离,如geojson.io?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!