cesium 画点 弹框

使用Cesium画点并添加弹框的步骤如下：

1. 首先，您需要在Vue项目中安装Cesium和vite-plugin-cesium插件。在vite.config.ts文件中，配置插件和别名，以便正确加载Cesium库。

2. 在Vue组件中，引入Cesium并创建一个Viewer实例。您可以使用Cesium.CesiumWidget构造函数来创建一个具有默认属性的Viewer。

3. 创建一个Entity实例，并设置其位置以及其他属性。您可以使用Cesium.Cartesian3来定义点的位置。

4. 为Entity添加描述信息，可以使用Entity.description属性。您可以在描述中使用HTML标签和CSS样式来自定义弹框的内容。

5. 监听鼠标单击事件，获取点击屏幕位置，使用Cesium.SceneTransforms.wgs84ToWindowCoordinates将Cartesian坐标转换为屏幕坐标。

6. 动态设置弹出框的位置，通过计算弹出框的宽高和实时位置来确定其在屏幕上的位置。

下面是一个示例代码片段，展示了使用Cesium画点并添加弹框的过程：

// 在Vue组件中
import * as Cesium from 'cesium';

export default {
  mounted() {
    // 创建Cesium Viewer实例
    const viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
      // 设置其他属性
    });

    // 创建Entity实例
    const entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(经度, 纬度), // 设置点的位置
      point: {
        pixelSize: 10,
        color: Cesium.Color.YELLOW,
      },
      description: '<div>弹框的内容</div>', // 设置弹框的内容
    });

    // 监听鼠标单击事件
    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(event) {
      const position = event.position;
      const cartesian = viewer.camera.pickEllipsoid(position, viewer.scene.globe.ellipsoid);
      const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
      // 根据windowPosition设置弹出框的位置
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  },
};

请根据您的具体需求和项目设置，进行适当的调整和修改。