Cesium鼠标事件

Posted 2021-03-20 reround

computed: {
  handler() {
    return new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
  }
}

在事件的外面先定义一下 const _this = this (因为在setInputAction方法中，this的指向会发生变化，不再指向vue实例) 用this.Cesium是因为在mainjs里配置了Cesium的全局变量

// 1.移动事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    // 获取到的是鼠标经过cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.MOUSE_MOVE)

// 2.左键单击事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    // 获取到的是鼠标点击cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.LEFT_CLICK)

// 3.左键按下事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    // 获取到的是鼠标按下cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.LEFT_DOWN)

// 4.左键抬起事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    // 获取到的是鼠标抬起cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.LEFT_UP)

// 5.滑轮事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    // 向上滑是100  向下滑是-100
}, _this.Cesium.ScreenSpaceEventType.WHEEL)

// 6.滑轮点击事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是滑轮点击cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.MIDDLE_CLICK)

// 7.滑轮按下事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是滑轮按下cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.MIDDLE_DOWN)

// 8.滑轮抬起事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是滑轮抬起cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.MIDDLE_UP)

// 9.右键单击事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是右键点击cesium的屏幕坐标
    //一般在右键的时候结束 同时也清除定义的事件

      _this.handler.removeInputAction(_this.Cesium.ScreenSpaceEventType.方法名)

      如：

      _this.handler.removeInputAction(_this.Cesium.ScreenSpaceEventType.LEFT_CLICK)  //移除左键单击事件

      _this.handler.removeInputAction(_this.Cesium.ScreenSpaceEventType.MOUSE_MOVE)  //移除鼠标移动事件

    
}, _this.Cesium.ScreenSpaceEventType.RIGHT_CLICK)

// 10.右键按下事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是右键按下cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.RIGHT_DOWN)

// 11.右键抬起事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是右键抬起cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.RIGHT_UP)

// 12.左键双击事件

_this.handler.setInputAction(function (movement) {
    console.log(movement)
    //获取到的是左键双击cesium的屏幕坐标
}, _this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)