02Cesium中常用的鼠标事件

文章目录

02Cesium中常用的鼠标事件
- 1、左键单击事件
- 2、左键双击事件
- 3、左键按下事件
- 4、左键弹起事件
- 5、中键按下事件
- 6、中键弹起事件
- 7、鼠标移动事件
- 8、右键单击事件
- 9、右键按下事件
- 10、右键弹起事件
- 11、鼠标滚轮事件
- 具体在代码中的应用如下所示

02Cesium中常用的鼠标事件

Cesium中常用的鼠标事件有左键单击事件、左键双击事件、左键按下事件、左键弹起事件、中键按下事件、中键弹起事件、鼠标移动事件、右键单击事件、右键按下事件、右键弹起事件、鼠标滚轮事件。注意：是没有鼠标右键双击事件的说法的。这里只是涉及到鼠标对应事件的API用法，记录一下常用的鼠标事件，至于具体在场景中的应用，如屏幕坐标与经纬度的转换，鼠标点击获取经纬度等，看后续文章。

1、左键单击事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键单击事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

2、左键双击事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键双击事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

3、左键按下事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键按下事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_DOWN);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);

4、左键弹起事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('左键弹起事件：',click.position);   
},Cesium.ScreenSpaceEventType.LEFT_UP);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);

5、中键按下事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
   console.log('中键按下事件：',click.position);   
},Cesium.ScreenSpaceEventType.MIDDLE_DOWN);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN);

6、中键弹起事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('中键弹起事件：',click.position);   
},Cesium.ScreenSpaceEventType.MIDDLE_UP);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP);

7、鼠标移动事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement){
  console.log('移动事件：',movement.endPosition);   
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

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

8、右键单击事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('右键单击事件',click.position);   
},Cesium.ScreenSpaceEventType.RIGHT_CLICK);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);

9、右键按下事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('右键按下事件',click.position);   
},Cesium.ScreenSpaceEventType.RIGHT_DOWN);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_DOWN);

10、右键弹起事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
  console.log('右键弹起事件',click.position);   
},Cesium.ScreenSpaceEventType.RIGHT_UP);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP);

11、鼠标滚轮事件

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(wheelment){
  console.log('滚轮事件：',wheelment);   
},Cesium.ScreenSpaceEventType.WHEEL);

// 移除鼠标事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL);

具体在代码中的应用如下所示

在对应vue中的代码如下所示，可以先看后面的截图，然后结合截图看代码相关的内容。对应的项目地址：https://gitee.com/the-world-keeps-blooming/my-vite-vue-cesium

<template>
    <div style="width: 100%; height: 100%; position: relative;">
        <div id="cesiumContainer"></div>
        <div class="cesium-viewer-toolbar">
            <el-row>
                <div style="font-size: 16px;">Cesium中常用的鼠标事件</div>
            </el-row>
            <el-row style="margin-top: 16px;">
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="左键单击事件：">
                        <el-button type="primary" @click="LEFT_CLICK">左键单击</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_CLICK">移除左键单击</el-button>
                    </el-form-item>
                    <el-form-item label="左键双击事件：">
                        <el-button type="primary" @click="LEFT_DOUBLE_CLICK">左键双击</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_DOUBLE_CLICK">移除左键双击</el-button>
                    </el-form-item>
                    <el-form-item label="左键按下事件：">
                        <el-button type="primary" @click="LEFT_DOWN">左键按下</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_DOWN">移除左键按下</el-button>
                    </el-form-item>
                    <el-form-item label="左键弹起事件：">
                        <el-button type="primary" @click="LEFT_UP">左键弹起</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_UP">移除左键弹起</el-button>
                    </el-form-item>
                    <el-form-item label="中键按下事件：">
                        <el-button type="primary" @click="MIDDLE_DOWN">中键按下</el-button>
                        <el-button type="primary" @click="REMOVE_MIDDLE_DOWN">移除中键按下</el-button>
                    </el-form-item>
                    <el-form-item label="中键弹起事件：">
                        <el-button type="primary" @click="MIDDLE_UP">中键弹起</el-button>
                        <el-button type="primary" @click="REMOVE_MIDDLE_UP">移除中键弹起</el-button>
                    </el-form-item>
                    <el-form-item label="鼠标移动事件：">
                        <el-button type="primary" @click="MOUSE_MOVE">鼠标移动</el-button>
                        <el-button type="primary" @click="REMOVE_MOUSE_MOVE">移除鼠标移动</el-button>
                    </el-form-item>
                    <el-form-item label="右键单击事件：">
                        <el-button type="primary" @click="RIGHT_CLICK">右键单击</el-button>
                        <el-button type="primary" @click="REMOVE_RIGHT_CLICK">移除右键单击</el-button>
                    </el-form-item>
                    <el-form-item label="右键弹起事件：">
                        <el-button type="primary" @click="RIGHT_UP">右键弹起</el-button>
                        <el-button type="primary" @click="REMOVE_RIGHT_UP">移除右键弹起</el-button>
                    </el-form-item>
                    <el-form-item label="滚轮事件：">
                        <el-button type="primary" @click="WHEEL">滚轮事件</el-button>
                        <el-button type="primary" @click="REMOVE_WHEEL">移除滚轮事件</el-button>
                    </el-form-item>
                    <el-form-item label="多个事件结合：">
                        <el-button type="primary" @click="MORE_EVENTS">多个事件</el-button>
                        <el-button type="primary" @click="REMOVE_MORE_EVENTS">移除多个事件</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <div style="font-size: 16px;">确保鼠标在地球上点击有效，这里以鼠标左键点击为例，其他以此类推</div>
            </el-row>
            <el-row style="margin-top: 16px;">
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="左键单击事件：">
                        <el-button type="primary" @click="LEFT_CLICK_IN_EARTH">左键单击</el-button>
                        <el-button type="primary" @click="REMOVE_LEFT_CLICK_IN_EARTH">移除左键单击</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import * as Cesium from 'cesium';

