cesium vue 气泡窗

490 阅读1分钟

效果:

源码

Popup 代码

<!-- 悬浮在模型头顶的漂浮框 -->
<template>
  <div ref="popupTitle" class="earth-popup-imgbg-blue-simple" style="position:absolute;">
    <div class="title">{{ $title }}</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getUId } from '../../utils/uuid'

export default {

  props: {
    $title: {
      type: String,
      default: ''
    },
    $position: {}
  },

  mounted() {
    this.init()
  },

  data() {
    return {
      $popup: undefined,
      $cartesian: undefined,
      $lastScreenPosition: undefined
    }
  },

  methods: {
    init() {
      this.$popup = this.$refs.popupTitle
      this.$cartesian = Cesium.Cartographic.toCartesian(this.$position)
      this.$wgs84 = Cesium.Cartesian3.fromRadians(this.$position.longitude, this.$position.latitude, this.$position.height)
      this.$popup.id = getUId()
      viewer.scene.postRender.addEventListener(() => {
        this.postRenderPopup(this.$position)
      })

    },
    // 视角变化时,修改popup样式
    postRenderPopup(position) {
      if (!viewer || !position) {
        return
      }


      const cameraPosition = viewer.camera.position

      //距离500时,隐藏标签
      if ((Cesium.Cartesian3.distance(cameraPosition, this.$cartesian) > 5000)) {
        // console.log('hidden')
        if (this.$popup.style.visibility !== 'hidden') {
          this.$popup.style.visibility = 'hidden'
        }
      } else {
        let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, this.$wgs84)

        if (windowPosition && this.$popup) {

          if (this.$lastScreenPosition) {
            if (this.$lastScreenPosition.x === windowPosition.x && this.$lastScreenPosition.y === windowPosition.y) {
              return
            }
          }

          this.$lastScreenPosition = windowPosition
          const clientHeight = this.$popup.clientHeight

          this.$popup.style.display = 'block'
          this.$popup.style.left = windowPosition.x + 'px'
          this.$popup.style.top = windowPosition.y - clientHeight + 'px'

          if (this.$popup.style.visibility !== 'visible') {
            this.$popup.style.visibility = 'visible'
          }


        }


      }
    },
    // 改造只留一个事件监听
    postRenderPopups(positions = []) {

    },

    close() {
      this.$emit('update:visible', false)
    }
  }
}

</script>

<style lang="scss">
.earth-popup-imgbg-blue-simple {
  position: absolute;
  background-size: 100%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACGCAYAAACYCsWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQkNEODBCMjgzNzMxMUU5QkY5NUI4QTI4QTM1NDQ2RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQkNEODBCMzgzNzMxMUU5QkY5NUI4QTI4QTM1NDQ2RiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFCQ0Q4MEIwODM3MzExRTlCRjk1QjhBMjhBMzU0NDZGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFCQ0Q4MEIxODM3MzExRTlCRjk1QjhBMjhBMzU0NDZGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++zeFSQAAH5NJREFUeNrsXVnMJElx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);
  background-repeat: no-repeat;
  width: 200px;
  height: 157px;
  z-index: 100;
  pointer-events: none;

  .title {
    pointer-events: none;
    position: inherit;
    top: 20px;
    left: 70px;
    font-size: 14px;
    text-align: left;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0px 0px 9px #000000bf;
  }
}
</style>

CreatePopup

import Vue from 'vue'

export function createPopup(cmp, title, position) {
  const CmpConstructor = Vue.extend(cmp)
  const instance = new CmpConstructor({
    propsData: {
      $title: title,
      $position: position
    }
  })
  instance.$mount()
  
  return instance.$el
  
}

使用

<template>
  <div id="app"></div>
  <div id="cesiumContainer"></div>
</template>

<script>
 import popupTitle from './tools/popup-title/index.vue'
import { createPopup } from './tools/popup-title/createPopup'
  
  export default{
    ......
    methods:{
      popup(Cartographic,name){
          const popup = createPopup(popupTitle, name, Cartographic)
          document.getElementById('app').appendChild(popup)
      }
    }
  }
</script>

踩坑

之前因为没加这句判断代码,当页面超过两个气泡窗时候,会出现卡死的情况,也没有报错信息,看起来像是postRender事件监听的问题。

        let windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, this.$wgs84)

        if (windowPosition && this.$popup) {
        }

加上判断屏幕坐标是否存在的这句代码后,问题解决。查看cesium源码时,发现这样一句话:

所以问题就是因为屏幕坐标有时没有获取到,导致的屏幕卡死问题。