Cesium.js实现显示点位对应的自定义信息弹窗（数据面板）

博客：关于Cesium的常见需求整理之点位和弹窗（点位弹窗）

博客：cesium添加点、线、面、文字、图标、模型等标绘

---

零、相关技术选型：

Vue2 Vuecli5 Cesium.js 天地图

一、需求说明

在使用2D地图（天地图、高德地图等）基于官方文档可以实现下面需求：

实现添加点位，并在点位附近显示对应的信息弹窗。

一般信息弹窗的显示方式有两种：

第一种：鼠标点击图标显示信息弹窗，点击其他地方隐藏信息弹窗；

第二种：鼠标移入图标显示信息弹窗，鼠标移出图标隐藏信息弹窗；

本次实现：现在需要在利用Cesium.js来实现三维地图中，点位的信息弹窗的展示。

二、基础建设

1、信息弹窗的结构

CommonPanel.vue

其中组件props传值：

visible用来实现信息弹窗的显示与隐藏；

data用来传递展示数据；

position用来实现信息弹窗随点位图标的位置而变化。

2、父组件（Cesium viewer展示）

三、需求实现

你需要实现的顺序是：

1. 先实现对点位的操作是否可以将信息弹窗显示出来；
2. 确保没问题都再实现信息弹窗跟随图标移动的问题；

1、需求一：鼠标点击图标，显示弹窗

在点击实体时的判断：

Cesium.defined(pickedEntity) 判断实体是否为空；

this.selectedEntity === point 判断实体对应的是否为点位；

注意：pickedEntity?.id 才是你对应的图标实体。

addLayer() {
  const point = this.viewer.entities.add( /* 点位参数 */ );
  // 鼠标点击事件
  this.viewer.screenSpaceEventHandler.setInputAction(click => {
    let pickedEntity = this.viewer.scene.pick(click.position);
    this.selectedEntity = pickedEntity?.id;
    // 判断点击物体是否为图标实体
    if (Cesium.defined(pickedEntity) && this.selectedEntity === point) {
      this.updatePopupPosition(); // 更新弹窗的位置
      this.popupVisible = true; // 显示弹窗
      this.popupData = {
        /* 提取并设置数据 */
      };
    } else {
      this.popupVisible = false; // 隐藏弹窗
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  // 监听鼠标移动事件来更新弹窗位置
  this.viewer.screenSpaceEventHandler.setInputAction(movement => {
    if (this.popupVisible && this.selectedEntity) {
      this.updatePopupPosition(); // 更新弹窗的位置
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},

2、需求二：鼠标移入，弹窗显示；鼠标移出，弹窗隐藏

// 添加图层
addLayer() {
  const point = this.viewer.entities.add( /* 点位参数 */ );
  // 鼠标移动
  this.viewer.screenSpaceEventHandler.setInputAction(movement => {
    const pickedEntity = this.viewer.scene.pick(movement.endPosition);
    this.selectedEntity = pickedEntity?.id;
    // 判断移入物体是否为图标实体
    if (Cesium.defined(pickedEntity) && this.selectedEntity === point) {
      // 鼠标移入图标
      this.updatePopupPosition(); // 更新弹窗的位置
      this.popupVisible = true;
    } else {
      // 鼠标移出图标
      this.popupVisible = false;
      this.selectedEntity = null;
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},

四、信息弹窗跟随图标移动

实现该功能，需要将Cesium世界坐标转为屏幕坐标，进而更新弹窗的位置。

首先，获取当前选择的实体（例如点位或图标）在 Cesium 世界坐标系中的位置；

然后，将 3D 世界中的点位转换为 2D 屏幕上的像素位置；

最后，将弹窗的位置设置为计算出的屏幕坐标。

`Cesium.SceneTransforms.wgs84ToWindowCoordinates` 方法负责3D点位转换2D屏幕像素。

// 更新弹窗的位置
updatePopupPosition() {
  // 计算弹窗位置
  // 这里获取当前选择的实体（例如点位或图标）在 Cesium 世界坐标系中的位置。
  // `this.selectedEntity.position.getValue` 方法根据当前时间返回实体的位置。
  const cesiumPosition = this.selectedEntity.position.getValue(
    this.viewer.clock.currentTime
  );

  // 将 Cesium 世界坐标转换为屏幕坐标。
  // 这一步是将 3D 世界中的点位转换为 2D 屏幕上的像素位置。
  const canvasPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    this.viewer.scene,
    cesiumPosition
  );

  // 检查转换是否成功。有时候，如果点位不在当前视图中，则转换可能失败。
  if (canvasPosition) {
    // 更新弹窗位置
    this.popupPosition = {
      x: canvasPosition.x + 20,
      y: canvasPosition.y - 60 // 假设弹窗应该在图标上方 50px 的位置
    };
  }
}

到此结束......