Cesium中的鼠标事件

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

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net