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

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

主要功能和用法

1.创建事件处理器:

let handler = new Cesium.ScreenSpaceEventHandler(canvas);

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

2.设置事件处理函数:

handler.setInputAction(callbackFunction, Cesium.ScreenSpaceEventType.EVENT_TYPE);
  • callbackFunction 是你定义的处理事件的函数。
  • Cesium.ScreenSpaceEventType.EVENT_TYPE 是事件类型,例如 LEFT_CLICKMOUSE_MOVEWHEEL 等。

 3.事件类型

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

 4.销毁事件处理器:

handler.destroy();

示例代码

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

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

  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.鼠标点击获取地图上的实体。

  /**
   * 点击获取地图上的实体
   * @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);
    // 鼠标抒发点击事件
  },

点击获取经纬度

 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);
  }
  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);
    // 鼠标抒发点击事件
  },

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


  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 };
  },

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值