mapbox split screen map synchronous zoom drag rotation

Results map

I wrote a version before, and then after some optimizations, the final version was formed. It was two-dimensional before, but now it is three-dimensional. The address is here

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

accomplish

listen action

        // 拖拽同步
        map.on('dragend', () => {
    
    
          map.once('idle', () => {
    
    
            const info = this.getMapCameraInfo()
            Utils.$emit('MAP_EVENTS.DRAGEND', info)
          })
        })
        // 放大缩小同步
        map.on('zoomend', () => {
    
    
          map.once('idle', () => {
    
    
            const info = this.getMapCameraInfo()
            Utils.$emit('MAP_EVENTS.ZOOMEND', info)
          })
        })
        //旋转视角同步
        map.on('rotateend',() =>{
    
    
          map.once('idle',() =>{
    
    
            const info = this.getMapCameraInfo()
            Utils.$emit('MAP_EVENTS.ROTATEEND', info)
          })
        })

How to get the state of the map

      // 获取地图位置信息
      getMapCameraInfo () {
    
    
        const zoom = this.map.getZoom()
        const {
    
     lng, lat } = this.map.getCenter()
        //设置地图的倾斜
        const pitch = this.map.getPitch();
        //设置地图的方位（旋转）
        const bearing = this.map.getBearing()
        return {
    
    
          from: this.mapId,
          lngLat: [lng, lat],
          zoom,
          pitch,
          bearing
        }
      },

Then in mounted, write the event bus

      // 接收拖拽同步
      Utils.$on('MAP_EVENTS.DRAGEND', this.updateMapCameraInfo)
      // 接收放大缩小同步
      Utils.$on('MAP_EVENTS.ZOOMEND', this.updateMapCameraInfo)
      // 接收旋转视角同步
      Utils.$on('MAP_EVENTS.ROTATEEND', this.updateMapCameraInfo)

How to update the state of the map

      // 更新地图位置信息
      updateMapCameraInfo (data) {
    
    
        const {
    
     from, lngLat, zoom, pitch,bearing } = data
        if (this.mapId === from || from === 'map') return
        this.map.jumpTo({
    
    
          center: lngLat,
          zoom
        })
        this.map.setPitch(pitch);
        this.map.setBearing(bearing);
      },