02Cesium中常用的鼠标事件

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的tokenlet token = '你的token'Cesium.Ion.defaultAccessToken = tokenviewer = 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>

结果如下图所示，点击的时候，F12打开浏览器的控制台，看着点击就可以了。

代码中还有确保鼠标在地球上点击有效，从而实现拿到的点位可以保证在地球上，这里以鼠标左键点击为例，其他以此类推。