問題描述

我正在使用 Mapbox 和 Leaflet 繪制地圖，我應(yīng)該讓用戶繪制多邊形并計(jì)算并顯示該多邊形的面積，我還需要讓用戶繪制一條折線并顯示折線的距離.

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.

我已經(jīng)算出了多邊形區(qū)域的特征，但我不知道如何計(jì)算折線的距離.

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 本身是否有一種方法可以幫助我計(jì)算折線的距離?geogson.io 的開發(fā)人員也有一種計(jì)算距離的方法，但我似乎無法通過查看他們的代碼來弄清楚.我不是經(jīng)驗(yàn)豐富的 Javascript 開發(fā)人員.歡迎任何幫助.:)

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. :)

推薦答案

所以我終于自己想出了一個(gè)算法.我基本上找到了包含折線的所有 latlngs 的折線的屬性，然后我讓它通過一個(gè)循環(huán)，我使用 Leaflet 中的 distanceTo 方法來計(jì)算距離點(diǎn)之間并不斷將它們添加到 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();
}

這篇關(guān)于如何計(jì)算像geojson.io這樣的Leaflet中折線的距離?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！