经纬志
首页 / MapLibre / 使用示例

缩放到范围

给定一个矩形,fitBounds 自动选择缩放级别与中心, 留出边距后让范围完整可见。这是数据上图后最常用的定位方式。

MapLibre GL JS 4.x · 更新 2026-10-27
源码与运行效果
运行效果

说明

范围数组顺序是 [[西, 南], [东, 北]], 与 turf.bbox 返回的 [西, 南, 东, 北] 只差一层分组,直接重排即可传入。

map.fitBounds([[95, 15], [145, 50]], {
  padding: 36,
  duration: 1400
});
参数作用说明
padding四周留白避免要素贴着边
duration动画时长0 表示立即跳转
maxZoom缩放上限防止小范围被放到过大

俯仰角不为 0 时,fitBounds 只保证中心与范围大致合适, 上边缘的要素可能被地平线裁掉。先 setPitch(0) 再定位,或者额外加大 padding。

底部显示的是动画结束后的真实范围,与传入的范围并不完全相同: fitBounds 会取整到合适的缩放级别,并受容器宽高比影响。

数据加载完成后定位,顺序不能反。在 load 之前调用 fitBounds 也能执行,但容器尺寸未稳定时结果会偏, 常见表现是范围只露出一半。