tmzn-weihe/src/views/csq-popup/index.vue

<template>
  <div class="csq-container" v-if="visible" :style="popupStyle">
    <div class="csq-popup-title">
      <span class="title-text">{{ title }}</span>
      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
    </div>
    <div class="csq-popup-content">
      <PieChart style="height: 2.4rem"/>
    </div>
  </div>
</template>

<script>
import PieChart from './pie-chart/index.vue'
export default {
  components: {
    PieChart
  },
  data() {
    return {
      title: '采砂区',
      visible: false,
      popupStyle: {
        position: 'absolute',
        top: '0',
        left: '0'
      }
    }
  },
  mounted() {
    this.$globalEventBus.$on('clickCsqModal', (data) => {
      // this.visible = true
      this.title = data.title
      this.showPopup(data)
    })
  },
  methods: {
    showPopup(data) {
      // 将笛卡尔坐标转换为屏幕坐标
      const cartesian = this.Cesium.Cartesian3.fromDegrees(data.position[0],data.position[1],data.position[2])
      const canvasPosition = this.Cesium.SceneTransforms.worldToWindowCoordinates (window.map.scene, cartesian);
       console.info(canvasPosition)
      if (canvasPosition) {
        this.popupStyle = {
          position: 'absolute',
          left: `${canvasPosition.x}px`,
          top: `${canvasPosition.y -400}px`, // 向上偏移，避免遮挡点位
          'z-index': 1000
        }

        this.visible = true
      }
    },
    closeModal() {
      this.visible = false
    }
  },
  destroyed() {
    this.$globalEventBus.$off('clickCsqModal')
  }
}
</script>

<style lang="scss" scoped>
.csq-container {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: px-to-rem(430);
  z-index: 9999;
  .csq-popup-title {
    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
    background-size: 100% 100%;
    height: px-to-rem(39);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px-to-rem(20);
    font-size: px-to-rem(16);
    color: #fff;
    .title-text {
      font-weight: bold;
      margin-left: px-to-rem(20);
    }
  }
  .csq-popup-content {
    height: px-to-rem(262);
    background: rgba(#233d6c, 0.8);
    padding: px-to-rem(10);
  }
}
</style>