Cesium.ScreenSpaceEventHandler是 CesiumJS 中用于处理屏幕空间事件（如鼠标点击、移动、滚轮等）的工具

Cesium.ScreenSpaceEventHandler 是 CesiumJS 中用于处理屏幕空间事件（如鼠标点击、移动、滚轮等）的工具。这个类可以帮助你响应用户在视图画布上的操作，从而在 3D 场景中执行相关的逻辑。

主要功能和用法

1.创建事件处理器:

javascript 复制代码

let handler = new Cesium.ScreenSpaceEventHandler(canvas);

你需要将 Cesium.ScreenSpaceEventHandler 与一个 HTMLCanvasElement 关联，这通常是 Cesium 的渲染画布。

2.设置事件处理函数:

javascript 复制代码

handler.setInputAction(callbackFunction, Cesium.ScreenSpaceEventType.EVENT_TYPE);

callbackFunction 是你定义的处理事件的函数。
Cesium.ScreenSpaceEventType.EVENT_TYPE 是事件类型，例如 LEFT_CLICK、MOUSE_MOVE、WHEEL 等。

3**.事件类型**

Cesium.ScreenSpaceEventType.LEFT_CLICK：鼠标左键点击事件。
Cesium.ScreenSpaceEventType.RIGHT_CLICK：鼠标右键点击事件。
Cesium.ScreenSpaceEventType.MOUSE_MOVE：鼠标移动事件。
Cesium.ScreenSpaceEventType.WHEEL：鼠标滚轮事件。

4.销毁事件处理器:

javascript 复制代码

handler.destroy();

示例代码

以下是如何使用 ScreenSpaceEventHandler 来处理不同类型的事件的一个示例：

1。鼠标滚动获取离地高度

javascript 复制代码

  getHeight(fun) {
    let height = 0;
    let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    handler.setInputAction((wheelment) => {
      height = this.viewer.camera.positionCartographic.height;
      fun(height);
    }, Cesium.ScreenSpaceEventType.WHEEL);
    return height;
  },

2.鼠标点击获取地图上的实体。

javascript 复制代码

  /**
   * 点击获取地图上的实体
   * @param {*} fun 回调函数 参数为选中的实体
   */
  getClickModel(fun, nofun) {
    var thi = this; // 在合适的作用域内保存 this
    var handler = new Cesium.ScreenSpaceEventHandler(thi.viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      var pick = thi.viewer.scene.pick(movement.position);
      if (Cesium.defined(pick)) {
        console.log("选中pick", pick.id);
        fun(pick);
      } else {
        nofun();
        // console.log("没选中pick", pick);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 鼠标抒发点击事件
  },

点击获取经纬度

javascript 复制代码

 addClickHandlerForGetXY() {
    let viewer = this.ffCesium.viewer;
    var riverHandle = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
    // 对鼠标按下事件的监听
    riverHandle.setInputAction(function (event) {
      //获取加载地形后对应的经纬度和高程：地标坐标
      var ray = viewer.camera.getPickRay(event.position);
      var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
      if (Cesium.defined(cartesian)) {
        // 转换为经纬度
        const cartographic =
          viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
        const longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        const latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
        const height = viewer.scene.globe.getHeight(cartographic);
        // 输出点击的经纬度和高度
        console.log("采集坐标：" + longitudeString + "," + latitudeString);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }

javascript 复制代码

  getClickPoint(fun) {
    var thi = this; // 在合适的作用域内保存 this
    var handler = new Cesium.ScreenSpaceEventHandler(thi.viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      var position = thi.viewer.scene.camera.pickEllipsoid(
        movement.position,
        thi.viewer.scene.globe.ellipsoid
      );
      let latLngHeight = thi.cartesian3ToLngLat(position);
      fun(latLngHeight);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 鼠标抒发点击事件
  },

世界坐标(三维坐标转换)转经纬度

javascript 复制代码

  cartesian3ToLngLat(cartesian3) {
    let ellipsoid = this.viewer.scene.globe.ellipsoid;
    let cartographic = ellipsoid.cartesianToCartographic(cartesian3);
    let lat = Cesium.Math.toDegrees(cartographic.latitude);
    let lng = Cesium.Math.toDegrees(cartographic.longitude);
    let height = cartographic.height;
    return { lat: lat, lng: lng, height: height };
  },