如何为Albers投影的Mapbox GL JS地图设置初始边界？

Mapbox GL JS的bounds初始化参数在非Web墨卡托投影（如Albers）下无法正常生效，这是框架已知的兼容性问题。要实现Albers投影下的初始边界设置，可通过地图加载完成后调用fitBounds()方法替代初始化时的bounds参数配置。

解决代码示例 #

const map = new mapboxgl.Map({
  container: "map",
  projection: "albers",
  center: [-74.5, 40], // 临时初始中心，会被fitBounds覆盖
  zoom: 9
});

map.on('load', () => {
  // 目标边界：[最小经度, 最小纬度, 最大经度, 最大纬度]
  const targetBounds = [-78, 44, -91, 39];
  map.fitBounds(targetBounds, {
    padding: 20, // 可选：调整视图内边距，避免内容贴边
    duration: 0  // 可选：设置为0取消动画，直接跳转至目标边界
  });
});

原理说明 #

初始化阶段的bounds参数仅针对Web墨卡托投影做了适配，非标准投影下无法完成正确的坐标转换与视图计算。而fitBounds()方法会在地图加载完成后，基于当前生效的投影规则重新计算视图范围，因此能正确实现Albers投影下的边界定位。

内容的提问来源于stack exchange，提问作者jotamon