点击事件

    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;
            //设置地图环境光,调整地图颜色等操作
            //... 
        }
    })
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