首页 / MapLibre / API 文档

LngLatBounds

先看结论

经纬度矩形，用来累计范围、判断包含关系，或作为 fitBounds 与 maxBounds 的输入。

最后验证 2026-11-03 · MapLibre GL JS 4.x · 更新 2026-10-28 · 引用本文

new maplibregl.LngLatBounds([west, south], [east, north])

构造

写法	说明
`new LngLatBounds()`	空范围，两角为无穷大，配合 `extend` 累加
`new LngLatBounds([w, s], [e, n])`	直接给西南角与东北角
`new LngLatBounds([w, s, e, n])`	单数组平铺写法
`new LngLatBounds(lnglat)`	单点，四角重合，配合 `extend` 扩展
`LngLatBounds.convert(input)`	把上述任意形式转成实例

成员

成员	说明
`extend(obj)`	纳入一个点、数组或另一个矩形
`getCenter()`	返回中心 `LngLat`
`getSouthWest()` / `getNorthEast()`	西南角与东北角
`getNorthWest()` / `getSouthEast()`	另外两角，常用于图片四角坐标
`getWest()` / `getSouth()` / `getEast()` / `getNorth()`	四个边界值
`setSouthWest(lnglat)` / `setNorthEast(lnglat)`	直接改写两角
`contains(lnglat)`	点是否落在范围内
`isEmpty()`	是否尚未纳入任何点
`toArray()`	输出 `[[w, s], [e, n]]`
`adjustAntiMeridian()`	处理跨 180 度经线的范围

示例

var bounds = new maplibregl.LngLatBounds();

data.features.forEach(function (f) {
  if (f.geometry.type === 'Point') {
    bounds.extend(f.geometry.coordinates);
  }
});

console.log(bounds.isEmpty());       // 没有点时是 true
console.log(bounds.getCenter());     // LngLat 对象
console.log(bounds.toArray());       // [[w,s],[e,n]]

/* 判断点击点是否在范围内 */
map.on('click', function (e) {
  if (bounds.contains(e.lngLat)) {
    console.log('点在数据范围内');
  }
});

/* 向外扩一圈，避免点位贴着边缘 */
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
bounds.setSouthWest([sw.lng - 1, sw.lat - 1]);
bounds.setNorthEast([ne.lng + 1, ne.lat + 1]);

map.fitBounds(bounds, { padding: 20 });

注意事项

空矩形的两角分别是 [180, -90] 与 [-180, 90]，直接拿去 fitBounds 会得到整个世界范围。累加数据后先判断 isEmpty()，能省掉一次无意义的飞行动画。

跨越 180 度经线时，西边界可能大于东边界。需要正确显示这类范围，先调用 adjustAntiMeridian()，再交给相机方法。

它不是几何对象。LngLatBounds 只存两个角，不表示多边形；要判断任意多边形覆盖范围，需要遍历顶点后再 extend。

引用本文

经纬志（2026）。《LngLatBounds》。https://www.jingweizhi.com/maplibre/api/lnglat-bounds.html（访问日期 2026-11-03）。