# 如何计算像geojson.io这样的Leaflet中折线的距离?

How to calculate the distance of a polyline in Leaflet like geojson.io?(如何计算像geojson.io这样的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(){

var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
polygon: true,
polyline: true,
rectangle: false,
circle: false,
marker: false
}

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();
e.layer.bindPopup(((LGeo.area(e.layer) / 1000000) * 0.62137).toFixed(2) + ' mi<sup>2</sup>');
e.layer.openPopup();
}

if (type === 'polyline') {
featureGroup.clearLayers();
// 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. :)

### 推荐答案

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

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

# 相关文档推荐

How do I can get a text of all the cells of the table using testcafe(如何使用 testcafe 获取表格中所有单元格的文本)
node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How can I create conditional test cases using Protractor?(如何使用 Protractor 创建条件测试用例?)
PhantomJS and clicking a form button(PhantomJS 并单击表单按钮)
Clicking #39;OK#39; on alert or confirm dialog through jquery/javascript?(在警报上单击“确定或通过 jquery/javascript 确认对话框?)
QunitJS-Tests don#39;t start: PhantomJS timed out, possibly due to a missing QUnit start() call(QunitJS-Tests 不启动:PhantomJS 超时，可能是由于缺少 QUnit start() 调用)