OpenLayers 6：如何從 api 計算兩點（可點擊）之間的距離？

Question

我在 api.py 文件中聲明了一些要點，如下所示：

(...)
@app.route('/api/pontos/', methods=['GET'])
def get_pontos():
    return jsonify({
        'pontos': [
            [-44.3001,-2.52001, 3, "name1"],
            [-44.309468, -2.509284, 4, "name2"],
            [-44.307802, -2.557744, 5, "name3"],
(...)

我可以從中選擇每個點，並在瀏覽器上顯示有關它的一些特征

var selec = new ol.interaction.Select()
selec.getFeatures().on('add', function(e){

    var label = typeof (e.element.getProperties().text) != 'undefined' ? e.element.getProperties().text : ''
    if(label != ''){
        alert(e.element.getProperties().text)
    }

})

(...)

function loadPoints(){
    axios.get(`/api/pontos`)
        .then(function(response){
            if(response.status === 200){
                var coordsArray = response.data.pontos;

                coordsArray.map(coords =>{

                    var point = new ol.Feature({
                        geometry : new ol.geom.Point(ol.proj.fromLonLat(coords)), 
                        text : `Preco: ${coords[2]} reais, Bar:${coords[3]} `
                    });

                    point.setStyle(pointStyle);
                    vectorSource.addFeature(point)
                }); 

                //Fit nos pontos
                map.getView().fit(vectorSource.getExtent());
            }

        })
}

loadShape('ma')
loadPoints()

但是如果我想點擊兩點並計算它們之間的距離以便它可以在瀏覽器上顯示呢？

我嘗試查看文檔和其他一些問題，但似乎無法使它們適應我的特定問題。

Answer 1

您可以使用 getDistance() 非常簡單的函數來計算兩個坐標之間的距離。

calculateDistance(toLonLat(first) , toLonLat(second));
function calculateDistance(src , dest ){
let finalmeasure = getDistance(src , dest);
//let finalmeasure = Math.round(line.getLength() * 100) / 100; //for rounding
console.log(finalmeasure); //in meter unit
}

此致