在 mapbox web 中获取两个位置点之间的不准确距离

Question

我一直在尝试检查用户当前位置与商店位置之间的直接距离是否小于 4km。但是当我移动用户的标记时，所测量的距离似乎在商店的侧面区域较小，但在商店的垂直上下 space 处测量的距离更多，这看起来与我不成比例期望循环一致的行为。我一直对这种行为感到困惑，找不到解决方案。真诚感谢任何帮助或指导！

<!-- Map Box -->
    <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
    <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>

<script>

var shop = [18.565461492546987, 73.91061898347883];
var map_msg = document.getElementById('map_msg');

function map_init(lat, long){
    L.mapbox.accessToken = 'pk.eyJ1IjoidmR2ZHViZXk3IiwiYSI6ImNrbDVraTNyNDBtZ2EydXBqMnMzamFkZXkifQ.AOlIrevJhdIIK2t5PYIp_A';
    var map = L.mapbox.map('map')
        .setView([lat, long], 13)
        .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

    var marker2 = L.marker([shop[0], shop[1]], {
        draggable: false,
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'shop',
            'marker-color': '#2F80ED'
        })
    }).addTo(map);

    var marker = L.marker([lat, long], {
        draggable: true,
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'rocket',
            'marker-color': '#2F80ED'
        })
    }).addTo(map);

    function onDragEnd() {
        console.log('hey');
        var lngLat = marker.getLngLat();
        console.log('Longitude: ' + lngLat.lng + ' Latitude: ' + lngLat.lat);
    }

    function distance(x, y){
        var to = turf.point([x, y]);
        var from = turf.point([shop[0], shop[1]]);

        var line = turf.lineString([[x, y], [shop[0], shop[1]]]);
        var length = turf.length(line, {units: 'kilometers'});
        console.log(length);

        var options = { units: 'kilometers' };
        var distance_function = turf.distance(to, from, options);
        var distance = turf.distance(from, to, options);

        console.log("Distance: " + distance + " km");
        if(distance > 3){
            map_msg.innerHTML = "Sorry, we don't deliver here!";
            map_msg.style.color = '#FF4E61';
        }else{
            map_msg.innerHTML = "Delivery available in this area";
            map_msg.style.color = '#3D8B18';
        }
    }
    
    distance(lat, long);


    marker.on('dragend', function(e){
        var location = e.target._latlng;
        distance(location.lat, location.lng);
    });


}
</script>

Answer 1

var shop = [18.565461492546987, 73.91061898347883];

您的项目在 74 度纬度上运行。在Web Mercator，在那个纬度，纬度和经度之间的像素距离有显着差异。（在赤道，有none）。

我没有进一步检查您的代码，但我想它运行正常 - 一个压扁的椭圆就是您所期望的。您可以通过将您的商店移动到 [0, 0] 并查看它是否提供您期望的圈子来验证这一点。

在 mapbox web 中获取两个位置点之间的不准确距离

Getting inaccurate distance between two location points in mapbox web

javascript

mapbox

mapbox-gl-js