• home > GIS > cesium >

    Cesium笔记(8):ScreenSpaceEventHandler与操作事件监听与信息提示

    Author:zhoulujun Date:

    图形操作事件监听,依靠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



    转载本站文章《Cesium笔记(8):ScreenSpaceEventHandler与操作事件监听与信息提示》,
    请注明出处:https://www.zhoulujun.cn/html/GIS/cesium/8336.html