CesiumHTML (用到jQuery)

<template>
  <div
    :id="domID"
    style="position:absolute;"
  >
    <slot>
</slot>
  </div>
</template>

<script>
export default {
  props: {
    domID: {
      type: String,
      required: false,
      default() {
        return this.$utils.getUUID()
      }
    },
    position: {
      type: Object,
      required: true,
      default() {
        if (!Cesium) {
          return {}
        }
        return new Cesium.Cartesian3()
      }
    }
  },
  watch: {
    position(val, old) {
      this.listenFun()
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.updatePosition()
  },
  beforeDestroy() {
    viewer.scene.postRender.removeEventListener(this.listenFun)
  },
  methods: {
    /**
     * 用jQuery更新HTML元素位置
     */
    jqueryUpdateHtml(c, domID) {
      if (c !== undefined) {
        let x, y
        //窗口改变 位置会有偏移
        if (!viewer.container.popOnTop) {
          x = c.x - $('#' + domID).width() / 2 + 'px'
          y = c.y - $('#' + domID).height() - viewer.scene.canvas.height + 'px'
        }
        $('#' + domID).css('transform', 'translate(' + x + ', ' + y + ')')
      }
    },
    listenFun() {
      let curWindowP = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, this.position)
      if (curWindowP) {
        this.jqueryUpdateHtml(curWindowP, this.domID)
      }
    },
    updatePosition() {
      if (!viewer) {
        return
      }
      //三维场景渲染  更新弹窗位置
      viewer.scene.postRender.addEventListener(this.listenFun)
    }
  }
}
</script>

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