Skip to content

动态图

框架支持动态图

支持效果

INFO

支持

代码实例

typescript
<script setup lang="ts" name="初始地形">
import { showCode, closeCode } from '@/utils/store'
import { onMounted, onBeforeUnmount } from 'vue'
import { addCircleScanPostStage } from './CircleDiffusion'
const LarkExplorer = window.LarkExplorer
let map: any
const pos = { x: 112, y: 25, z: 10000 }
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})
let obj: any
function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg

  // 默认全球地形
  // const baseTerrain = LarkExplorer.BaseLayer.DefaultTerrain

  // 自定义地形
  const baseTerrain = LarkExplorer.BaseLayer.getTerrain(
    'https://app.larkview.cn/larkexplorersdk/resources/terrain/'
  )

  map = new LarkExplorer.Map('map', baseImagery)
  console.log(map)
  map.Navigation.flyToDegree(pos)
}

const create = () => {
  addCircleScanPostStage(map._viewer)
  // addSpotlightPostStage(map._viewer)
}

const show = () => {
  const code = ``
  showCode(code)
}
onBeforeUnmount(() => {
  closeCode()
  map && map._viewer.destroy()
})
</script>
<template>
  <div id="map">
    <div class="tools">
      <el-button size="small" @click="create">创建</el-button>
    </div>
    <img
      class="code-but"
      src="../assets/images/code.png"
      @click="show"
      title="源码"
    />
  </div>
</template>

<style lang="scss" scoped></style>

运行效果 更多示例