Cesium笔记(8):ScreenSpaceEventHandler与操作事件监听与信息提示
图形操作事件监听，依靠screenSpaceEventHandler的setInputAction(action, type, modifier)方法，时常监听的相机事件，相机移动后： camera moveEnd 、相机准备移动：camera readonlymoveStart、相机视角改变：camera changed
增加cesium交互事件，提高我们的geocache标记的可见性，当用户在标记上hovers时，我们可以改变它们的样式来突出显示。
为了实现这一点，我们将使用拾取pick，一种Cesium的特征，从3D场景中返回数据，在观看者画布上给出像素位置。
这里有以下几种不同的picking：
-
Scene.pick : 返回包含给定窗口位置的基元的对象。
-
Scene.drillPick : 返回包含给定窗口位置的所有原语的对象列表。
-
Globe.pick : 返回给定光线与地形的交点。
一下是一些picking操作的例子：
因为我们希望在hover触发我们的高亮效果，首先我们需要创建一个鼠标动作处理器。为此，我们将使用ScreenSpaceEventHandler在用户输入操作中触发指定函数的一组处理程序。ScreenSpaceEventHandler.setInputAction()监听用户行为类型ScreenSpaceEventType,并运行一个特定的函数，将用户操作传递为参数。这里，我们将传递一个以movement为输入的函数：
图形事件响应与ScreenSpaceEventHandler
图形操作事件监听，依靠screenSpaceEventHandler的setInputAction(action, type, modifier)方法
常用监听图形操作事件：
-
鼠标点击事件 Cesium.ScreenSpaceEventType.MOUSE_MOVE
-
鼠标移动事件 Cesium.ScreenSpaceEventType.MOUSE_MOVE
-
鼠标滚轮事件 Cesium.ScreenSpaceEventType.WHEEL
具体，可以参看：https://cesium.com/docs/cesiumjs-ref-doc/ScreenSpaceEventType.html
var tooltip = createTooltip(document.body) // 一个HTML展示窗口，样式内容，自定义
let screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
//鼠标移动事件
screenSpaceEventHandler.setInputAction((movement) => {
let pickedObject = scene.pick(movement.endPosition) // 拾取场景中的图元
if (pickedObject) {
viewer.enableCursorStyle = false
viewer.\_element.style.cursor = ''
tooltip.setVisible(true)
tooltip.showAt(movement.endPosition, pickedObject.id.name,pickedObject.id.description)
} else {
viewer.enableCursorStyle = true
tooltip.setVisible(false)
}
}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE)
相机操作与事件监听
时常监听的相机事件
-
相机移动后： camera.moveEnd
-
相机准备移动：camera.readonlymoveStart
-
相机视角改变：camera.changed
viewer.scene.camera.moveEnd.addEventListener(function(){
//获取当前相机高度
let height = Math.ceil(earth.camera.positionCartographic.height);
})
有了事件监控，才能与Cesium地区做交互
渲染事件(实时渲染，很关键的一个事件)
var renderEnd = viewer.scene.postRender.addEventListener(function(){
//TODO
});
参考文章：
Cesium入门11 – Interactivity–交互性 https://zhuanlan.zhihu.com/p/42790614
本文转自 https://www.zhoulujun.cn/html/GIS/cesium/8336.html，如有侵权，请联系删除。