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

Question

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

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

提前谢谢。

Answer 1

因此，您希望地图区域包含一个以千米为单位指定大小的圆圈。

一个简单(但有点膨胀(的方法是使用草皮。

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.的提示