Mapbox GL JS：根据搜索范围更改缩放

Question

也许这是一个愚蠢的问题，但无论如何，

在我的应用程序的搜索页面上，我有一个确定搜索范围的范围输入（最小 5 公里，最大 50 公里）。根据设置值，我想更改 MapBox GL 地图中的当前缩放比例，以便它仅显示在此输入中设置的区域（如果搜索范围约为 10 公里，我应该只看到一个带有半径 10 公里。）。我的数学有点弱，这让我无法找到这种相关性。

提前致谢。

Answer 1

所以您希望地图区域包含一个以公里为单位指定大小的圆。

一个简单（但有点臃肿）的方法是使用 Turf.

const rangeCircle) = turf.circle(map.getCenter().toArray(), radius, { units: 'kilometers' });
map.fitBounds(turf.bbox(rangeCircle))

这样您就不需要明确计算缩放级别 - Mapbox 的 fitBounds() 会为您计算出来。

Answer 2

最后我想出了如何使用 Turf.js 来做到这一点。这是我的解决方案：

function fitToRadius(radius) {
  const { lng, lat } = mapbox.getCenter();
  const center = [lng, lat];
            
  const rangeCircle = turf.circle(
    center,
    radius,
    { units: "kilometers"}
  );

  const [coordinates] = rangeCircle.geometry.coordinates;

  const bounds = new mapboxgl.LngLatBounds(
    coordinates[0],
    coordinates[0]
  );

  /* Extend the 'LngLatBounds' 
    to include every coordinate in the bounds result. */
  coordinates.forEach((coord) => bounds.extend(coord));

  mapbox.fitBounds(bounds);
}

感谢 Steve Bennett 关于 Turf.js 的提示。

Mapbox GL JS：根据搜索范围更改缩放

Mapbox GL JS: change zoom depending on search range

javascript

mapbox

mapbox-gl-js