007：Cesium.ScreenSpaceEventHandler 知识详解，示例代码

已于 2025-05-14 17:32:53 修改
阅读量189 收藏 6
点赞数 7
CC 4.0 BY-SA版权
分类专栏： # cesium综合教程200+ 文章标签： 大剑师 cesium教程 cesium高级 cesium示例
于 2025-02-26 10:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/145779563

在这里插入图片描述

查看本专栏目录 - 本文是第 007个API内容详解

vue+cesium 示例教程200+目录

文章目录

Cesium.ScreenSpaceEventHandler 是 Cesium.js 中用于处理屏幕空间事件的核心工具之一，它允许开发者响应用户的交互操作，如鼠标点击、拖动、滚轮滚动等。通过 ScreenSpaceEventHandler，可以实现对用户输入的实时响应，从而增强三维地球可视化的交互性。

一、ScreenSpaceEventHandler 的基本概念

Cesium.ScreenSpaceEventHandler 提供了一种机制来监听

了解本专栏 订阅专栏 解锁全文 超级会员免费看
cesium小知识：ScreenSpaceEventHandler 详解示例
大剑师兰特的GIS世界
12-30 767
是 Cesium 中用于处理屏幕空间事件的工具，它允许开发者响应用户的交互操作，如鼠标点击、拖动、滚轮滚动等。通过，你可以轻松地为3D场景中的对象添加交互功能，例如选择实体、显示信息提示、控制相机移动等。
Cesium.Ray 知识详解，示例代码
大剑师兰特的GIS世界
05-14 180
Cesium.Ray 是 CesiumJS 中用于表示三维空间中无限射线的核心类，广泛应用于地理信息系统（GIS）、三维可视化和碰撞检测等场景。射线由起点（origin）和方向向量（direction）定义，数学表达式为 ( P(t) = \text{origin} + t \times \text{direction} )。核心属性包括起点和方向向量，常用方法包括射线与平面的交点计算、根据距离获取射线上的点等。在 Cesium 中，Cesium.Ray 常用于地形碰撞检测、鼠标点选对象和雷达探测模拟等场景
Cesium.ScreenSpaceEventHandler是 CesiumJS 中用于处理屏幕空间事件（如鼠标点击、移动、滚轮等）的工具
this__valve的博客
09-02 1123
是 CesiumJS 中用于处理屏幕空间事件（如鼠标点击、移动、滚轮等）的工具。这个类可以帮助你响应用户在视图画布上的操作，从而在 3D 场景中执行相关的逻辑。
cesium ScreenSpaceEventHandler && ScreenSpaceEventType.txt
weixin_42193179的博客
12-10 1672
1. handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // On mouse over, display all the properties for a feature in the console log. handler.setInputAction(function(movement) { va...
cesium屏幕空间监听事件
tjx1997的博客
08-07 1849
本文主要解析了ScreenSpaceEventHandler类，并实现了屏幕空间事件的监听。部分内容参考了文章:cesium-事件监听(获取点击位置的经纬度和高度)。添加了部分ts的代码，和对回调函数参数的解析，这些参数一般是屏幕的坐标，通过坐标转换后可以向cesium球体上增加元素，可以实现点击添加点、移动物体等复杂的操作。
Cesium 事件详解（鼠标事件、相机事件、键盘事件、场景触发事件）
GISer小辉
11-29 2万+
内容包括：鼠标事件、相机事件、键盘事件、场景触发事件等，持续更新。
【Cesium入门教程】第六篇：综合应用与案例分析
GIS前端嘉欣的博客
08-30 886
上述代码封装并组合成一个可视化效果，我们可以创建一个简单的Cesium应用，该应用将加载地形数据、添加一个三维模型、处理用户点击事件，并添加一个粒子系统以增强视觉效果。在后续的教程中，我们将进一步探讨Cesium在特定领域的应用，如城市规划、环境监测等，以及如何将Cesium与其他技术如AI、大数据等结合，创造更多可能性。在掌握了Cesium的基础知识、API的使用、以及如何创建交互和动态效果后，本教程将通过一个综合案例来展示如何将这些知识点应用到实际项目中。实现点击事件，显示建筑物的详细信息。
Cesium.Cartographic.fromCartesian解释
07-05
示例代码（参考引用[2]和[3]）： ```javascript // 假设有一个笛卡尔坐标点 var cartesian = new Cesium.Cartesian3(x, y, z); // 转换为Cartographic（弧度） var cartographic = Cesium.Cartographic....
Cesium.Cartesian2转经纬度
最新发布
07-05
示例代码： ```javascript // 假设viewer是Cesium.Viewer的实例 const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function(movement) { // 获取鼠标点击位置...
Cesium常用事件，包括点击事件，鼠标事件，相机移动事件
weixin_39150852的博客
08-27 7254
点击事件 let leftclick = Cesium.ScreenSpaceEventType.LEFT_CLICK; viewer.screenSpaceEventHandler.removeInputAction(leftclick); let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 点击事件 handler.setInputAction((e) => { l
Cesium中的鼠标事件
DTCloud
04-18 1846
在Cesium中，有部分情况需要和场景进行交互，这就离不开鼠标的操作。Cesium为实现这一功能，分成了两个过程。类，例如实例化后的名称为handler；然后，为 handler 注册鼠标事件的监听；最后，在监听事件的回调方法中获取。鼠标的事件接口类型。在其官方文档里共有十五种类型，此处介绍三种常用的事件。方法获取对应的选中对象。因此简单介绍一下Cesium提供的鼠标监听接口。可以监听Cesium的父容器canvas的事件。设置要在输入事件上执行的函数。对监听事件属性进行设置。以鼠标左键点击事件为例。
vue 2.x+webpack+cesium1.64详解（7）：cesium事件详解
happy81997的博客
01-04 1908
目录cesium事件详解一、屏幕空间事件处理程序（Screen Space Event Handler）1.1、 屏幕空间事件类型：（ScreenSpaceEventType）鼠标事件2.1、键盘修饰符类型（KeyboardEventModifier） 二、屏幕空间相机控制器（Screen Space Camera Controller）2.1、相机事件2.1.1 类型 2.1.2 默认操作模式 2.1.3 修改默认操作模式三、场景触发事件Cesium中的事件大体分为三种，即屏幕空间事件处理程序，屏幕空间相
学习【Cesium】第九篇，鼠标交互和数据查询（学不会揍我）
New_Wang的博客
09-16 1576
这篇主要是学习鼠标交互和数据查询，那么这里有必要搞清楚Cesium空间事件类型有哪些才能进行下一步查询操作
cesium-事件监听(获取点击位置的经纬度和高度)
孙霸天的专栏
03-23 3243
cesium-事件监听(获取点击位置的经纬度和高度) 介绍 let handler = new Cesium.ScreenSpaceEventHandler(element); 处理用户输入事件。可以添加自定义功能以在用户输入时执行。 成员 Cesium.ScreenSpaceEventHandler.mouseEmulationIgnoreMilliseconds=800 接收到任何触摸事件后鼠标事件将被禁用的时间量（以毫秒为单位），这样任何模拟的鼠标事件都将被忽略。 Cesium.ScreenSpa
Cesium中鼠标事件绑定和移除
12-20 1324
直接在viewer实例上添加,清除事件会污染整个viewer实例且当前实例存在其它鼠标事件会一并清除（适合一键清除地图上事件）每次都创建一个实例，可以多个共存且根据名字（变量比如：下面的。
Cesium 绑定鼠标事件和移除鼠标事件
GIS（地理信息系统）
07-14 3771
Cesium 绑定鼠标事件和清除鼠标事件
cesium学习记录08-鼠标绘制实体（点，线，矩形，圆，多边形）
木卯彳亍的博客
08-15 6258
cesium，鼠标绘制多边形
Cesium简介
热门推荐
floating_heart的博客
06-26 3万+
Cesium框架简介，尚未全部完成
Cesium快速入门
【cacrle】的博客
01-23 8381
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结，以使新手能快速入门Cesium。
orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-15.0), },
03-15
### Cesium 中 Orientation 对象的 Heading 和 Pitch 属性用法 在 Cesium 中，`orientation` 是一个对象，通常用于定义相机的方向。它包含了三个主要属性：`heading`、`pitch` 和 `roll`。这些属性分别对应不同的旋转角度。 #### 1. **Heading** `heading` 表示绕 Y 轴（北方向）的旋转角度，即偏航角 (yaw)，决定了相机水平方向上的朝向。它的值通常是弧度制的角度，范围为 `[0, 2π)`。当设置 `heading` 时，可以使用 `Cesium.Math.toRadians()` 函数将角度从度数转换为弧度[^3]。 例如，在以下代码中，`heading` 的值被设定为 `0` 弧度，这意味着相机正对着北方。 ```javascript viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, 10000000), orientation: { heading : Cesium.Math.toRadians(0), // 偏航角，指向北方 pitch : Cesium.Math.toRadians(-90), // 俯仰角 roll : Cesium.Math.toRadians(0) // 翻滚角 } }); ``` #### 2. **Pitch** `pitch` 表示绕 X 轴的旋转角度，即俯仰角 (pitch)，决定了相机垂直方向上的倾斜程度。其值同样是以弧度表示，范围一般为 `[-π/2, π/2]`。正值表示向上看，负值表示向下看。 在下面的例子中，`pitch` 被设为 `-90` 弧度，这使得相机完全向下看地面。 ```javascript viewer.camera.lookAt( Cesium.Cartesian3.fromDegrees(118.0658439, 24.5915414), // 定义目标位置 new Cesium.HeadingPitchRange( Cesium.Math.toRadians(0), // 偏航角 Cesium.Math.toRadians(-90), // 俯仰角，向下看 20000 // 相机距离目标的距离 ) ); ``` #### 3. **Math.toRadians 示例** 由于 Cesium 使用的是弧度而不是度数来测量角度，因此经常需要用到 `Cesium.Math.toRadians()` 方法来进行单位转换。以下是几个常见的例子： - 将 90 度转为弧度： ```javascript let radians = Cesium.Math.toRadians(90); // 结果约为 1.5707963267948966 ``` - 将 -45 度转为弧度： ```javascript let radiansNegative = Cesium.Math.toRadians(-45); // 结果约为 -0.7853981633974483 ``` #### 4. **完整示例** 以下是一个完整的示例，展示了如何利用 `setView` 方法并结合 `orientation` 来调整相机的位置和姿态： ```javascript // 初始化 Viewer let viewer = new Cesium.Viewer('cesiumContainer'); // 设置相机视图 viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, 10000000), // 地理坐标及高度 orientation: { heading : Cesium.Math.toRadians(45), // 向东北方稍微偏移 pitch : Cesium.Math.toRadians(-30), // 下倾一定角度 roll : Cesium.Math.toRadians(0) // 不翻滚 } }); ``` 此代码片段设置了相机的目标位置以及其方向，其中 `heading` 控制水平方向，而 `pitch` 则影响上下视角。 ---
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值