Skip to content

多屏对比

该框架支持多屏对比

代码实例

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>

运行效果 更多示例