let viewer = null;
// const viewer = reactive(null)

// 开启鼠标监听事件
let handler = null;

/**
 * 左键单击事件
 */
const LEFT_CLICK = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

/**
 * 移除左键单击事件
 */
const REMOVE_LEFT_CLICK = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

/**
 * 左键双击事件
 */
const LEFT_DOUBLE_CLICK = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键双击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}

/**
 * 移除左键双击事件
 */
const REMOVE_LEFT_DOUBLE_CLICK = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}

/**
 * 左键按下事件
 */
const LEFT_DOWN = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键按下事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
}

/**
 * 移除左键按下事件
 */
const REMOVE_LEFT_DOWN = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
}

/**
 * 左键弹起事件
 */
const LEFT_UP = () => {

    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键弹起事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_UP);
}

/**
 * 移除左键弹起事件
 */
const REMOVE_LEFT_UP = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
}

/**
 * 中键按下事件
 */
const MIDDLE_DOWN = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('中键按下事件：', click.position);
    }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
}

/**
 * 移除中键弹起事件
 */
const REMOVE_MIDDLE_DOWN = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
}

/**
 * 中键弹起事件
 */
const MIDDLE_UP = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('中键弹起事件：', click.position);
    }, Cesium.ScreenSpaceEventType.MIDDLE_UP);
}

/**
 * 移除中键弹起事件
 */
const REMOVE_MIDDLE_UP = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
}

/**
 * 鼠标移动事件
 */
const MOUSE_MOVE = () => {
    handler.setInputAction(function (movement) {
        // 这里的movement.endPosition指的是屏幕坐标
        console.log('鼠标移动事件：', movement.endPosition);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

/**
 * 移除鼠标移动事件
 */
const REMOVE_MOUSE_MOVE = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}

/**
 * 右键单击事件
 */
const RIGHT_CLICK = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('右键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

/**
 * 移除右键单击事件
 */
const REMOVE_RIGHT_CLICK = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}

/**
 * 右键弹起事件
 */
const RIGHT_UP = () => {
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('右键弹起事件：', click.position);
    }, Cesium.ScreenSpaceEventType.RIGHT_UP);
}

/**
 * 移除右键弹起事件
 */
const REMOVE_RIGHT_UP = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
}

/**
 * 滚轮事件
 */
const WHEEL = () => {
    handler.setInputAction(function (movement) {
        console.log('滚轮事件：', movement.endPosition);
    }, Cesium.ScreenSpaceEventType.WHEEL);
}

/**
 * 移除滚轮事件
 */
const REMOVE_WHEEL = () => {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
}

/**
 * 多个事件结合使用
 */
const MORE_EVENTS = () => {
    // 为了防止其他事件影响，先移除所有事件
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
    // 以下三个方法在绘制的时候通常都是需要结合一起使用的。
    // 鼠标左键击事件
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('左键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 鼠标移动事件
    handler.setInputAction(function (movement) {
        // 这里的movement.endPosition指的是屏幕坐标
        console.log('鼠标移动事件：', movement.endPosition);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    // 鼠标右键事件
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        console.log('右键单击事件：', click.position);
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

/**
 * 移除多个事件结合
 */
const REMOVE_MORE_EVENTS = () => {
    // 移除：鼠标左键击事件、鼠标移动事件、鼠标右键事件
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)

}

/**
 * 确保鼠标在地球上点击有效，这里以鼠标左键点击为例，其他以此类推，左键单击事件
 */
const LEFT_CLICK_IN_EARTH = () => {

    // 为了防止其他事件影响，先移除所有事件
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_DOWN)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MIDDLE_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_UP)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
    
    handler.setInputAction(function (click) {
        // 这里的Click.position指的是屏幕坐标
        // 保证鼠标在地球上
        var ray = viewer.camera.getPickRay(click.position)
        var position = viewer.scene.globe.pick(ray, viewer.scene)
        if (position) {
            console.log("点击了地球，鼠标在地球上，焦点坐标：", position)
        } else {
            console.log('左键单击事件，鼠标不在地球上：', click.position);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

const REMOVE_LEFT_CLICK_IN_EARTH = () => {
    // 这里也可以移除对应的所有事件，但是如果没有绑定其他事件的话就没必要了移除了，其实移除其他的也不影响，还能保证不受到其他事件的影响
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

onMounted(() => {
    // 对应的Cesium的token
    let token = '你的token'
    Cesium.Ion.defaultAccessToken = token
    viewer = new Cesium.Viewer('cesiumContainer', {
        // 搜索框
        geocoder: false,
        // home键
        homeButton: false,
        // 全屏按钮
        fullscreenButton: false,
        // 动画控件
        animation: false,
        // 场景模式选择器,就是控制二三维的那个
        sceneModePicker: false,
        // 时间轴
        timeline: false,
        // 导航帮助提示按钮
        navigationHelpButton: false,
        // 地图选择器
        baseLayerPicker: false,
    });

    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
})

onUnmounted(() => {
    // 这个要不要都可以
    if (handler) {
        handler.destroy();
    }
    
})

</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
    display: none !important;
}

.cesium-viewer-toolbar {
    position: absolute;
    background-color: #FFFFFF;
    width: 400px;
    height: 800px;
    top: 16px;
    left: 16px;
    padding: 16px;
}
</style>