多屏对比
该框架支持多屏对比
代码实例
vue
<script setup lang="ts">
import { onMounted, onBeforeUnmount, onBeforeMount } from 'vue'
onBeforeMount(() => {
hideBar()
})
const LarkExplorer = window.LarkExplorer
let map: any, map1: any, map2: any
onMounted(() => {
LarkExplorer.ready({
baseUrl: './dist/resources/',
}).then(initMap)
})
function initMap() {
map = new LarkExplorer.Map('map')
const baseImagery2 = LarkExplorer.BaseLayer.DefaultTdtVec
map1 = new LarkExplorer.Map('map1', baseImagery2)
const baseImagery3 = LarkExplorer.BaseLayer.DefaultTdtImg
map2 = new LarkExplorer.Map('map2', baseImagery3)
console.log(map, map1, map2)
}
let viewerSync: any
// 联动开启,关闭
const open = (bool: boolean) => {
if (!viewerSync) {
viewerSync = map.Screen.viewerSync([map1.viewer, map2.viewer])
}
viewerSync.sync = bool
}
</script>
运行效果
更多示例