Mapbox Web端结合Turf.js计算点位距离结果不均匀不准确问题求助

代码里所有和Turf交互的坐标顺序全部颠倒，这是导致测距变形、横纵方向计算结果不均的直接原因。

• 地理坐标存在两套完全不同的入参规范，直接混用会导致坐标错配：
  • Leaflet 生态的坐标格式固定为 [纬度值, 经度值]，也就是[lat, lng]
  • Turf.js 的坐标格式固定为 [经度值, 纬度值]，也就是[lng, lat]
• 定义的店铺坐标 shop = [18.565461492546987, 73.91061898347883] 本身是符合Leaflet格式的（18.5对应纬度，73.9对应经度），但传给Turf的时候没有调换顺序，Turf会把第一个值18.5当成经度、第二个值73.9当成纬度，直接把计算点偏移到完全错误的地理位置上。
• 之所以会出现「横向侧方测距偏小、垂直上下测距偏大」的现象，是因为错配后的坐标点落在了经纬方向距离换算系数差异极大的位置，椭球模型的距离换算逻辑被扭曲，才会出现相同屏幕位移对应的测距值在横纵方向完全不均等，没法形成圆形的配送范围。

1. distance 函数的坐标拼装顺序错误
   拖拽回调里传入函数的参数是 (location.lat, location.lng)，也就是第一个入参是纬度、第二个是经度，但函数内部直接按 Turf 的格式把两个值拼成 [x, y] 的点坐标，等于拼成了 [纬度, 经度]，和 Turf 要求的顺序完全相反。
2. 冗余的重复计算
   代码里同时用 turf.length 计算线长、两次调用 turf.distance，这三个计算逻辑本质完全一致，没有实际价值，只会拖慢计算效率。
3. 距离判断阈值和需求不匹配
   需求是判断4km以内是否配送，代码里写的判断阈值是3km，和需求不一致。

• 明确拆分不同场景下的坐标存储格式，避免混用：
  • 给Leaflet marker用的坐标，固定存为 [lat, lng] 格式
  • 给Turf计算用的坐标，单独存为 [lng, lat] 格式，提前构造好复用的 Turf Point 实例，不用每次计算都重新构造
• 调整distance函数内部的坐标拼装顺序，严格对齐Turf的入参要求
• 删掉冗余的重复计算，只保留一次 turf.distance 的计算逻辑
• 把配送判断阈值改成需要的4km即可

修正后的核心代码示例 #

// 提前拆分两套坐标格式，避免顺序混用
const shopLat = 18.565461492546987;
const shopLng = 73.91061898347883;
// 提前构造Turf用的店铺点，避免重复计算
const shopTurfPoint = turf.point([shopLng, shopLat]);

function calculateDistance(userLat, userLng) {
    // 按Turf要求的[lng, lat]顺序构造用户位置点
    const userTurfPoint = turf.point([userLng, userLat]);
    // 计算两点直线距离
    const distanceKm = turf.distance(userTurfPoint, shopTurfPoint, { units: 'kilometers' });
    
    // 按需求设置4km的判断阈值
    if(distanceKm > 4) {
        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';
    }
    console.log('实测距离：', distanceKm, 'km');
}

// 拖拽回调直接传入lat、lng即可
marker.on('dragend', function(e){
    const location = e.target._latlng;
    calculateDistance(location.lat, location.lng);
});

只要坐标顺序对齐Turf的要求，测距逻辑就会基于WGS84椭球模型的大地线距离计算，不管用户在店铺的哪个方位拖动标记，相同物理位移对应的测距值都会符合球面换算规律，最终形成以店铺为中心的均匀圆形配送范围。

内容的提问来源于stack exchange，提问作者KeviN