Cesium鼠标事件

Posted reround

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cesium鼠标事件相关的知识,希望对你有一定的参考价值。

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)

以上是关于Cesium鼠标事件的主要内容,如果未能解决你的问题,请参考以下文章

Cesium实战项目1.点线面实体绘制

Cesium 事件

Cesium 粒子

cesium 相机camera

Cesium — Entity 拖拽、属性修改

Cesium开发入门篇 05Cesium API结构介绍