Cesium学习——Cesium实现选中效果

Cesium三维地球：基于鼠标事件和下拉列表的实体选择实现

最新推荐文章于 2025-10-21 23:19:37 发布

转载最新推荐文章于 2025-10-21 23:19:37 发布 · 3.8k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/u014646677/article/details/90673113?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-2-90673113.nonecase&utm_term=cesium%20%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E7%89%A9%E4%BD%93

文章标签：

#javascript

Cesium 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何在Cesium三维地球中实现两种选择实体的方法：一种是通过鼠标事件（MOUSE_MOVE和LEFT_CLICK），另一种是通过下拉列表。代码示例展示了如何监听鼠标移动和点击事件来切换蓝色和绿色轮廓显示，以及如何在瓦片加载时通过下拉列表选择特定特征。

本文转载自：https://blog.youkuaiyun.com/u014646677/article/details/90673113?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-2-90673113.nonecase&utm_term=cesium%20%E8%87%AA%E5%8A%A8%E9%80%89%E4%B8%AD%E7%89%A9%E4%BD%93

1 基于鼠标事件的选择,可以通过MOUSE_MOVE或LEFT_CLICK事件触发

2 由于项目要求，需要实现通过下拉列表实现选中效果，先贴代码

1 基于鼠标事件的选择,可以通过MOUSE_MOVE或LEFT_CLICK事件触发

/*鼠标移动选择开始*/
var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
silhouetteBlue.uniforms.length = 0.01;
silhouetteBlue.selected = [];

var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
silhouetteGreen.uniforms.color = Cesium.Color.LIME;
silhouetteGreen.uniforms.length = 0.01;
silhouetteGreen.selected = [];
viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));

// 设置要在输入事件上执行的功能
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {

    // 将鼠标的点击坐标转换为场景中的坐标
    var pickedFeature = viewer.scene.pick(movement.endPosition);
    if (Cesium.defined(pickedFeature)) {
        if (pickedFeature == silhouetteGreen.selected[0]) {
            silhouetteBlue.selected = [];
        } else {
            silhouetteBlue.selected = [pickedFeature];
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 绑定鼠标移动事件

// 绑定鼠标监听
viewer.screenSpaceEventHandler.setInputAction(function leftClick(movement) {

    // 将鼠标的点击坐标转换为场景中的坐标
    var pickedFeature = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedFeature)) {
        silhouetteGreen.selected = [pickedFeature];
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 绑定左键点击事件

2 由于项目要求，需要实现通过下拉列表实现选中效果，先贴代码

//加载瓦片
var tileset0 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'map/dx/tileset.json',
    skipLevelOfDetail: true, //开启跳级加载
    maximumMemoryUsage: 2000, //最大内存占用
    dynamicScreenSpaceError: true
}));

//给当前瓦片添加事件监听器
tileset0.tileVisible.addEventListener(function(tile) {
    while (flag) {
        silhouetteGreen.selected = [tile.content.getFeature(0)];
        flagS = false;
    }
});