vue cesium 标注弹窗

你可以使用Vue.js和Cesium来创建标注弹窗。首先，你需要在Vue.js中引入Cesium，并在Vue组件中初始化Cesium Viewer。

接下来，你可以在地图上创建标注，并为每个标注添加点击事件。当点击一个标注时，弹窗会显示相关的信息。

以下是一个简单的示例代码，展示了如何实现标注弹窗：

<template>
  <div>
    <div id="cesiumContainer" style="height: 500px;"></div>
    <div v-if="selectedMarker" class="popup">
      <h3>{{ selectedMarker.name }}</h3>
      <p>{{ selectedMarker.description }}</p>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';

export default {
  data() {
    return {
      viewer: null,
      selectedMarker: null,
    };
  },
  mounted() {
    this.viewer = new Cesium.Viewer('cesiumContainer');

    // 创建一个标注
    const marker = this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116.397, 39.909),
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
      },
      name: '标注名称',
      description: '标注描述',
    });

    // 添加点击事件处理程序
    marker.description = '标注描述'; // 可选，设置描述信息
    marker.name = '标注名称'; // 可选，设置名称
    marker.clickable = true;
    marker.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; // 解决标注被地形遮挡的问题

    marker.onClick = Cesium.Action.createDele