【WebGIS实例】（2）MapboxGL按边界定位：fitBounds

一、前言

开发工作中， 经常会有要求定位到某个面要素的操作。本篇便介绍一下Mapbox GL JS的fitBounds方法。

官方文档：fitbounds | Mapbox GL JS | Mapbox
官网示例：Fit a map to a bounding box

二、fitBounds 选项参考

fitBounds( bounds, options?, eventData? )

const bounds = [[-79, 43], [-73, 45]]; // 坐标格式参考：https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatboundslike

map.fitBounds(bounds, {
	// easing：这个还没搞懂，官网实例参考：https://docs.mapbox.com/mapbox-gl-js/example/camera-animation/
	
	// 默认为false，决定了跳转的地图过渡动画
	linear: false, 
    // 地图视图跳转后允许的最大缩放级别
    maxZoom: 10, 
    // 给定的边界(bounds)的中心相对于地图中心的偏离距离，以像素为单位计量
    offset: [0,0],
   	// 按范围定位后地图容器的内边距
    padding: {top: 10, bottom:25, left: 15, right: 5},
    // 动画效果
    animate: true,
    // 动画的持续时间，以毫秒为单位
    duration: 2000,
});

---

三、实例

@turf/turf 版本：6.5.0
mapbox-gl 版本： 2.10.0
vue 版本：2.6.14

最简易的用法

map.fitBounds([
	[32.958984, -5.353521], // 边界的西南角
	[43.50585, 5.615985] // 边界的东北角
]);

获取点合集的边界范围并定位

数据格式：GeoJSON 格式的一堆点要素
const testJson =

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          116.14651904622104,
          25.64994276410873
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          114.57822734231564,
          25.14633356787543
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          111.21981499339012,
          27.808563561712532
        ],
        "type": "Point"
      }
    }
  ]
}

这部分使用的turf.js方法：envelope 获取多点的范围

const enveloped = this.turf.envelope(testJson);
map.fitBounds([[enveloped.bbox[0], enveloped.bbox[1]], [enveloped.bbox[2], enveloped.bbox[3]]],{
    linear: false,
    animate: true,
})

获取面要素的边界范围并定位

数据格式：GeoJSON 格式的面或多面
这部分使用的turf.js方法：bbox 获取边界

const bbox = this.turf.bbox(features);
this.map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]],{
  linear: false,
  animate: true,
})

注意：

1. 线要素同样适用
2. 如果是多面的要素合集(FeatureCollection)，那么可以用turf.center方法，获取合集中每一个多面的中心点再生成一个点要素合集，最后再依据这个点合集的边界范围并定位。

获取多个线要素的边界范围并定位

首先遍历所有的线要素（turf.geomEach），将每条线转换成点（turf.explode），然后把点合并到一个数组里。

for (let i = 0; i < features.length; i++) {
  this.turf.geomEach(features[i], function (currentSegment) {
	// 获取点位
	const explode = that.turf.explode(currentSegment);
	that.allPoint.push.apply(that.allPoint, explode.features)
  });
}

然后就可以通过turf.envelope获取点合集的边界范围

const enveloped = this.turf.envelope(this.turf.featureCollection(this.allPoint));
this.map.fitBounds([[enveloped.bbox[0], enveloped.bbox[1]], [enveloped.bbox[2], enveloped.bbox[3]]], {
  linear: false,
  animate: true,
})