Cesium事件详解(鼠标事件、相机事件、键盘事件、场景触发事件)

更新时间:2023-05-24 22:33:30 阅读: 评论:0

Cesium事件详解(⿏标事件、相机事件、键盘事件、场景触发事件)Cesium 事件详解(⿏标事件、相机事件、键盘事件、场景触发事件)
1 Cesium中的事件
根据使⽤情况,我把Cesium中的事件⼤体分为三种,即屏幕空间事件处理程序,屏幕空间相机控制器,场景触发事件。以下逐个解释,建议收藏。
1.1 屏幕空间事件处理程序(Screen Space Event Handler)
屏幕空间事件处理程序,对应API中的 Cesium.ScreenSpaceEventHandler 。官⽅解释是,处理⽤户输⼊事件,可以添加⾃定义函数,以便在⽤户输⼊时执⾏。可以理解为我们常说的⿏标事件(或键盘事件),是与⿏标和键盘输⼊相关的事件处理程序。
使⽤时,我们需要先对 ScreenSpaceEventHandler 类进⾏实例化,再注册事件或注销事件。
1.1.1 屏幕空间事件类型:(ScreenSpaceEventType)
名称描述
LEFT_DOWN Reprents a mou left button down event.表⽰⿏标左键按下事件。
LEFT_UP Reprents a mou left button up event.表⽰⿏标左键弹起事件。
LEFT_CLICK Reprents a mou left click event.表⽰⿏标左键点击事件。
LEFT_DOUBLE_CLICK Reprents a mou left double click event.表⽰⿏标左键双击事件。
RIGHT_DOWN Reprents a mou left button down event.表⽰⿏标右键按下事件。
RIGHT_UP Reprents a mou right button up event.表⽰⿏标右键弹起事件。
RIGHT_CLICK Reprents a mou right click event.表⽰⿏标右键单击事件。
MIDDLE_DOWN Reprents a mou middle button down event.表⽰⿏标中键按下事件。
MIDDLE_UP Reprents a mou middle button up event.表⽰⿏标中键弹起事件。
MIDDLE_CLICK Reprents a mou middle click event.表⽰⿏标中键点击事件。
MOUSE_MOVE Reprents a mou move event.表⽰⿏标移动事件。
WHEEL Reprents a mou wheel event.表⽰⿏标滚轮滚动事件。
PINCH_START Reprents the start of a two-finger event on a touch surface.表⽰触控屏上双指开始事件。
PINCH_END Reprents the end of a two-finger event on a touch surface.表⽰触控屏上双指结束事件。
PINCH_MOVE Reprents a change of a two-finger event on a touch surface.表⽰触控屏上双指移动事件。
1.1.2 键盘修饰符类型(KeyboardEventModifier)
属牛男和属龙女相配吗名称描述
SHIFT Reprents the shift key being held down.表⽰shift键被按住。
喜帖邀请函CTRL Reprents the control key being held down.表⽰ctrl键被按住。
ALT Reprents the alt key being held down.表⽰alt键被按住。
*键盘修饰符不可以单独使⽤,需要配合⿏标输⼊事件使⽤。
1.1.3 代码⽰例
// 绑定屏幕空间事件
let handler =new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.tInputAction(function(event){
console.log('shift + 左键单击', event.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);
// 移除屏幕空间事件
1.2 屏幕空间相机控制器(Screen Space Camera Controller)
根据在画布上的⿏标输⼊修改摄像机的位置和⽅向。可以理解为我们常说的相机事件,是与相机控制相关的事件处理程序。
Cesium在 Viewer 类的实例化过程中,也实例化了其他很多类,其中就包括 ScreenSpaceCameraController 类,并把实例化结果赋给了 viewer.scene.screenSpaceCameraController ,所以我们在使⽤时可以直接操作 viewer.scene.screenSpaceCameraController 。
另外,我们可以更改默认操作模式。
1.2.1 相机事件类型(CameraEventType)
名称描述
LEFT_DRAG A left mou button press followed by moving the mou and releasing the button.⿏标左键按住,然后移动⿏标并松开按
键。
RIGHT_DRAG A right mou button press followed by moving the mou and releasing the button.⿏标右键按住,然后移动⿏标并松开按
键。
MIDDLE_DRAG A middle mou button press followed by moving the mou and releasing the button.⿏标中键按住,然后移动⿏标并松开
按键。
WHEEL Scrolling the middle mou button.滚动⿏标中键滚轮。
PINCH    A two-finger touch on a touch surface.双指触控屏幕。
1.2.2 默认操作模式
操作3D视图  2.5D视图2D视图LEFT_DRAG绕地球旋转地图上平移地图上平移
RIGHT_DRAG地图缩放地图缩放地图缩放
MIDDLE_DRAG倾斜地球倾斜地图⽆WHEEL地图缩放地图缩放地图缩放
PINCH倾斜地球倾斜地图⽆CTRL + LEFT_DRAG倾斜地球倾斜地图⽆小米账号密码
CTRL + RIGHT_DRAG倾斜地球倾斜地图⽆1.2.3 修改默认操作模式
如果需要改变默认操作模式,可以在初始化地球之后,通过改变 ScreenSpaceCameraController 的⼏个属性来实现。
属性名属性描述
lookEventTypes3D视图、2.5D视图改变相机观察⽅向
rotateEventTypes3D视图相机绕地球旋转
tiltEventTypes3D视图、2.5D视图倾斜视⾓
translateEventTypes  2.5D视图、2D视图地图上平移农夫山泉广告语
zoomEventTypes地图缩放
属性名属性描述⽰例:
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.EventTypes =[
Cesium.CameraEventType.MIDDLE_DRAG,
Cesium.CameraEventType.WHEEL,
Cesium.CameraEventType.PINCH,
];
1.3 场景触发事件
场景中⼀些变化触发的监听事件,随着Cesium中⼀些对象实例化⽽产⽣的事件。
常⽤的场景触发事件有:
Camera.changed:相机发⽣变化时触发
Scene.preUpdate:场景更新之前触发
Scene.postUpdate:场景更新之后⽴即触发
Scene.preRender:场景更新之后渲染之前触发
Scene.postRender:场景渲染之后触发
Cesium3DTilet.allTilesLoaded:所有3dtiles数据加载完成以后触发
Cesium3DTilet.loadProgress:3dtiles初始化加载过程中触发
Cesium3DTilet.tileFailed:3dtiles⽡⽚加载失败时触发
Globe.imageryLayersUpdatedEvent:地球加载图层更新时触发
另外,我已经将官⽅API中⼏乎所有触发事件整理到下⾯,请⾃⾏查看。
⽰例:
人员信息登记表
// 需要回调的函数
function callbackFunc(event){
cosnole.log(event)
}
// 渲染之前执⾏
viewer.scene.preRender.addEventListender(callbackFunc);
viewer.veEventListender(callbackFunc);
// 更新之前执⾏
viewer.scene.preUpdate.addEventListender(callbackFunc);
viewer.veEventListender(callbackFunc);
// 实时渲染执⾏
viewer.scene.postRender.addEventListender(callbackFunc);
viewer.veEventListender(callbackFunc);
// 实时更新执⾏
viewer.scene.postUpdate.addEventListender(callbackFunc);
viewer.veEventListender(callbackFunc);
婚假是几天2 Cesium API 中的场景触发事件
2.1 属性:Camera-changed(只读)(常⽤)
【类型】
Event
【官⽅解释】
Gets the event that will be raid when the camera has changed by percentageChanged.
【中⽂翻译】
获取当相机(camera)被 percentageChanged 改变时触发的事件。简⾔之,就是当相机发⽣变化时触发的事件。
2.2 属性:Camera-moveStart(只读)(常⽤)
【类型】
Event
【官⽅解释】
Gets the event that will be raid at when the camera starts to move.
【中⽂翻译】
获取当相机(camera)开始移动时被触发的事件。
2.3 属性:Camera-moveEnd(只读)(常⽤)
任劳任怨的近义词
【类型】
Event
【官⽅解释】
Gets the event that will be raid when the camera has stopped moving.
【中⽂翻译】
获取当相机(camera)停⽌移动时被触发的事件。
2.4 属性:Cesium3DTilet-allTilesLoaded(常⽤)
【类型】
Event
【官⽅解释】
The event fired to indicate that all tiles that meet the screen space error this frame are loaded. The tilet is completely loaded for this view.
This event is fired at the end of the frame after the scene is rendered.
【中⽂翻译】
此事件触发以指⽰此帧的所有满⾜屏幕空间误差的⽡⽚已加载完毕。此视图的⽡⽚集(tilet)已完全加载。
此事件在场景渲染后的帧末尾触发。
⽰例:
tilet.allTilesLoaded.addEventListener(function(){
console.log('All tiles are loaded');
});
2.5 属性:Cesium3DTilet-initialTilesLoaded(常⽤)
【类型】
Event
【官⽅解释】
The event fired to indicate that all tiles that meet the screen space error this frame are loaded. This event is fired once when all tiles in the initial view are loaded.
This event is fired at the end of the frame after the scene is rendered.
【中⽂翻译】
此事件触发以指⽰此帧的所有满⾜屏幕空间误差的⽡⽚已加载完毕。⼀旦初始视图加载完成,此事件就被触发。
此事件在场景渲染后的帧末尾触发。
⽰例:
tilet.initialTilesLoaded.addEventListener(function(){
console.log('Initial tiles are loaded');
});
2.6 属性:Cesium3DTilet-loadProgress(常⽤)
【类型】
Event
【官⽅解释】
The event fired to indicate progress of loading new tiles. This event is fired when a new tile is requested, when a requested tile is finished downloading, and when a downloaded tile has been procesd and is ready to render.
The number of pending tile requests, numberOfPendingRequests, and number of tiles processing, numberOfTilesProcessing are pasd to the event listener.
This event is fired at the end of the frame after the scene is rendered.
【中⽂翻译】
此事件触发以指⽰加载新⽡⽚(tiles)的进度。此事件在请求新⽡⽚时,请求的⽡⽚结束下载时,下载好的⽡⽚处理完成时和⽡⽚准备好要渲染时触发。
挂起的⽡⽚请求数量(numberOfPendingRequests)和处理中的⽡⽚数量(numberOfTilesProcessing)被传递给事件监听器。
此事件在场景渲染后的帧末尾触发。
⽰例:
tilet.loadProgress.addEventListener(function(numberOfPendingRequests, numberOfTilesProcessing){
if((numberOfPendingRequests ===0)&&(numberOfTilesProcessing ===0)){
绿色低碳生活
console.log('Stopped loading');
return;
}
console.log('Loading: requests: '+ numberOfPendingRequests +', processing: '+ numberOfTilesProcessing);
});
2.7 属性:Cesium3DTilet-tileFailed(常⽤)

本文发布于:2023-05-24 22:33:30,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/763508.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:事件   触发   地图   屏幕   场景   空间
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图