Mapbox GL JS 找到离点击点最近的地址

Question

我正在尝试制作一个网络应用程序，用户可以在其中单击一个点，然后我可以获得离该点最近的地址。文档中的 This example 看起来非常接近我想要做的，除了 queryRenderedFeatures 调用似乎没有 return 任何功能的物理地址。从点击点获取物理地址的最佳方法是什么？

这是我的代码：

  map.on("click", (e) => {
    const features = map.queryRenderedFeatures(e.point);
    const displayProperties = [
      "type",
      "properties",
      "id",
      "layer",
      "source",
      "sourceLayer",
      "state",
    ];
    const displayFeatures = features.map((feat) => {
      const displayFeat = {};
      displayProperties.forEach((prop) => {
        displayFeat[prop] = feat[prop];
      });
      return displayFeat;
    });
    console.log(displayFeatures);
  });

Answer 1

查找离某个点最近的地址的术语是“反向地理编码”。您可以为此使用 Mapbox's API，但还有很多其他的。

这里不用queryRenderedFeatures

Answer 2

您无法从 queryRenderedFeatures 函数中获取街道地址。但是可以得到点击点的坐标：

map.on("click", (e) => {
    mapClickFn(e.lngLat);
});

根据这些坐标，您需要获取街道地址。这称为“反向地理编码”，可以使用 Mapbox API:

function mapClickFn(coordinates) {
    const url =
      "https://api.mapbox.com/geocoding/v5/mapbox.places/" +
      coordinates.lng +
      "," +
      coordinates.lat +
      ".json?access_token=" +
      YOUR_ACCESS_TOKEN +
      "&types=address";
    $.get(url, function (data) {
      if (data.features.length > 0) {
        const address = data.features[0].place_name;
        console.log(address);
      } else {
        console.log("No address found");
      }
    });
}

Mapbox GL JS 找到离点击点最近的地址

Mapbox GL JS find closest address to clicked point

javascript

mapbox

mapbox-gl-js

mapbox-gl