放大国家/地区

Question

我正在尝试创建一个功能，用户可以单击国家/地区标记，地图将在 React 上放大到该国家/地区。然而，问题是不同国家的缩放级别不同。

请问在不硬编码每个国家/地区的缩放级别的情况下放大一个国家（或一个城市或一个 POI）的最佳方法是什么？

目前这是我的功能，没什么花哨的。只是对缩放级别进行硬编码。

  const flyToLocation = (latitude: number, longitude: number) => {
    mapRef.current?.flyTo({ bearing: 0, center: [longitude, latitude], zoom: 6 });
  };

我还尝试了这里的示例https://visgl.github.io/react-map-gl/examples/zoom-to-bounds（这是我正在使用的库）。但问题是我仍然需要找到所有国家和地方的来源并且可能符合Mapbox的世界观（我其实更喜欢这种方式）

我发现https://visgl.github.io/react-map-gl/examples/geocoder可以根据返回的结果自动缩放到国家。但地理编码器是通过返回建议来供人类使用而设计的。我尝试查看文档，但找不到相应的内置函数。

请问问题如何处理？如有任何帮助，我们将不胜感激。

Answer 1

您已经有了正确的答案，最好的方法是获取您支持的所有国家/地区的边界框。您确实必须收集这些数据。

已经有其他人收集了这些数据，您可以像这些存储库一样重用它们，它编译了许多边界框。

https://github.com/sandstrom/country-bounding-boxes