mapboxgl.map适应边界框;mapboxgl显示到中心点;mapboxgl适应边界框显示

##阅读此文章可解决以下问题：
**1.从多边形图案的中心点加载地图
2.算出多边形图案的边界框，将地图移动到边界框所在的位置，自适应大小**
**
3.从多边形中心点加载地图，并移动到它的边界框所在位置，自适应大小。
**

##问题描述完毕，实现步骤描述
**1.创建对象接收一系列点位集合（多边形）
2.算出图案中心点和边界框
3.从中心点加载地图，移动地图到边界框所在地
**

##理论存在，实验开始！
```
// 加载地图事件
initMap() {
      mapboxgl.accessToken = 'pk.ey/保密……Mg';
      let sources = {
          'tdt-img': {//影像底图
              'type': 'raster',
              'tiles': [
                  'http://保密……',
              ],
              'tileSize': 256
          },
          'tdt-cia': {//影像-注记
              'type': 'raster',
              'tiles': [
                 'http://保密……',
              ],
              'tileSize': 256
          }
      }
      let layers = [{
          'id': 'img',
          'type': 'raster',
          'source': 'tdt-img'
      }, {
          'id': 'cia',
          'type': 'raster',
          'source': 'tdt-cia'
      }]

// 如果是修改，定位到中心点，根据边界框显示地图
      var polygon = null
      var centerPoint = null
      var southWest = null
      var northEast = null
      if (this.formData.monitorScope != '' && this.formData.monitorScope != null) {
        // mt是储存的一系列点位
		let mt = JSON.parse(this.formData.monitorScope)
        polygon = turf.polygon(mt);
        polygon.id = 'poly1'
        // 计算质心（中心点）
        var centerData = turf.centerOfMass(polygon);
		// 避免复制引用
        centerPoint = JSON.stringify(centerData.geometry.coordinates)
        centerPoint = JSON.parse(centerPoint)

// 移动到边界框
        // 去掉数据首尾中括号（因为数据库储存时存的有多个中括号，这里多出一对，解析失败，因此去掉）
        let points = JSON.parse(JSON.stringify(this.formData.monitorScope))// 数据库存的一系列点
		// 去掉多余的首尾字符,大概格式是一对中括号包括了一堆点位，具体需要什么格式请自行百度
        points = points.substring(0, points.length - 1);
        points = points.substring(1, points.length);
        var line = turf.lineString( JSON.parse(points) );
        var bbox = turf.bbox(line);// turf.bbox方法，获得边界框点位
        // var bboxPolygon = turf.bboxPolygon(bbox); // 在地图上画出边界框
		// 移动到边界框需要两个点 （西南点，东北点）
        southWest = [bbox[0], bbox[1]];
        northEast = [bbox[2], bbox[3]];
      }
      if (centerPoint == null || centerPoint == '') {
        centerPoint = [116.3888056,39.9075]  // 北京天安门
      }

var url=window.location.host
      this.map = new mapboxgl.Map({
          container: this.$refs.mymap,
          center:centerPoint, // 中心点
          zoom: 10, // 缩放层级
          style:{
            sprite: "http://"+url+"/mapbox/sprites/sprite",//本地的json及图片
            glyphs: "http://"+url+"/mapbox/font/{fontstack}/{range}.pbf",//字体文件
            version: 8,
            sources: sources,
            layers: layers
          },
        })
        this.draw = new MapboxDraw({displayControlsDefault: false});
        this.map.addControl(this.draw);

// 如果是修改，绘制保存的图形
        let that = this;
        if (this.formData.monitorScope != '' && this.formData.monitorScope != null) {
          // 移动到边界框
          if (southWest != null && northEast != null) {
            this.map.fitBounds([ southWest, northEast ]);
          }
          // 等地图样式加载完后 绘图（否则会报一个样式未加载完就调用方法的错）
          this.map.on('load', function() {
            that.addclLayers(polygon) // 注意此处是that，因为在onload方法域的this取到的不是外面的vue对象！！！
          })
        }
      },
```
<br/><br/>
以上是个人工作经历，废了老大的劲搞出来的，功能很简单，但是没怎么弄地图相关的，所以找资料很累，整理一下写个资料，希望能帮后来者少踩些坑。
###效果图：
![效果图](https://linxuan.fun/usr/uploads/2021/02/3355964296.png)

Alipay

手机上阅读

最后一次更新于2021-02-05

Linxuan

天堂有路你不走，学海无涯苦作舟。

挥别2020，展望2021

SpringBoot + Vue以文件流的形式预览FTP服务器的PDF文件