一:事件处理基本概念
Cesium将事件大致分成了三大类:
01、屏幕空间事件处理程序(Screen Space Event Handler);
02、屏幕空间相机控制器(Screen Space Camera Controller);
03、场景渲染事件
二:屏幕空间事件处理程序之鼠标事件
1:基本概念
屏幕空间事件处理程序:处理用户输入事件,可以添加自定义函数,以便用户在输入时执行;也可以将其理解为我们常说的鼠标事件(或键盘事件)。
2:鼠标左键事件
(1):左键按下事件
/* 鼠标左键按下事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.LEFT_DOWN)
/* 删除鼠标左键按下事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
}, 2000)
(2):左键弹起事件
/* 鼠标左键按下事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.LEFT_UP)
/* 删除鼠标左键按下事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
}, 2000)
(3):左键单击事件
/* 鼠标左键单击事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
/* 删除鼠标左键单击事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}, 2000)
(4):左键双击事件
/* 鼠标左键双击事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
/* 删除鼠标左键双击事件 2s后删除事件 */
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}, 2000)
3:鼠标右键事件
(1):右键按下事件
/* 鼠标右键按下事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.RIGHT_DOWN)
/* 删除鼠标右键按下事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_DOWN)
}, 2000)
(2):右键弹起事件
/* 鼠标右键弹起事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.RIGHT_UP)
/* 删除 鼠标右键弹起事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
}, 2000)
</script>
(3):右键单击事件
/* 鼠标右键单击事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
/* 删除 鼠标右键单击事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}, 2000)
4:鼠标移动事件
/* 09.鼠标移动事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--09.鼠标移动事件');
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
/* 删除 09.鼠标移动事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}, 2000)
5:鼠标滚轮事件
(1):鼠标滚轮按下事件
/* 10.鼠标按下滚轮事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
/* 删除 10.鼠标按下滚轮事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
}, 2000)
(2):鼠标滚轮弹起事件
/* 鼠标滚轮按下弹起事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.MIDDLE_UP)
/* 删除 鼠标滚轮按下弹起事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
}, 2000)
(3):鼠标滚轮单击事件
/* 鼠标滚轮单击事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK)
/* 删除 鼠标滚轮单击事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_CLICK)
}, 2000)
(4):鼠标滚轮滚动事件
/* 鼠标滚轮滚动事件 */
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
console.log(event, '--event');
}, Cesium.ScreenSpaceEventType.WHEEL)
/* 删除 鼠标滚轮滚动事件 2s后删除事件*/
setTimeout(() => {
handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
}, 2000)