mapbox多屏地图展示，同步缩放和拖拽

贴个群号

WebGIS学习交流群461555818，欢迎大家。

使用到的技术

vue的事件总线，事件总线，如果这块儿不明白的话，可以去看我的上一篇博客

https://blog.csdn.net/Sakura1998gis/article/details/113175462

封装地图组件

我们分屏展示的话，有很多地图，地图会被封装成一个组件，然后每个屏都去调用就好了，如果要实现同步拖拽和缩放的话，可以参考使用eventBus，使每一个地图自己被调用的时候，组件会自己响应位置，然后都去平移到那个地方，具体做法是这样

在地图组件内初始化地图的地方
为地图添加一个map.on的事件，拖拽时候取中心点，用eventBus传出去，然后自己再接收，更改

  const _self = this
  // 拖拽同步
  map.on('dragend', function () {
    const mapX = _self.map.getCenter().lng
    const mapY = _self.map.getCenter().lat
    this.lngLAt = [mapX, mapY]
    bus.$emit('dragend', [mapX, mapY])
  })

在mounted里面接收

    // 接收拖拽同步
    bus.$on('dragend', target => {
      switch (target) {
        case this.lngLAt:
          break
        default:
          this.map.setCenter(target)
      }
    })

可以看到这里的话，我是把中心点存了一下，接收的时候会对比，因为其他地图接收到更改的时候，去更改自己的位置，他动的时候，又会影响原来的地图，导致一个地图动的时候，这些地图会互相影响，这里的话是会对比中心点，如果和动之前的中心点一样的话，就部更改自己的中心点了。

缩放的话和拖拽同理，但是需要注意一点，缩放的时候不仅仅要更改缩放级别，也要更改中心点