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）

解决方案是使用当前视口的边界框来计算2个点之间的距离。将此除以用户视口宽度将为您提供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的近似距离

1 个答案: