Cesium常用事件,包括点击事件,鼠标事件,相机移动事件

该博客详细介绍了如何在Cesium中处理鼠标点击和移动事件,包括左键点击选择entity、primitive、3DTile,右键点击获取经纬度和视角信息,以及鼠标移动时的实体高亮显示。同时,还展示了相机移动时根据高度变化调整地图环境光的策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

点击事件

    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    
    // 左键点击事件
	let leftclick = Cesium.ScreenSpaceEventType.LEFT_CLICK;
    viewer.screenSpaceEventHandler.removeInputAction(leftclick);
    handler.setInputAction((e) => {
		let pickObj = viewer.scene.pick(e.position);
        if (Cesium.defined(pickObj)) {
	        if(pickObj.id && pickObj.id instanceof Cesium.Entity){//点击entity
	        	 //properties: 实体自定义属性
	        	 /*properties: new Cesium.PropertyBag({
                    type: "point",
                    details: {}
                })*/
	        	 if(pickObj.id.properties._type._value === 'point'){//当前实体的类型  
	            	//当前实体的属性信息
	                let trafficObj = pickObj.id.properties._details._value; 
	                //参数传递,实体相关操作  
	            }
	        }
	        if (pickObj.primitive instanceof Cesium.Primitive) {//点击primitive
				//primitive相关操作
            }
            if (pickObj.primitive instanceof Cesium.Model) {//点击gltf/glb模型
				//模型gltf/glb相关操作
            }
            if (pickObj instanceof Cesium.Cesium3DTileFeature) {//点击3DTile
            	//3dTiles的子模型属性
				let propertyNames = pickObj.getPropertyNames();
                propertyNames.forEach(item=>{
                    console.log(item); //属性名
                    console.log(pickObj.getProperty(item));//属性值
                })
            }
          	if (pickObj.getProperty && pickObj.getProperty("name")) {//点击3DTile
          		//pickObj.getProperty("name"): 子模型名称
               //模型相关操作
            }
 
            if (e && e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true
            }
            return
        } 
    }, leftclick)
    
	//右键点击事件
    let rightclick = Cesium.ScreenSpaceEventType.RIGHT_CLICK;
    handler.removeInputAction(rightclick);
    handler.setInputAction((e) => {
        // 从笛卡尔坐标获取经纬度
        let position = viewer.scene.pickPosition(e.position);
        let cartographicNew = Cesium.Cartographic.fromCartesian(position);
        let longitude = Cesium.Math.toDegrees(cartographicNew.longitude);
        let latitude = Cesium.Math.toDegrees(cartographicNew.latitude);
        let height = cartographicNew.height;
        console.log(longitude, latitude, height);

        // 获取视角
        let po = viewer.camera.positionWC;
        let heading = viewer.camera.heading;
        let roll = viewer.camera.roll;
        let pitch = viewer.camera.pitch;
        let data = JSON.stringify({
            destination: po,
            orientation: {pitch: pitch, heading: heading, roll: roll},
        });
        console.log(data);
    }, rightclick)

鼠标事件

	let mouseMove = Cesium.ScreenSpaceEventType.MOUSE_MOVE;
    let viewer = getViewer();
    viewer.screenSpaceEventHandler.removeInputAction(mouseMove);
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handler.setInputAction((e) => {
        let fea = viewer.scene.pick(e.endPosition);
        if (fea) {
            if (fea.id || fea.primitive) {// 鼠标移入实体或模型
                _self.$refs.map3d.style.cursor = "pointer";
            }
            if (fea.getProperty && fea.getProperty("name")) {// 鼠标移入子模型
                _self.$refs.map3d.style.cursor = "pointer";
                //模型高亮等操作...
            }
        } else {
            _self.$refs.map3d.style.cursor = "default";
        }
    }, mouseMove);

相机移动事件

	let viewer = getViewer();
    let flag = false;//防止重复调用
    viewer.scene.camera.changed.addEventListener(function () {
        //获取当前相机高度
        let height = Math.ceil(viewer.camera.positionCartographic.height);
        if (height > 100000) {
            if(flag){return}
            flag = true;
            //设置地图环境光,调整地图颜色等操作
            //... 
        } else {
            if(!flag){return}
            flag = false;
            //设置地图环境光,调整地图颜色等操作
            //... 
        }
    })
### Cesium 事件处理方法 #### 屏幕空间事件处理程序 屏幕空间事件处理程序通过 `Cesium.ScreenSpaceEventHandler` 实现,负责处理用户输入事件并允许添加自定义函数来响应这些事件。此类通常用于捕捉鼠标和键盘交互。 ```javascript // 创建一个新的屏幕空间事件处理器实例 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 注册一个点击事件的动作 handler.setInputAction(function(click) { console.log('Mouse clicked at position:', click.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); ``` 上述代码展示了如何创建一个屏幕空间事件处理器,并为其设置了一个左键点击事件的回调函数[^2]。 #### 屏幕空间相机控制器 虽然未直接提及具体实现细节,但屏幕空间相机控制器涉及控制摄像机移动的行为,比如平移、缩放等操作。这类行为通常是预设好的,不需要开发者手动编写太多额外逻辑即可完成基本功能配置。 #### 场景触发事件 对于特定条件下的场景互动,如对象碰撞检测或其他复杂交互,则属于场景触发事件范畴。这可能涉及到更复杂的业务逻辑以及与其他系统的集成工作。 #### 触摸结束事件示例 下面是一个关于触摸结束 (`PINCH_END`) 的例子: ```javascript function pinchEnd() { // 初始化事件监听区域(element) let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 定义当发生 PINCH_END 事件时要执行的操作 handler.setInputAction((event) => { console.log('Pinch gesture ended'); // 执行其他所需的任务... }, Cesium.ScreenSpaceEventType.PINCH_END); } ``` 这段脚本说明了怎样针对多点触控手势中的捏合动作结束这一时刻做出反应[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值