Cesium事件处理

已于 2024-01-26 10:09:38 修改
阅读量2k 收藏 25
点赞数 18
分类专栏： Cesium 文章标签： arcgis javascript 前端
于 2024-01-26 09:50:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40640910/article/details/135858975
版权
本文详细介绍了Cesium库在WebGIS应用中的鼠标左键、右键、移动、滚轮事件，键盘事件（如Shift+鼠标、Ctrl+鼠标、Alt+鼠标），以及相机事件和场景渲染事件的使用方法，包括如何实例化和配置事件处理器，提供示例代码供读者理解和实践。
摘要由CSDN通过智能技术生成

文章目录

0.引言

无论是二维GIS应用系统还是三维GIS应用系统，都离不开各种事件的应用，特别是鼠标左键单击事件、鼠标左键双击事件等。根据事件的类型、用途，Cesium将事件大致分成了三大类，即屏幕空间事件处理程序（Screen Space Event Handler）、屏幕空间相机控制器（Screen Space Camera Controller）和场景渲染事件。

1.鼠标事件

1.1鼠标左键事件

Cesium的鼠标左键事件包括鼠标左键按下、弹起、单击及双击事件。我们可以在这些事件中添加自定义函数，以便用户在输入时执行某些操作。在使用鼠标左键事件前，我们需要先通过ScreenSpaceEventHandler类进行实例化，然后注册或删除相应的事件。
（1）关键代码
  在这里插入图片描述

3_1.1_鼠标左键事件.html

<!DOCTYPE html>
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>鼠标事件_左键事件</title>  
    <script src="./Build/Cesium/Cesium.js"></script>  
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">  
    <style>  
        html,  
        body,  
        #cesiumContainer {  
            width: 100%;  
            height: 100%;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
        }  
    </style>  
</head>  
  
