mapbox 分屏对比

我们要做的的是左右分屏后两张地图同步对比，而且可以切换数据，实现的效果图是这样的，原博文地址：https://blog.csdn.net/weixin_42599077/article/details/103516695

<template>
  <div class="hello" style="height:100%;width:100%;position:relative;">
    <div class="map1" id="map1"></div>
    <div class="map1" id="map2"></div>
    <div class="datalist">
      <el-radio-group v-model="radio" @change="handleSelectionChange">
        <el-radio v-for="item in tableData" :key="item.address" :label="item.address">{{item.name}}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
import "../../../../../static/mapbox/css/map.css";
export default {
  name: "Map",
  components: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "矢量",
          address:
            TDTHEADER +
            "/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
            gpmToken
        },
        {
          date: "2016-05-02",
          name: "影像",
          address:
            TDTHEADER +
            "/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
            gpmToken
        },
        {
          date: "2016-05-04",
          name: "地形",
          address:
            TDTHEADER +
            "/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
            gpmToken
        }
      ],
      radio:
        TDTHEADER +
        "/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
        gpmToken,
      ishorizontal: true
    };
  },
  watch: {},
  methods: {
    initmap() {
      var map1_x;
      var map1_y;
      var map1_zoom;
      var map2_x;
      var map2_y;
      var map2_zoom;
      var map1_pitch;
      var map2_pitch;
      var map1_bear;
      var map2_bear;
      mapboxgl.accessToken =
        "pk.eyJ1IjoibGkxMjMzMjEiLCJhIjoiY2pxbWM3dWFtM3JqMDQybGJiNDhiaHRwaSJ9.-KPrXTSeKfaRo6TrrheFIA";
      window.map1 = new mapboxgl.Map({
        container: "map1",
        style: window.beforestyle,
        zoom: 12,
        center: [117.72, 39.05]
      });
      window.map2 = new mapboxgl.Map({
        container: "map2",
        style: window.afterstyle,
        zoom: 12,
        center: [117.72, 39.05]
      });
      // 拖拽
      map2.on("drag", function() {
        map2_x = map2.getCenter().lng;
        map2_y = map2.getCenter().lat;
        map1.setCenter([map2_x, map2_y]);
      });
      map1.on("drag", function() {
        map1_x = map1.getCenter().lng;
        map1_y = map1.getCenter().lat;
        map2.setCenter([map1_x, map1_y]);
      });

      //   放大缩小
      map2.on("zoom", function() {
        map2_zoom = map2.getZoom();
        map1.setZoom(map2_zoom);
      });
      map1.on("zoom", function() {
        map1_zoom = map1.getZoom();
        map2.setZoom(map1_zoom);
      });

      // 倾斜
      map2.on("pitch", function() {
        map2_pitch = map2.getPitch();
        map1.setPitch(map2_pitch);
      });
      map1.on("pitch", function() {
        map1_pitch = map1.getPitch();
        map2.setPitch(map1_pitch);
      });

      // 旋转
      map1.on("rotate", function() {
        map1_bear = map1.getBearing();
        map2.setBearing(map1_bear);
      });
      map2.on("rotate", function() {
        map2_bear = map2.getBearing();
        map1.setBearing(map2_bear);
      });
    },
    handleSelectionChange(val) {
      if (val) {
        window.beforestyle.sources.vecTiles.tiles[0] = val;
        window.map1.remove();
        window.map2.remove();
        this.initmap();
      }
    }
  },
  mounted() {
    this.initmap();
  }
};
</script>
<style scoped>
.map1 {
  height: 100%;
  width: 50%;
  float: left;
}

.datalist {
  width: 230px;
  height: 30px;
  position: absolute;
  background: #fdfcfc;
  left: 5px;
  top: 5px;
}
</style>

var beforestyle = {
  "data_id": "11001000347",
  "name": "测试一会删",
  "zoom": 3,
  "center": [
    108.420679,
    36.772537
  ],
  "layers": [{
      "id": "707a5545758b97646194a04ef6fb9c0d",
      "label": "啊啊1",
      "type": "raster",
      "source": "vecTiles",
      "isUrl": false,
    },

  ],
  "version": 8,
  "sources": {
    vecTiles: {
      type: "raster",
      tiles: [
        TDTHEADER +
        "/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + gpmToken
      ],
      tileSize: 256
    },
  },
  "metadata": {
    "template": {
      "type": "4",
      "level": 0,
      "des": "0代表全国，1代表省，2代表市，3代表县"
    }
  },

}
var afterstyle = {
  "data_id": "11001000347",
  "name": "测试一会删",
  "zoom": 3,
  "center": [
    108.420679,
    36.772537
  ],
  "layers": [{
      "id": "707a5545758b97646194a04ef6fb9c0d",
      "label": "啊啊1",
      "type": "raster",
      "source": "tdtTiles",
      "isUrl": false,
    },

  ],
  "version": 8,
  "sources": {
    tdtTiles: {
      type: "raster",
      tiles: [
        TDTHEADER +
        "/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + gpmToken
      ],
      tileSize: 256
    },
  },
  "metadata": {
    "template": {
      "type": "4",
      "level": 0,
      "des": "0代表全国，1代表省，2代表市，3代表县"
    }
  },

}