[mapbox] 分屏对比

纯手写

主要利用@mapbox/mapbox-gl-sync-move插件就行开发，所以安装该插件：

npm install @mapbox/mapbox-gl-sync-move --save

mapbox-gl-sync-move

<template>
  <div class="hello" style="height: 100%; width: 100%; position: relative">
    <div
      class="map1"
      id="map1"
      style="width: 50%; height: 100%; float: left"
    ></div>
    <div
      class="map1"
      id="map2"
      style="width: 50%; height: 100%; float: left"
    ></div>
  </div>
</template>
<script>
import syncMove from '@mapbox/mapbox-gl-sync-move';
export default {
  name: "Map",
  components: {},
  data() {
    return {
      
      
    };
  },
  watch: {},
  methods: {
    initmap() {
      var map1 = new mapboxgl.Map({
        container: "map1",
        zoom: 12,
        center: [117.72, 39.05],
      });
      var map2 = new mapboxgl.Map({
        container: "map2",
        zoom: 12,
        center: [117.72, 39.05],
      });
      syncMove(map1, map2);
    },
  },
  mounted() {
    this.initmap();
  },
};
</script>
<style scoped>
.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>

参考：

Mapbox GL基础（十三）：多个地图视角同步

mapbox 分屏对比2

Mapbox双屏联动，两个地图联动