Mapbox GL：如何获取显示多边形实际边界并实现地图适配？

1. 直接利用GeoJSON数据源的内置方法 #

无需手动遍历坐标扩展边界，Mapbox的GeoJSON数据源自带getBounds()方法，能直接获取整个数据源的准确边界：

// 假设已创建并添加GeoJSON数据源到地图
const geojsonSource = map.getSource('your-polygon-source');
const actualBounds = geojsonSource.getBounds();
map.fitBounds(actualBounds, {
  padding: 20, // 可选，添加内边距避免多边形贴地图边缘
  duration: 500 // 可选，设置平滑过渡动画时长
});

2. 手动构建边界的正确方式 #

如果必须手动遍历坐标，需严格遵循GeoJSON多边形的坐标结构：

• 多边形坐标格式为[外层环坐标数组, 内层洞坐标数组...]，每个环的坐标是[经度, 纬度]的二维数组
• 要遍历外层环的所有坐标，再处理内层洞（如果存在）

const bounds = new mapboxgl.LngLatBounds();
// polygons为你的GeoJSON Feature数组
polygons.forEach(feature => {
  // 处理外层环
  feature.geometry.coordinates[0].forEach(coord => {
    bounds.extend(coord);
  });
  // 处理内层洞（若有）
  for (let i = 1; i < feature.geometry.coordinates.length; i++) {
    feature.geometry.coordinates[i].forEach(coord => {
      bounds.extend(coord);
    });
  }
});
map.fitBounds(bounds, { padding: 20 });

3. 排查坐标顺序错误 #

Mapbox强制使用[经度, 纬度]的坐标顺序，如果你的多边形坐标是[纬度, 经度]，会导致边界完全偏离，务必确认坐标顺序正确。

4. 验证边界准确性 #

可以在地图上标记边界的对角点来验证：

// 标记边界的西北和东南角
new mapboxgl.Marker({ color: 'red' })
  .setLngLat(bounds.getNorthWest())
  .addTo(map);
new mapboxgl.Marker({ color: 'blue' })
  .setLngLat(bounds.getSouthEast())
  .addTo(map);

若标记位置与多边形匹配，再调用fitBounds就能得到正确的缩放和居中效果。

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