<body>  
    <div id="cesiumContainer">  
    </div>  
  
    <script>  
        Cesium.Ion.defaultAccessToken = '你的token';  
        var viewer = new Cesium.Viewer("cesiumContainer", {  
            geocoder: true,  //是否显示地名查找工具  
            homeButton: true,    //是否显示首页位置工具  
            sceneModePicker: true,   //是否显示视角模式切换工具  
            baseLayerPicker: true,   //是否显示默认图层选择工具  
            navigationHelpButton: true,  //是否显示导航帮助工具  
            animation: true, //是否显示动画工具  
            timeline: true,  //是否显示时间轴工具  
            fullscreenButton: true,  //是否显示全屏按钮工具  
        });  
  
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
        handler.setInputAction(function (event) {  
            console.log('左键按下：', event.position);//左键按下时响应  
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);  
        handler.setInputAction(function (event) {  
            console.log('左键弹起：', event.position);//左键弹起时响应  
        }, Cesium.ScreenSpaceEventType.LEFT_UP);  
        handler.setInputAction(function (event) {  
            console.log('左键点击：', event.position);//左键按下和弹起记作一次点击，点击后响应  
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);  
        handler.setInputAction(function (event) {  
            console.log('左键双击：', event.position);//左键双击后响应  
        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);  
        // 移除屏幕空间事件  
        //handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);  
    </script>  
</body>  
  
</html>

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上任意位置左键双击，双击结果如下图右侧控制台响应消息。
  在这里插入图片描述

1.2鼠标右键事件

Cesium的鼠标右键事件包括鼠标右键按下、弹起及单击事件。我们可以在这些事件中添加自定义函数，以便用户在输入时执行某些操作。在使用鼠标右键事件前，我们需要先通过ScreenSpaceEventHandler类进行实例化，然后注册或删除相应的事件。
（1）关键代码
  在这里插入图片描述

3_1.2_鼠标右键事件.html

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('右键按下：', event.position);//右键按下时响应  
}, Cesium.ScreenSpaceEventType.RIGHT_DOWN);  
handler.setInputAction(function (event) {  
    console.log('右键弹起：', event.position);//右键弹起时响应  
}, Cesium.ScreenSpaceEventType.RIGHT_UP);  
handler.setInputAction(function (event) {  
    console.log('右键点击：', event.position);//右键按下和弹起记作一次点击，点击后响应  
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上任意位置右击，右键单击结果如下图右侧控制台响应消息。
  在这里插入图片描述

1.3鼠标移动事件

首先实例化一个ScreenSpaceEventHandler对象，然后注册鼠标移动事件MOUSE_MOVE，并通过setInputAction设置要在鼠标移动事件上执行的功能。例如，在鼠标移动事件上打印“鼠标正在移动”这句话，则只要鼠标移动，控制台就会不断打印这句话。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    animation: false, //是否显示动画工具  
    timeline: false,  //是否显示时间轴工具  
    fullscreenButton: false,  //是否显示全屏按钮工具  
});  
  
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('鼠标正在移动');  
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上移动鼠标，移动结果如下图右侧控制台响应消息。
  在这里插入图片描述

1.4鼠标滚轮事件

Cesium的鼠标滚轮事件包括鼠标滚轮按下、弹起、单击及滚动事件。我们可以在这些事件中添加自定义函数，以便用户在输入时执行某些操作。在使用鼠标滚轮事件前，我们需要先通过ScreenSpaceEventHandler类进行实例化，然后注册或删除相应的事件。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('中键按下：', event.position);  
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);  
handler.setInputAction(function (event) {  
    console.log('中键弹起：', event.position);  
}, Cesium.ScreenSpaceEventType.MIDDLE_UP);  
handler.setInputAction(function (event) {  
    console.log('中键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);  
handler.setInputAction(function (event) {  
    console.log('鼠标滚轮正在滚动', event.position);  
}, Cesium.ScreenSpaceEventType.WHEEL);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上任意位置单击一次滚轮并滚动滚轮，结果如下图右侧控制台响应消息。
  在这里插入图片描述

2.键盘事件

键盘事件也属于屏幕空间事件处理程序中的一种，但是它们不能单独使用，而是需要配合鼠标事件一起使用，如鼠标左键+Shift键、鼠标右键+Alt键等。
在Cesium中，键盘事件主要包括Shift键被按住、Ctrl键被按住及Alt键被按住3种类型。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    animation: false, //是否显示动画工具  
    timeline: false,  //是否显示时间轴工具  
    fullscreenButton: false,  //是否显示全屏按钮工具  
});  
  
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function (event) {  
    console.log('SHIFT+鼠标左键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.SHIFT);  
handler.setInputAction(function (event) {  
    console.log('CTRL+鼠标左键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.CTRL);  
handler.setInputAction(function (event) {  
    console.log('ALT+鼠标左键点击：', event.position);  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK,Cesium.KeyboardEventModifier.ALT);  
// 移除屏幕空间事件  
//handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，在地球体上分别按SHIFT+左击、CTRL+左击和ALT+左击，结果如下图右侧控制台响应消息。
  在这里插入图片描述

3.相机事件

根据画布上的鼠标移动或键盘输入修改摄像机的位置和方向，可被理解为我们常说的相机事件，它是与屏幕空间相机控制器相关的事件处理程序。
相机事件与之前所说的鼠标事件、键盘事件不同，它不需要先实例化，而是在Viewer类的实例化过程中就将实例化结果赋给了viewer.scene.screenSpaceCameraController，所以，我们直接操作viewer.scene.screenSpaceCameraController即可。
（1）关键代码
  在这里插入图片描述

3_3_相机事件.html

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
//修改鼠标右键为相机旋转  
viewer.scene.screenSpaceCameraController.tiltEventTypes = [  
    Cesium.CameraEventType.RIGHT_DRAG,//添加右键  
];  
//修改鼠标中键为相机缩放  
viewer.scene.screenSpaceCameraController.zoomEventTypes = [  
    Cesium.CameraEventType.MIDDLE_DRAG,//添加中键  
    Cesium.CameraEventType.WHEEL,//可添加其他事件，如滚轮等  
];

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，在地球上测试鼠标右键和鼠标中键操作相机情况。
  在这里插入图片描述

4.场景渲染事件

场景渲染事件是Cesium中十分重要的事件，特别是当我们需要实时监听场景渲染时，这几个事件是必不可少的。例如，我们要实时监听标签位置或者实时动态更新实体坐标时，就需要在场景渲染事件中进行回调。
Cesium的场景渲染事件主要包括4种，preUpdate、postUpdate、preRender、postRender。
（1）关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  
    geocoder: true,  //是否显示地名查找工具  
    homeButton: true,    //是否显示首页位置工具  
    sceneModePicker: true,   //是否显示视角模式切换工具  
    baseLayerPicker: true,   //是否显示默认图层选择工具  
    navigationHelpButton: true,  //是否显示导航帮助工具  
    animation: true, //是否显示动画工具  
    timeline: true,  //是否显示时间轴工具  
    fullscreenButton: true,  //是否显示全屏按钮工具  
});  
  
// 需要回调的函数   
function callbackFunc(event) {  
    console.log("注册更新之前执行了回调函数");  
}  
// 注册更新之前执行回调函数  
viewer.scene.preUpdate.addEventListener(callbackFunc);  
// 需要回调的函数   
function callbackFun(event) {  
    console.log("注册更新之后执行了回调函数");  
}  
// 注册更新之后执行回调函数  
viewer.scene.postUpdate.addEventListener(callbackFun);  
// 需要回调的函数   
function callbackFun(event) {  
    console.log("注册渲染之前执行了回调函数");  
}  
// 注册渲染之前执行回调函数  
viewer.scene.preRender.addEventListener(callbackFun);  
// 需要回调的函数   
function callbackFun(event) {  
    console.log("注册渲染之后执行了回调函数");  
}  
// 注册渲染之后执行回调函数  
viewer.scene.postRender.addEventListener(callbackFun);  
// 注销之前所注册的回调函数  
//viewer.scene.preUpdate.removeEventListener (callbackFunc);

其他代码参见1.1

（2）加载效果
运行代码后出现网页地球，按F12，调出控制台，下图右侧控制台刷新场景渲染事件。
  在这里插入图片描述

[1] 郭明强. 《WebGIS之Cesium三维软件开发》; 2023-04-01 [accessed 2024-01-26].
[2] GISer小辉. Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）; 2023-01-01 [accessed 2024-01-26].
[3] Codifier. Cesium 更改默认的鼠标操作; 2019-10-09 [accessed 2024-01-26].
[4] 锦岁. cesium教程（二）：Viewer、Scene、影像、地形、坐标、相机、追踪、交互; 2022-01-27 [accessed 2024-01-26].

cacrle
关注
专栏目录
GIS系列（九）Cesium中的事件总结
lz5211314121的博客
05-11 2140
cesium中的事件非常非常多，暂且抛开监听变化触发的事件，光相机事件和屏幕事件就非常多。 这篇文章带大家捋一捋cesium中的事件都有哪些。 1.相机事件 2.屏幕事件 3.键盘事件 4.一些变化所触发的监听事件 camera.changed：当相机发生变化时 camera.movEnd:当相机停止移动时触发 camera.moveStart:当相机开始移动 scene.postRender:当场景渲染完成后触发 scene.preRender:场景渲染之前 scene.
cesium实现自定义弹窗
Dlma_的博客
07-21 1万+
前言 公司有项目涉及cesium的部分，前辈便让我自己建个cesium的项目练练手，前两天让我尝试了一下自定义弹框的实现。 官方api中对点的描述中只有label这一属性可实现（不知是否是我看漏了啊哈哈哈哈哈哈），于是开始思考通过添加div的方式，来实现cesium自定义的弹窗效果。 本篇文章讲述从创建点开始到实现弹窗的过程。
cesium学习
最新发布
qq_45660256的博客
07-02 1019
Cesium 学习笔记
Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）
热门推荐
GISer小辉
11-29 2万+
内容包括：鼠标事件、相机事件、键盘事件、场景触发事件等，持续更新。
在 CesiumJS 中实现实体点击事件
顺芯技术猿的博客
04-22 4317
CesiumJS 是一个强大的开源 WebGL 地球渲染引擎，用于在 Web 上构建高性能、交互性强的三维地球应用。在 CesiumJS 中，可以通过多种方式实现对实体的点击事件，以便实现与实体的交互互动。本文将介绍几种常见的实现方式，供开发者参考。
4、CCesium鼠标点击事件
mylove10086
07-06 809
cesium鼠标点击事件
Cesium鼠标事件
StupidlyGrass的博客
02-27 1162
【代码】Cesium鼠标事件。
Cesium.js 事件
星空
06-21 453
【代码】Cesium.js 事件。
3D-基于Cesium+Potree实现在线点云查看+处理工具-优质项目.zip
02-18
本项目“3D_基于Cesium+Potree实现在线点云查看+处理工具_优质项目”旨在提供一个高效、易用的平台，让用户能够在线查看和处理3D点云数据。 Cesium是一个强大的开源JavaScript库，专门用于创建交互式的3D地球和地图...
Cesium 中 实体类entity多种实例对象-实现点击事件
06-04
本主题将深入探讨如何在Cesium中利用Entity类创建不同的实例对象，并实现点击事件功能，以便与用户进行交互。 首先，让我们了解Cesium中的Entity类。Entity类是Cesium中的一个抽象基类，它提供了用于在3D场景中表示...
Cesium 事件方法
qq_36136313的博客
09-27 2144
Cesium 事件方法
Cesium-demo学习三维，学习JS封装Cesium
07-13
这个插件将自动处理Cesium库的引入、按需加载和优化，使得在Vue项目中使用Cesium变得更加方便。 在执行`npm install`命令后，所有必要的依赖都将被下载到项目中。`npm`（Node Package Manager）是Node.js的包管理器...
Cesium图元管理和事件处理
MKliudan的专栏
09-15 448
用过cesium图元api添加的几何图形都知道；起事件处理方式和数据绑定问题都和entity处理方式不一致。 entity方式添加的事件处理 var cartesian = viewer.scene.pickPosition(e.position); //地图点位查询 let pick = viewer.scene.pick(e.position); if (Cesium.def
Cesium的点击事件及简单应用
胡萝卜先生的进阶之路
04-10 5714
Cesium.js点击事件包括向下，向上，单击，双击，按住按钮时移动。 事件枚举 ScreenSpaceEventType { static constant Cesium.ScreenSpaceEventType.LEFT_CLICK //表示鼠标左键单击事件。 static constant Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLIC...
cesium entity默认的点击事件
AllBluefm的专栏
04-07 1109
双击entity，地图视角始终跟随双击的这个entity，左键不能旋转地图了，解决此情况可以去掉cesium自带的双击事件。点击entity，屏幕出现一个绿色的框，不想显示这个绿色框有两个办法。
cesium标点绑定事件
qq_42351255的博客
08-16 236
【代码】cesium标点绑定事件。
cesium屏幕空间监听事件
tjx1997的博客
08-07 1445
本文主要解析了ScreenSpaceEventHandler类，并实现了屏幕空间事件的监听。部分内容参考了文章:cesium-事件监听(获取点击位置的经纬度和高度)。添加了部分ts的代码，和对回调函数参数的解析，这些参数一般是屏幕的坐标，通过坐标转换后可以向cesium球体上增加元素，可以实现点击添加点、移动物体等复杂的操作。
Cesium.js点击事件
weixin_30920597的博客
02-25 1466
创建viewer var viewer = new Cesium.Viewer('cesiumContainer'); 鼠标事件 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //1、左键单击事件 handler.setInputAction(functio...
cesium事件创建与清除
04-05
创建Cesium事件： 1. 导入Cesium库 ```javascript import Cesium from 'cesium/Cesium'; ``` 2. 创建事件 ```javascript const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); ``` 3. 添加事件监听 ```javascript handler.setInputAction((event) => { // 事件处理逻辑 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); ``` 清除Cesium事件： ```javascript handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.destroy(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值