乐趣区

关于cesium: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);

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

退出移动版