共计 931 个字符,预计需要花费 3 分钟才能阅读完成。
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);
注意事项:依据不同的鼠标事件,函数的返回值也不同,须要依据具体情况进行取舍。