Mapbox GL 与 bbox 的近似距离

Question

我正在使用 Mapbox GL JS 找出距离用户在地图上单击的点最近的要素。它工作得很好。但我想输出一个大概的距离。我使用的代码如下...

function nearestFeature(y,x) { 
    var bbox = [[y, x], [y, x]];
    var featuresBuilding = map.queryRenderedFeatures(bbox, { layers: ['MyBuildingLayer'] });
    if (featuresBuilding[0]) {
        //found
    }else{
        //widen the area
        for (i = 1;i<100;i++) {
            bbox = [[y-i, x-i], [y+i, x+i]];
            featuresBuilding = map.queryRenderedFeatures(bbox, { layers: ['MyBuildingLayer'] });
            if (featuresBuilding[0]) { 
                //calculate distance
                var distance = 100*i; 
                break;
            }
        }
    }
}

我可能会使这个问题复杂化，但本质上我需要计算出 X / Y 点差的距离，然后乘以米距离以获得粗略估计。我用 var distance = 100*i 来说明这一点，我需要弄清楚如何确定虚拟 100 数字...

Answer 1

我曾经有一个项目，我也需要 1px 的值作为距离值来构建类似比例控件的东西 (https://www.mapbox.com/mapbox-gl-js/api/#scalecontrol)

解决方案是使用当前视口的边界框来计算两点之间的距离。将此除以用户视口宽度将为您提供 1 像素的距离。我使用 mapbox 比例控件来检查我的值与他们的值，结果似乎是合理的。

我想到了这个解决方案（需要 turf.js）。您可以在我创建的快速 jsfiddle 上看到完整的工作示例： https://jsfiddle.net/andi_lo/38h7m5wx/

function getDistance() {
  const bounds = map.getBounds();
  const topLeft = turf.point([bounds._ne.lng, bounds._ne.lat]);
  const topRight = turf.point([bounds._sw.lng, bounds._ne.lat]);
  const bottomLeft = turf.point([bounds._ne.lng, bounds._sw.lat]);
  const bottomRight = turf.point([bounds._sw.lng, bounds._sw.lat]);
  
  const middleLeft = turf.midpoint(topLeft, bottomLeft);
  const middleRight = turf.midpoint(topRight, bottomRight);
  const distance = turf.distance(middleLeft, middleRight, 'kilometers');
  return distance;
}

const clientWidth = window.innerWidth;
const distance = getDistance();
const onePixel = distance / clientWidth;
console.log(`1px is ~${onePixel.toFixed(3)} km or ${Math.ceil((onePixel) * 1000)} meters`);

Mapbox GL 与 bbox 的近似距离

Mapbox GL approximate distance from bbox

mapbox

mapbox-gl-js