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

Posted 2023-02-16

【中文标题】如何计算像geojson.io这样的Leaflet中折线的距离？

【英文标题】：How to calculate the distance of a polyline in Leaflet like geojson.io?

【发布时间】：2015-09-22 03:19:17

【问题描述】：

我正在使用 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 lib 本身是否有一种方法可以帮助我计算折线的距离？ geogson.io 的开发人员也有一种计算距离的方法，但我似乎无法通过查看他们的代码来弄清楚。我不是经验丰富的 javascript 开发人员。欢迎任何帮助。 :)

【参考方案1】：

我通过扩展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;
        
    
);

希望对某人有所帮助。

【讨论】：

在将 .extend 更改为 .include 后，这对我有用

@JillRussek 你是对的，谢谢！我已提交修改建议。

【参考方案2】：

我还鼓励读者查看 turf 图书馆。它适用于传单，并且有许多有用的方法，包括折线距离。 http://turfjs.org/docs

【参考方案3】：

所以我终于自己想出了一个算法。我基本上找到了包含折线的所有latlngs 的折线的属性，然后我让它通过一个循环，我使用Leaflet 中的distanceTo 方法来计算点之间的距离并继续将它们添加到@ 987654323@变量。

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

【讨论】：

太棒了，完美的解决方案！怎么计算圆的面积？如何获得圆的半径（创建或编辑）？

【参考方案4】：

这也是计算圆面积的解法。

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