热点图标

框架支持热点图标

支持效果

INFO

支持

代码实例

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
const LarkExplorer = window.LarkExplorer
let map: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})

function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg

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

  map = new LarkExplorer.Map('map', baseImagery, baseTerrain)
  console.log(map)
  initView()
}
function initView() {
  const status = {
    position: {
      x: -2782331.8443587283,
      y: 5017472.933028734,
      z: 2780172.906111229,
    },
    hpr: {
      heading: 4.205835431111227,
      pitch: -0.5657045106878131,
      roll: 0.0000723463732033025,
    },
  }
  map.Navigation.flyToPos(status, 3)
}
const id = 'unique-id'
/**
 * 创建热点图标
 * @param type "hot" | "process"
 */
const initPanel = (type: string) => {
  removeAll()
  const pos = LarkExplorer.Coordinate.PosFromXYZ(119, 26)
  map.Layers.Add.addPanel(pos, 'value', id, type)
}

const removeAll = () => {
  map.Layers.removeById(id)
}
</script>

运行效果 更多示例