Cesium鼠标事件

一、左键

1、左键单击

// 左键单击
function leftClick() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.LEFT_CLICK);
},

2、左键双击

// 左键双击
function leftDouBleClick() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
},

3、左键按下

// 左键按下
function leftDown() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.LEFT_DOWN);
},

4、左键抬起

// 左键弹起
function leftUp() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.LEFT_UP);
},

二、中键

1、中键单击

// 中键单击
function middleClick() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
},

2、中键按下

// 中键按下
function middletDown() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
},

3、中键抬起

// 中键抬起
function middletUp() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.MIDDLE_UP);
},

三、右键

1、右键单击

// 右键单击
function rightClick() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},

2、右键按下

// 右键按下
function rightDown() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.RIGHT_DOWN);
},

3、右键抬起

// 右键抬起
function rightUp() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.RIGHT_UP);
},

四、鼠标

1、鼠标移动

// 鼠标移动
function mouseMove() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},

五、滚轮

1、滚动事件

// 鼠标滚轮
function mouseWheel() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.WHEEL);
},

六、触摸

1、触摸开始

// 触摸开始
function pinchStart() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.PINCH_START);
},

2、触摸移动

// 触摸移动
function pinchMove() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.PINCH_MOVE);
},

3、触摸结束

// 触摸结束
function pinchEnd() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
     // 操作......
  },
  Cesium.ScreenSpaceEventType.PINCH_END);
},

七、示例

1、鼠标双击获取坐标

（1）方法一

// 方法一
getClickCoordinate() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
    // 获取点的世界坐标
    const start_point = viewer.scene.camera.pickEllipsoid(
      event.position,
      viewer.scene.globe.ellipsoid
    );

    // 笛卡尔坐标转弧度
    let cartographic = Cesium.Cartographic.fromCartesian(
      start_point,
      viewer.scene.globe.ellipsoid,
      new Cesium.Cartographic()
    );

    // Cesium.Math.toDegrees，将弧度转换成经纬度
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude);  // 纬度

  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
},

（2）方法二

// 方法二
getClickCoordinate() {
  // 添加用户输入监听范围（element）
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  // 处理用户输入事件
  handler.setInputAction((event) => {
    let ray = viewer.camera.getPickRay(event.position);
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);

    // 获取经度
    let lng = Cesium.Math.toDegrees(cartographic.longitude);
    // 获取纬度
    let lat = Cesium.Math.toDegrees(cartographic.latitude);
    // 获取高度
    let alt = cartographic.height;
  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
},