Cesium：动态控制路径显示与隐藏

"在Cesium中，我们经常需要在3D场景中绘制多条路径，以便展示不同对象的运动轨迹或者导航线路。本示例主要介绍如何实现通过鼠标单击来单独显示选定的路径，并隐藏其他未被选中的路径。这涉及到Cesium的Entities、Polyline和交互事件处理。" 在Cesium中，`Entities`是场景中的基本元素，可以代表各种几何形状，如点、线、面等。在这个例子中，我们创建了四个不同的`Entities`，每一条代表一种不同风格的路径： 1. `RedLine`：这是一个沿着地形贴地的红色线条，使用`clampToGround: true`属性确保线条始终贴合地形。它由`Cartesian3.fromDegreesArray`方法生成的坐标定义。 2. `GreenRhumbLine`：绿色的等角航线，使用`arcType: Cesium.ArcType.RHUMB`设置为等角航线（罗盘航线），这意味着它将保持固定的角度而不是最短距离。 3. `GlowingLine`：具有发光效果的蓝色线条，使用`PolylineGlowMaterialProperty`材质来实现发光效果，可以通过调整`glowPower`和`taperPower`参数控制发光强度和衰减。 4. `OrangeOutlined`：橙色带有黑色边框的线条，位于特定高度并跟随地形，使用`Cartesian3.fromDegreesArrayHeights`生成高度变化的坐标，并设置`polyline`的`width`和`material`属性。 为了实现单击显示和隐藏功能，我们需要监听鼠标点击事件，然后遍历所有路径实体，根据选中的ID改变其可见性。这通常通过Cesium的`viewer.screenSpaceEventHandler`和`entity.show`属性来完成。当用户点击某一路径时，我们可以获取到点击的实体，然后将其`show`属性设置为`true`，同时将其他所有实体的`show`属性设置为`false`。 以下是一个简化版的实现思路： ```javascript viewer.screenSpaceEventHandler.setInputAction(function (event) { var pickedEntity = viewer.scene.pick(event.position); if (pickedEntity && pickedEntity.id) { // 显示选中的路径 pickedEntity.show = true; // 隐藏其他路径 entities.forEach(function (entity) { if (entity !== pickedEntity) { entity.show = false; } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); ``` 这个代码片段会在左键点击屏幕时执行，检查是否选中了一个实体。如果选中了，那么就会显示该实体，隐藏其他所有实体。请注意，实际应用中可能需要根据实际情况进行优化，例如添加适当的边界条件检查和错误处理。 总结起来，本示例展示了Cesium中如何创建和管理多条路径，以及如何通过交互事件实现路径的显示和隐藏。这种技术可以广泛应用于地理信息系统、飞行模拟、导航系统等场景，让用户能够更加方便地查看和操作场景中的特定路径。