鼠标事件

名字	描述
LEFT_DOWN	表示鼠标左键按下事件
LEFT_UP	表示鼠标左键弹起事件
LEFT_CLICK	表示鼠标左键单击事件
LEFT_DOUBLE_CLICK	表示鼠标左键双击事件
RIGHT_DOWN	表示鼠标右键按下事件
RIGHT_UP	表示鼠标右键弹起事件
RIGHT_CLICK	表示鼠标右键单击事件
MIDDLE_DOWN	表示鼠标滚轮按下事件
MIDDLE_UP	表示鼠标滚轮弹起事件
MIDDLE_CLICK	表示鼠标滚轮单击事件
MOUSE_MOVE	表示鼠标移动事件
WHEEL	表示鼠标滚动滚轮事件
PINCH_START	表示触控屏上双指事件的开始事件
PINCH_END	表示触控屏上双指事件的结束事件
PINCH_MOVE	表示触控屏上双指事件的移动事件

在使用鼠标事件之前，需要先使用Cesium.ScreenSpaceEventHandler类进行实例化
如果需要删除鼠标事件，需要使用removeInputAction删除注册的鼠标事件

//添加鼠标事件
//1.实例化
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
//2.注册并使用
handler.setInputAction((e) => {
    //3.添加鼠标处理事件：
    const pickObj = viewer.scene.pick(e.position)
    if (Cesium.defined(pickObj)) {
      if (pickObj.id && pickObj.id instanceof Cesium.Entity) {
        //当前实体的属性
        console.log(pickObj.id)
        //禁止默认点击事件
        if (e && e.stopPropagation) {
          e.stopPropagation()
        } else {
          e.cancelBubble = true
        }
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK) //此处注册为鼠标左键单击事件，其他鼠标事件同此

 //移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)

键盘事件

名称	描述
SHIFT	表示 Shift 键被按住
CTRL	表示 Ctrl 键被按住
ALT	表示 Alt 键被按住

键盘事件需要与鼠标事件一起使用，因此键盘事件需要与鼠标事件一起注册。使用方法与鼠标事件一样，移除也是与鼠标事件一起移除。

//1.实例化
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 //2.注册并使用
handler.setInputAction(function (event) { 
 console.log('SHIFT+鼠标左键单击：', event.position); 
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.SHIFT); 
//3.删除键盘事件 SHIFT 
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

相机事件

相机事件类型

名称	描述
LEFT_DRAG	按住鼠标左键，然后移动鼠标并松开按键
RIGHT_DRAG	按住鼠标右键，然后移动鼠标并松开按键
MIDDLE_DRAG	按住鼠标滚轮，然后移动鼠标并松开滚轮
WHEEL	滚动鼠标滚轮

默认操作模式

操作	3D 视图	2.5D 视图	2D 视图
LEFT_DRAG	绕地球旋转	地图上平移	地图上平移
RIGHT_DRAG	地图缩放	地图缩放	地图缩放
MIDDLE_DRAG	倾斜地球	倾斜地球	无
WHEEL	地图缩放	地图缩放	地图缩放
CTRL + LEFT_DRAG	倾斜地球	倾斜地球	无
CTRL + RIGHT_DRAG	倾斜地球	倾斜地球	无

默认操作属性

属性名称	属性描述
lookEventTypes	3D 视图、2.5D 视图，改变相机观察方向
rotateEventTypes	3D 视图，相机绕地球旋转
tiltEventTypes	3D 视图、2.5D 视图，倾斜视角
translateEventTypes	2.5D 视图、2D 视图，地图上平移
zoomEventTypes	地图缩放

相机事件不需要实例化，在Viewer实例化时已经实例化，我们可以通过viewer.scene.screenSpaceCameraController直接操作
我们可以通过改变ScreenSpaceCameraController的属性修改相机的默认操作模式

//地图倾斜视角操作tiltEventTypes属性,鼠标滚轮修改为鼠标右键
  viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG,//默认为Cesium.CameraEventType.MIDDLE_DRAG
    Cesium.CameraEventType.PINCH,
    {
      eventType: Cesium.CameraEventType.LEFT_DRAG,
      modifier: Cesium.KeyboardEventModifier.CTRL,
    },
    {
      eventType: Cesium.CameraEventType.RIGHT_DRAG,
      modifier: Cesium.KeyboardEventModifier.CTRL,
    },
  ];
  //地图缩放操作zoomEventTypes属性，鼠标右键修改鼠标滚轮
  viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG,//默认为Cesium.CameraEventType.RIGHT_DRAG
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
  ];

渲染事件

场景渲染用于实时监听场景渲染，例如需要实时监听标签的位置或者实时动态更新实体坐标

场景渲染事件

事件名称	描述
Scene.preUpdate	场景更新前事件，即更新或呈现场景之前将引发的事件
Scene.postUpdate	场景更新后事件，即更新场景之后及渲染场景之前立即引发的事件
Scene.preRender	场景渲染前事件，即更新场景之后及渲染场景之前将引发的事件
Scene.postRender	场景渲染后事件，即渲染场景之后立即引发的事件

通过 addEventListener 方法注册事件发生时执行的回调函数，通过 removeEventListener 方法来移除回调函数
注意：移除时的回调需要与添加时一致，否则不能移除

//需要回调的函数 
function callbackFun(event) { 
 console.log("执行了回调函数"); 
} 
//注册更新之后执行的回调函数
viewer.scene.postUpdate.addEventListener(callbackFun); 
//注销之前注册的回调函数
viewer.scene.postUpdate.removeEventListener (callbackFun);

通过postRender更新弹窗的位置

export const addCesiumPostRender = (viewer: Cesium.Viewer, coordinates: [number, number, number]) => {
  viewer.scene.postRender.addEventListener(() => {
    updatePopupPosition(viewer, coordinates)
  })
}
/**
 * @description: 更新弹框位置
 */
const updatePopupPosition = (viewer: Cesium.Viewer, coordinates: [number, number, number]) => {
  if (!coordinates) return
  const container = document.getElementsById('popup-container')
  const windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    viewer.scene,
    Cesium.Cartesian3.fromDegrees(...(coordinates as [number, number, number])),
  )
  if (!windowCoord) return
  ;(container as HTMLElement).style.left = windowCoord.x + 'px'
  ;(container as HTMLElement).style.top = windowCoord.y - 25 + 'px'
}

参考

WebGIS 之 Cesium 三维软件开发 / 郭明强等编著
Cesium API

Cesium的事件处理

鼠标事件

键盘事件

相机事件

渲染事件

参考