5分钟搞定Cesium点击事件！用ScreenSpaceEventHandler实现Entity弹窗/高亮/信息展示

Cesium实战：5分钟实现Entity点击交互全方案

在三维GIS应用开发中，实体(Entity)的点击交互是最基础也最核心的功能需求。本文将带你快速掌握Cesium的ScreenSpaceEventHandler事件系统，实现包括弹窗信息展示、高亮选中效果、属性查看等企业级交互功能。

1. 环境准备与基础配置

首先创建一个基础的Cesium Viewer实例，并优化默认配置。以下是推荐的企业级初始化方案：

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
  // 禁用非必要控件
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  navigationHelpButton: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  // 关键配置：禁用默认选中框
  selectionIndicator: false,
  // 移除版权信息
  creditContainer: document.createElement('div')
});

重要提示：设置selectionIndicator: false可以禁用Cesium默认的绿色选中框，这对于自定义交互样式至关重要。

2. 核心事件处理器配置

Cesium的ScreenSpaceEventHandler是处理用户交互的核心类。我们先创建一个全局事件处理器：

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

推荐的事件处理架构应该包含以下要素：

• 左键单击：主交互事件
• 鼠标移动：悬停效果
• 右键单击：取消操作
• 双击：特殊交互（如视角飞行）

3. 实现点击弹窗功能

弹窗是展示实体信息的常见方式。我们先创建一个简单的HTML弹窗结构：

<div id="custom-popup" class="cesium-popup">
  <div class="cesium-popup-content"></div>
  <div class="cesium-popup-tip"></div>
</div>

对应的CSS样式（建议放在head中）：