Cesium监听函数加载与卸载

Cesium中监听函数是一个很常见的功能，比如我们经常需要在页面上加载一些div标签，这个时候就必须用到监听函数。如何为div加载监听，如何卸载不需要的监听呢。

核心代码：

listenPopup(viewer, divEntity, position) {
      var listen = () => {
        const divPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          viewer.scene,
          position
        );
        if (divPosition === undefined) return;
        if (divEntity.card_show === false) {
          viewer.scene.postRender.removeEventListener(listen);
        }
        if (
          Cesium.Cartesian3.distance(viewer.camera.position, position) > 3000
        ) {
          divEntity.card_show === false;
          return;
        } else {
          var x = divPosition.x - divEntity.$el.offsetWidth * 0.5;
          var y = divPosition.y - divEntity.$el.offsetHeight;
          divEntity.$el.style.transform =
            'translate3d(' + x + 'px,' + y + 'px,' + 0 + 'px)';
          // divEntity.$el.style.display = 'block';
          divEntity.card_show === true;
        }
      };
      viewer.scene.postRender.addEventListener(listen);
    },

调用方法：

this.listenPopup(viewer, this.$refs.buildPopup, pickPosition);

监听组件源码：

<template>
  <!-- <div class="pressure-popup" v-show="card_show"> -->
  <div id="flowInfoPopup" v-show="card_show">
    <el-card class="box-card" style="border: 0px; color: #fff">
      <div slot="header" class="clearfix">
        <span>{{ typeName }}</span>
      </div>
      <span
        class="mars3d-popup-close-button mars3d-popup-color closeButton"
        @click="closePopup"
        >×</span
      >
      <el-row class="text item">
        <el-col
          :span="12"
          style="border-right:1px solid white;box-sizing: border-box;"
          >户主名称：</el-col
        >
        <el-col :span="12">{{ houseHost }}</el-col>
      </el-row>
      <el-row class="text item">
        <el-col
          :span="12"
          style="border-right:1px solid white;box-sizing: border-box;"
          >人口数量</el-col
        >
        <el-col :span="12">{{ peopleNum }}</el-col>
      </el-row>
      <el-row class="text item">
        <el-col
          :span="12"
          style="border-right:1px solid white;box-sizing: border-box;"
          >建筑面积</el-col
        >
        <el-col :span="12" style="color:#00fd7d;font-weight:bold;">{{
          buildArea
        }}</el-col>
      </el-row>
      <el-row class="text item">
        <el-col
          :span="12"
          style="border-right:1px solid white;box-sizing: border-box;"
          >上月抄表</el-col
        >
        <el-col :span="12" style="color:#00fd7d;font-weight:bold;">{{
          needWater + '吨'
        }}</el-col>
      </el-row>
    </el-card>
    <div class="pressure-popup-tip-container">
      <div class="pressure-popup-tip pressure-popup-background"></div>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import echartPanel from '@/components/Map/components/water3D/echartPanel';
export default {
  props: {
    /**
     * 建筑类型
     */
    typeName: {
      type: String,
      default: '住宅'
    },
    houseHost: {
      type: String,
      default: '王强'
    },
    peopleNum: {
      type: Number,
      default: 5
    },
    buildArea: {
      type: Number,
      default: 100
    },
    needWater: {
      type: Number,
      default: 5
    }
  },
  // components: { echartPanel },
  data() {
    return {
      card_show: false
    };
  },
  methods: {
    showInfo() {
      this.card_show = true;
    },
    closePopup() {
      this.card_show = false;
    }
  }
};
</script>
<style lang="less" scoped>
.pressure-popup {
  position: absolute;
  z-index: 999999;
  width: 230px;
  //height: 180px;
}
#flowInfoPopup {
  position: absolute;
  width: 230px;
  font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, 'Microsoft Yahei',
    'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  pointer-events: all;
  user-select: auto;
  // width: 100%;
  //height: 180px;
  float: left;
  //box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  // min-width: 300px;
  //min-height: 300px;
  // max-height: 500px;
  position: absolute;
  z-index: 999;
  .mars3d-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
    width: 20px;
    height: 20px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    text-decoration: none;
    font-weight: 700;
    background: transparent;
    z-index: 20170825;
    cursor: pointer;
  }
  .pressure-popup-tip-container {
    margin: 0 auto;
    width: 40px;
    height: 20px;
    position: relative;
    overflow: hidden;
    animation: animation 1s;
    .pressure-popup-tip {
      width: 17px;
      height: 17px;
      padding: 1px;
      margin: -10px auto 0;
      transform: rotate(45deg);
      background: rgba(41, 84, 141, 0.9) !important;
    }
    .pressure-popup-background {
      background: rgba(41, 84, 141, 0.9) !important;
    }
  }
}
.flowEchart {
  font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, 'Microsoft Yahei',
    'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
  font-size: 14px;
  color: #ffffff;
  background-color: #022b52de;
  cursor: pointer;
  pointer-events: all;
  user-select: auto;
  width: 50%;
  height: 150px;
  float: right;
}
.text {
  font-size: 14px;
}

.item {
  height: 30px;
  border-bottom: 1px solid white;
  text-align: center;
  line-height: 30px;
}
</style>