Cesium中的鼠标事件

发布时间 2023-04-18 11:14:15作者: 中亿丰数字科技

10-Cesium中的鼠标事件

在Cesium中,有部分情况需要和场景进行交互,这就离不开鼠标的操作。Cesium为实现这一功能,分成了两个过程。首先,传递viewer.canvas参数实例化ScreenSpaceEventHandler类,例如实例化后的名称为handler;然后,为 handler 注册鼠标事件的监听;最后,在监听事件的回调方法中获取 event,并将其作为参数执行scene.pick 方法获取对应的选中对象。因此简单介绍一下Cesium提供的鼠标监听接口。

(1)ScreenSpaceEventHandler

图形操作事件监听。构造函数为new Cesium.ScreenSpaceEventHandler(element)ScreenSpaceEventHandler可以监听Cesium的父容器canvas的事件。对 ScreenSpaceEventHandler 类进行实例化:

const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

(2)ScreenSpaceEventType

对监听事件属性进行设置

鼠标的事件接口类型。在其官方文档里共有十五种类型,此处介绍三种常用的事件。

鼠标左键点击事件 Cesium.ScreenSpaceEventType.LEFT_CLICK

鼠标移动事件 Cesium.ScreenSpaceEventType.MOUSE_MOVE

鼠标滚轮事件 Cesium.ScreenSpaceEventType.WHEEL

(3)setInputAction

设置要在输入事件上执行的函数。是交互事件的主体。

以鼠标左键点击事件为例

let handlerPoint = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
handlerPoint.setInputAction(function(event) {
        console.log(event)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

注意事项:根据不同的鼠标事件,函数的返回值也不同,需要根据具体情况进行取舍。