如何计算像geojson.io这样的Leaflet中多段线的距离?
How to calculate the distance of a polyline in Leaflet like geojson.io?
我正在使用 Mapbox 和 Leaflet 绘制地图,我应该让用户绘制多边形并计算并显示该多边形的面积,我还需要让用户绘制折线并显示距离折线。
我已经弄清楚了多边形区域特征,但我不知道如何计算多段线的距离。
我的代码如下:
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 库本身是否有帮助我计算多段线距离的方法? geogson.io 的开发人员也有计算距离的方法,但我看他们的代码似乎无法弄明白。我不是经验丰富的 Javascript 开发人员。欢迎任何帮助。 :)
所以我终于自己想出了一个算法。我基本上找到了折线的 属性 ,它包含折线的所有 latlngs
然后我让它通过一个循环,我使用 Leaflet 中的 distanceTo
方法来计算点之间的距离并继续将它们添加到 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();
}
这也是计算圆面积的答案
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();
}
我通过扩展 L.Polyline
class 并使用 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;
}
}
});
希望对大家有所帮助。
我也鼓励读者查看 turf 图书馆。它与传单配合使用效果很好,并且有许多有用的方法,包括折线距离。 http://turfjs.org/docs
我正在使用 Mapbox 和 Leaflet 绘制地图,我应该让用户绘制多边形并计算并显示该多边形的面积,我还需要让用户绘制折线并显示距离折线。
我已经弄清楚了多边形区域特征,但我不知道如何计算多段线的距离。
我的代码如下:
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 库本身是否有帮助我计算多段线距离的方法? geogson.io 的开发人员也有计算距离的方法,但我看他们的代码似乎无法弄明白。我不是经验丰富的 Javascript 开发人员。欢迎任何帮助。 :)
所以我终于自己想出了一个算法。我基本上找到了折线的 属性 ,它包含折线的所有 latlngs
然后我让它通过一个循环,我使用 Leaflet 中的 distanceTo
方法来计算点之间的距离并继续将它们添加到 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();
}
这也是计算圆面积的答案
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();
}
我通过扩展 L.Polyline
class 并使用 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;
}
}
});
希望对大家有所帮助。
我也鼓励读者查看 turf 图书馆。它与传单配合使用效果很好,并且有许多有用的方法,包括折线距离。 http://turfjs.org/docs