点击查看：最新Cesium可视化系统实战视频课程
在 Web 地图开发中，尤其是利用 Cesium 进行三维地球可视化时，给用户提供良好的交互体验至关重要。Cesium 不仅支持复杂的地理信息显示，还提供了丰富的后期效果和交互功能，可以让用户在三维视图中以更为直观的方式与场景进行交互。本文将讲解如何在 Cesium 中实现“灰白与彩色高亮”效果，主要通过使用后期处理阶段（Post-Processing Stage）和鼠标交互来突出显示选中的物体。
一、概述
后期处理阶段（Post-Processing Stage） 是 Cesium 提供的一种强大的图像处理功能，它允许开发者在渲染完场景后对图像进行修改。通过这一功能，我们可以实现各种图像效果，比如模糊、黑白、颜色调整等。
在本篇文章中，我们的目标是：
- 将场景中的所有物体渲染为黑白效果；
- 在选中物体时将其恢复为彩色高亮显示。
二、实现思路
为了达到这个效果，我们需要利用 Cesium 中的 PostProcessStage 来实现场景的黑白效果。然后，通过监听鼠标点击事件，获取用户选择的物体，并对选中的物体进行高亮显示。
具体步骤如下：
- 创建黑白效果的后期处理阶段；
- 监听鼠标点击事件，判断用户是否点击了场景中的某个物体；
- 为选中的物体添加高亮效果，将其从黑白效果中“恢复”成彩色。
三、代码实现
以下是实现上述功能的代码示例：
const stages = viewer.scene.postProcessStages;
// 创建黑白后期处理阶段
const stage = stages.add(
Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
);
// 设置黑白效果的渐变程度
stage.uniforms.gradations = 32;
stage.enabled = true; // 启用后期处理
// 用于保存选中的物体
stage.selected = [];
// 监听画布的事件
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 监听鼠标左键点击事件
handler.setInputAction((movement) => {
console.log(movement); // 打印鼠标事件信息
// 获取点击位置的物体
let pickedObject = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedObject)) {
// 如果点击了一个物体，则将其添加到选中的物体列表中
stage.selected = [pickedObject.primitive];
} else {
// 如果没有点击物体，则清空选中的物体
stage.selected = [];
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
1. 创建黑白效果的后期处理阶段
首先，我们使用 Cesium.PostProcessStageLibrary.createBlackAndWhiteStage() 方法创建一个黑白效果的后期处理阶段。该阶段将应用于场景中的所有物体，将其渲染为黑白效果。
javascript
const stage = stages.add(
Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
);gradations是该黑白效果的渐变级别，值越大，黑白过渡效果越平滑。在此代码中，我们将其设置为32。
javascript
stage.uniforms.gradations = 32;- 启用黑白效果：
javascript
stage.enabled = true;2. 鼠标左键点击事件的监听
接下来，我们使用 Cesium 提供的 ScreenSpaceEventHandler 来监听用户在场景中的点击事件。ScreenSpaceEventHandler 可以帮助我们获取鼠标的位置信息，并对点击的目标进行处理。
javascript
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
let pickedObject = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedObject)) {
stage.selected = [pickedObject.primitive];
} else {
stage.selected = [];
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
javascriptmovement.position获取的是鼠标点击位置的坐标。viewer.scene.pick(movement.position)用于检测该位置是否点击到物体，如果点击到了物体，返回该物体的 primitive（原始对象）。
3. 为选中物体添加高亮显示
当用户点击场景中的物体时，我们将该物体的 primitive 加入 stage.selected 数组。由于已经启用了黑白效果，只有选中的物体会被恢复成彩色显示。未选中的物体仍然会呈现黑白效果。
javascript
stage.selected = [pickedObject.primitive];如果点击位置没有选中任何物体，则清空 selected 数组，从而所有物体重新恢复为黑白效果。
javascript
stage.selected = [];四、效果展示
通过上述代码实现的效果可以简单描述为：
- 默认状态：整个场景中的物体都呈现为黑白效果，除非明确选择某个物体。
- 点击选择物体：当用户点击某个物体时，该物体会从黑白效果中恢复，显示为彩色高亮，突出显示用户的选择。
这种效果非常适用于交互式地理信息系统（GIS），例如选择某一建筑、地标或者地图上的特定区域时，通过高亮显示用户选择的目标，增强用户的体验感。
五、应用场景
- 地图标记与高亮： 在某些情况下，我们需要对场景中的多个目标进行批量展示，但在用户点击或选择时突出显示特定的目标。例如，在城市模型中，用户可以点击某一建筑物，显示其详细信息并高亮该建筑。
- 虚拟导览与互动： 在虚拟导览中，用户可能需要通过点击方式选择感兴趣的物体（例如旅游景点、历史遗址等）。黑白效果的实现能够帮助用户集中注意力于当前选择的物体，从而提升交互的直观性。
- 3D 数据分析与可视化： 在一些分析场景中，用户可能需要区分特定的区域或物体。通过高亮显示特定的对象，并且在其他区域应用黑白效果，可以更清晰地展示数据背后的重点。
六、总结
通过 Cesium 的后期处理阶段，我们能够轻松实现灰白效果和彩色高亮显示的组合，增强地图和三维场景的交互性。这种交互方式在很多领域都有实际应用，尤其是在涉及到场景中物体选择和突出显示的情况下，能有效提升用户体验。
希望本文能够帮助你理解和实现 Cesium 中的黑白与彩色高亮效果，让你在开发过程中更好地利用 Cesium 的强大功能！
