如何在 Mapbox 中查询最接近地理编码结果的要素？

Question

我正在尝试创建一个包含数千个点的 Mapbox 地图。我希望用户能够键入一个地址和一个 div 以填充从该地址最近点的信息。我正在使用 mapbox-gl-geocoder 控件

如果我可以使用类似这样的东西，那将是完美的：

geocoder.on('result', function(e) {
  var features = map.queryRenderedFeatures(e.result.center)
});

但是queryRenderedFeatures不接受latlong坐标，它需要视口坐标。

接下来我尝试的是

map.on('moveend', function () {

    var xwindow = window.innerWidth / 2;
    var ywindow = window.innerHeight / 2;
    var xywindow = {'x': xwindow, 'y': ywindow};

    var features = map.queryRenderedFeatures(xywindow);
});

这给出了查询地址附近的结果，但不是最近点。例如，如果我对一个我知道存在点的地址进行地理编码，则此查询将 return 几条街外的不同点。

有没有办法使用 queryRenderedFeatures 获取由地理编码控件 return 编辑的位置上的要素？

Answer 1

But queryRenderedFeatures doesn't accept latlong coordinates, it requires viewport coordinates.

是的，但您可以使用 map.project Returns 表示像素坐标的点，相对于地图的容器，对应于指定的地理位置。

获得所有要素后，您需要计算与每个要素的距离以找到最近的要素。 cheap-ruler 是个不错的选择。

像 geokdbush 这样的索引在这里可能没有意义，因为你只运行它一次。

如何在 Mapbox 中查询最接近地理编码结果的要素？

How can I query the feature that's closest to the geocode result in Mapbox?

viewport

mapbox

mapbox-gl-js