Cesium 实现选中效果

最新推荐文章于 2025-09-02 16:54:38 发布

原创最新推荐文章于 2025-09-02 16:54:38 发布 · 1.3w 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Cesium

javascript

博客围绕Cesium展开，提到基于鼠标事件选择可通过MOUSE_MOVE或LEFT_CLICK触发。因项目需求，要实现通过下拉列表选中效果并贴出代码。还分享了踩坑经历，如官方文档中PostProcessStageComposite的selected对象要求，以及获取Cesium3DTileFeature时遇到返回null的问题。

基于鼠标事件的选择,可以通过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);
		/*鼠标移动选择结束*/

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

        //加载瓦片
		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;
			}
		});

接下来是自己踩的坑：

看官方文档PostProcessStageComposite的selected对象只能是array for features，而Cesium3DTileFeature不能直接初始化,只能通过Cesium3DTileContent#getFeature 或 Scene#pick 、Scene#pickPosition等方法获取到。

根据其他类型的方法看到Cesium3DTileset#root方法可以得到Cesium3DTile对象，Cesium3DTile#content得到Cesium3DTileContent对象，Cesium3DTileContent#getFeature(batchId)可以获取到Cesium3DTileFeature，然而！！！

这里获取到的为null。

再去看Cesium3DTileFeature的方法，可以通过Cesium3DTileset#tileUnload或Cesium3DTileset#tileVisible对feature对象进行修改。

over

标签

#Cesium #选中tileset