Cesium 常用监听器

1 需求

一般为相机、鼠标、帧率监听,在满足一定的条件下做对应的操作。

2 常用

2.1 相机停止移动

//相机移动结束事件
let removeChanged = viewer.scene.camera.moveEnd.addEventListener(function(){
    //获取当前相机高度
    height = Math.ceil(earth.camera.positionCartographic.height);
})
removeChanged() // 移除监听事件

2.2 相机发生变化

viewer.scene.camera.percentageChanged = 0.05  //设置相机变化的识别精度,默认值为0.5
//设置相机变化的监听事件
let removeChanged = viewer.camera.changed.addEventListener(percentage => {
    console.log("camera moved " +  percentage + "%")
})
 
removeChanged() // 移除监听事件

2.3 帧(渲染)监听

地球的缩放、旋转等都可以利用该监听器监听

// 开启监听器
let postRender = viewer.scene.postRender.addEventListener(() => {
	// 动态获取高度
	let cameraPos = viewer.camera.position;
	let ellipsoid = viewer.scene.globe.ellipsoid;
	let height = ellipsoid.cartesianToCartographic(cameraPos).height;
});

// 关闭监听器
postRender();

3 其它

以下内容整理自:https://blog.csdn.net/u010358183/article/details/121610901

3.1 屏幕空间监听事件

Cesium.ScreenSpaceEventHandler
监听事件:需要传入canvas参数

// 绑定屏幕空间事件
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(event){
    console.log('shift + 左键单击', event.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);
// 移除屏幕空间事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

3.2 屏幕空间相机控制

Cesium.ScreenSpaceCameraController
实例化对象:viewer.scene.screenSpaceCameraController

有大量的属性可以修改,从而控制整个场景的状态

在这里插入图片描述


viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG,
    Cesium.CameraEventType.PINCH,
    {
        eventType: Cesium.CameraEventType.LEFT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
    },
    {
        eventType: Cesium.CameraEventType.RIGHT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
    },
];
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG,
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
];

3.3 场景变化触发的监听事件

常用的场景触发事件有:
Camera.changed:相机发生变化时触发
Camera.moveEnd:相机停止移动时触发
Camera.moveStart:相机开始移动时触发
Scene.preUpdate:场景更新之前触发
Scene.postUpdate:场景更新之后立即触发
Scene.preRender:场景更新之后渲染之前触发
Scene.postRender:场景渲染之后触发
Scene.terrainProviderChanged:地形提供器发生变化时触发
Viewer.trackedEntityChanged:entity的属性发生变化时触发
Cesium3DTileset.allTilesLoaded:所有3dtiles数据加载完成以后触发
Cesium3DTileset.loadProgress:3dtiles初始化加载过程中触发
Cesium3DTileset.tileFailed:3dtiles瓦片加载失败时触发
Globe.imageryLayersUpdatedEvent:地球加载图层更新时触发

// 需要回调的函数 
function callbackFunc(event){
    cosnole.log(event)
}
// 渲染之前执行
viewer.scene.preRender.addEventListender(callbackFunc);
viewer.scene.preRender.removeEventListender(callbackFunc);

// 更新之前执行
viewer.scene.preUpdate.addEventListender(callbackFunc);
viewer.scene.preUpdate.removeEventListender(callbackFunc);

// 实时渲染执行
viewer.scene.postRender.addEventListender(callbackFunc);
viewer.scene.postRender.removeEventListender(callbackFunc);

// 实时更新执行
viewer.scene.postUpdate.addEventListender(callbackFunc);
viewer.scene.postUpdate.removeEventListender(callbackFunc);

  • 6
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Cesium键盘控制器,您需要监听键盘事件并根据按下的键更新相机的位置和朝向。以下是一个示例代码,它演示了如何使用键盘控制相机的移动和旋转。 ``` var scene = viewer.scene; var canvas = viewer.canvas; var camera = scene.camera; // 定义键盘控制器参数 var controller = { speed: 100.0, // 移动速度 rotateSpeed: 2.0, // 旋转速度 keys: { W: 87, // 向前移动 S: 83, // 向后移动 A: 65, // 向左移动 D: 68, // 向右移动 Q: 81, // 向上移动 E: 69, // 向下移动 LEFT: 37, // 左旋转 UP: 38, // 上旋转 RIGHT: 39, // 右旋转 DOWN: 40 // 下旋转 } }; // 监听键盘事件 var handler = new Cesium.ScreenSpaceEventHandler(canvas); handler.setInputAction(function (event) { var key = event.keyCode; if (key === controller.keys.W) { camera.moveForward(controller.speed); } else if (key === controller.keys.S) { camera.moveBackward(controller.speed); } else if (key === controller.keys.A) { camera.moveLeft(controller.speed); } else if (key === controller.keys.D) { camera.moveRight(controller.speed); } else if (key === controller.keys.Q) { camera.moveUp(controller.speed); } else if (key === controller.keys.E) { camera.moveDown(controller.speed); } else if (key === controller.keys.LEFT) { camera.rotateLeft(Cesium.Math.toRadians(controller.rotateSpeed)); } else if (key === controller.keys.UP) { camera.rotateUp(Cesium.Math.toRadians(controller.rotateSpeed)); } else if (key === controller.keys.RIGHT) { camera.rotateRight(Cesium.Math.toRadians(controller.rotateSpeed)); } else if (key === controller.keys.DOWN) { camera.rotateDown(Cesium.Math.toRadians(controller.rotateSpeed)); } }, Cesium.ScreenSpaceEventType.KEY_DOWN); ``` 在上面的示例代码中,我们定义了一个名为`controller`的对象,其中包含了键盘控制器的参数,例如移动速度、旋转速度和键位映射表。然后,我们使用`ScreenSpaceEventHandler`类监听Canvas上的键盘事件,并根据按下的键来更新相机的位置和朝向。例如,当按下`W`键时,我们调用`camera.moveForward()`方法向前移动相机。 当然,这只是一个简单的示例。您可以根据自己的需要定制键盘控制器的逻辑,例如添加缩放、倾斜等功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值