mapBox自动缩放地图到合适的视野级别。

如果可以实现记得点赞分享，谢谢老铁～

可以使用Mapbox的fitBounds（）方法将地图视图自动缩放到显示传递的所有要素的最佳级别。

首先在工具类中定义一个方法getMaxMinLonLat(), 用于获取最大最小经纬度的数组，如下：

/**
 * 获取最大最小经纬度的数组
 * @param dataSource 数组
 * @returns 
 */
export const getMaxMinLonLat = (dataSource: any) => {
  if (dataSource?.length > 1) {
    let newData = dataSource?.filter((_: any) => _.x !== 0 && _.y !== 0);
    let latList = Array.from(newData, (_: any) => _.x);
    let lonList = Array.from(newData, (_: any) => _.y);
    let latArr = latList.sort();
    let lonArr = lonList.sort();
    let maxLonLat: any = [latArr[latArr.length - 1], lonArr[lonArr.length - 1]];
    let minLonLat: any = [latArr[0], lonArr[0]];
    return {
      maxLonLat,
      minLonLat,
    };
  } else {
    return false;
  }
}

然后在你的业务代码里引入上述方法，结合该方法需要一个包含要素的边界值数组，并将其传递给fitBounds（bounds，options）方法。options参数可选，在这里您可以指定动画或不使用动画，以及缩放的最小和最大级别。

/**
   * 根据地图上添加的覆盖物坐标分布情况，自动缩放地图到合适的视野级别。
   * @param dataSource
   */
const dealFitViewData = (dataSource: any) => {
  let newList = dataSource.map((item: any) => {
    return {
      x: item[0],
      y: item[1],
    };
  });
  // 这个就是获取到的边界值数组
  let parsePath = getMaxMinLonLat(newList);
  if (parsePath) {
    let defaultPadding: any = {
      top: 100,
      bottom: 100,
      left: 100,
      right: 100,
    };
    if (map?.current) {
      map?.current!.fitBounds([parsePath.maxLonLat, parsePath.minLonLat], {
        padding: defaultPadding,
      });
    }
  }
};
// 加载调用
  useEffect(() => {
    // allcoordinatesList 为每个坐标的经纬度集合
    if (allcoordinatesList?.length > 1) {
      dealFitViewData(allcoordinatesList);
    }
  }, []);