弹窗-跟随

代码实例

<script setup lang="ts">
import { onMounted, onBeforeUnmount, onBeforeMount, ref, nextTick } from 'vue'
onBeforeMount(() => {
  hideBar()
})
const LarkExplorer = window.LarkExplorer
let map: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})
let pos: any
function initMap() {
  // 默认天地图影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg
  map = new LarkExplorer.Map('map', baseImagery)
  console.log(map)
  pos = LarkExplorer.Coordinate.PosFromXYZ(119.5, 27, 10)
  const layer = map.Layers.Add.addBillboard(pos, {
    image: new URL('../assets/images/point.png', import.meta.url).href,
    onGround: false,
  })
  map.Navigation.flyToItem(layer)
}
const showPopup = ref(false)

// 弹窗回调对象
let domRender: any

// 开启弹窗
const start = () => {
  showPopup.value = true
  nextTick(() => {
    const popDiv = document.getElementById('popup')
    const options = {
      offset: { x: 0, y: 0 },
      maxHeight: 1000000,
    }
    domRender = map.Render.PostRender.domFollow(popDiv, pos, options)
  })
}
// 关闭弹窗
const stop = () => {
  domRender && domRender()
  showPopup.value = false
}
</script>

运行效果 更多示例