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);