mapbox 分屏对比2

mapbox 分屏对比2"/>

mapbox 分屏对比2

这个是纯手写

 mapboxgl 

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