『Cesium 基础』Cesium事件基础

最新推荐文章于 2025-10-10 09:37:22 发布

seelingzheng

最新推荐文章于 2025-10-10 09:37:22 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Cesium GIS可视化

本文链接：https://blog.youkuaiyun.com/seelingzheng/article/details/105424802

GIS可视化同时被 2 个专栏收录

83 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

Cesium

72 篇文章 ¥159.90 ¥299.90

订阅专栏

本文介绍Cesium的事件处理，包括基于canvas的ScreenSpaceEventType，如鼠标按键和双指触摸事件，以及相机交互事件CameraEventType，提供前端学习资源。

关注公众号"seeling_GIS"，回复『前端视频』，领取前端学习视频资料
Cesium事件

基于canvas事件 -- Cesium.ScreenSpaceEventType

鼠标左键

事件类型	含义
LEFT_CLICK	单击
LEFT_DOUBLE_CLICK	双击
LEFT_DOWN	左键按下
LEFT_UP	左键弹起

鼠标中键

事件类型	含义

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

seelingzheng

关注关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Cesium：postRender弹框导致地图卡死问题

席木木的博客

01-03

1313

Cesium：postRender弹框导致地图卡死问题优化方案。

Cesium Render渲染（1）：Cesium的渲染概述

zhangiser的专栏

12-18

1420

webGl的渲染

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

逸重楼 2021.05.27
总结到位

Cesium学习笔记（2）

最新发布

weixin_49096566的博客

10-10

414

在数字化时代，三维地理可视化已成为众多领域的热门需求。作为前端开发者，如何快速构建高性能的三维地球应用？Cesium 作为开源的三维地球和地图库，为我们提供了完美的解决方案。本文将从前端视角深入讲解 Cesium 的核心概念、实战技巧和性能优化，帮助你快速掌握这一强大工具。

Cesium视角插值跟踪

weixin_45299046的博客

02-20

595

当我们鼠标按下时,这时相机也是在运动过程中,因此我们还需要继续跟踪鼠标按下和抬起完整代码如下})

Cesium 事件方法

qq_36136313的博客

09-27

2359

Cesium 事件方法

精选资源

cesium基础功能展示平台

11-01

【cesium基础功能展示平台】是一个基于Cesium的开源3D地球可视化平台，它整合了丰富的地图服务和地理信息系统功能，旨在提供一个直观且交互性强的地球数据展示环境。Cesium是一个JavaScript库，利用WebGL技术在...

精选资源

CESIUM开发基础培训(cesiumlab提供)

05-31

【CESIUM开发基础培训】 CESIUM是一个开源的JavaScript三维虚拟地球/地图库，致力于成为动态数据可视化的领航者。它强调性能优化、精确度、视觉效果、易用性和跨平台支持。Cesium通过同行评审，拥有90%以上的单元...

精选资源

Cesium基础案例手册目录

04-10

Cesium基础案例手册目录

精选资源

Cesium基础知识讲解,cesium开发教程

09-10

在"Cesium基础知识讲解"的PDF教程中，你将深入理解Cesium的核心概念、基本使用方法以及如何通过它来构建自己的项目。 1. **Cesium简介** Cesium起源于洛克希德·马丁公司，现在由分析系统联盟（Analytical ...

Cesium量算

01-25

Cesium量算，实现在Cesium地图上点击几个点，然后计算这根线的长度。

cesium事件监听总结

mkbbreak的博客

03-25

715

【代码】cesium事件监听总结。

Cesium鼠标点击事件的监听

qq_32037427的博客

11-13

3369

** Cesium监听Enitity的点击事件 ** Cesium加载3Dtiles模型步骤：（一）如果您使用的是大疆智图，则该软件可以直接输出3Dtiles格式（B3DM切片）的数据，如图所示：然后即可用着段代码加载 var viewer = new Cesium.Viewer('cesiumContainer', { //需要进行可视化的数据源的集合 animation: false, //是否显示动画控件 shouldAnimate: true, homeButton: fal

cesium学习记录

sunyv1的博客

01-13

170

可绑定事件 static constant Cesium.ScreenSpaceEventType.LEFT_CLICK //表示鼠标左键单击事件。 static constant Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK //表示鼠标左键双击事件。 static constant Cesium.ScreenSpaceEventType.LEFT_DOWN //表示鼠标左键按下事件。 static constant Cesium.ScreenS

Cesium 快速入门（十三）事件系统

yy的博客

08-01

642

Cesium事件系统摘要 Cesium的事件系统支持监听场景交互与状态变化，主要包括：屏幕空间事件：处理鼠标点击、移动等交互使用ScreenSpaceEventHandler监听鼠标事件（LEFT_CLICK等）支持键盘修饰符组合（Shift/Ctrl+点击）示例：点击获取坐标、检测实体点击相机事件：控制场景交互行为默认行为包括旋转(LEFT_DRAG)、缩放(RIGHT_DRAG)、倾斜(MIDDLE_DRAG) 适用于3D/2D/Columbus等视图模式注意事项：键盘事件需配合鼠标事件

Cesium基础教程-事件-常用的事件

xt3d的博客

10-17

486

时钟运行事件，此事件和scene.preRender等事件触发的频率相同。：场景更新前的事件，每渲染一帧前先更新场景相关数据。：场景渲染结束事件，每渲染一帧结束时触发。：场景更新完成事件，此时数据已更新完成。：场景渲染前事件，每渲染一帧之前触发。：锁定的实体对象改变事件。：地形服务提供者改变事件。：选中的实体改变事件。

Cesium 鼠标事件监听

现在学习也不晚

01-25

2万+

在Cesium里面，我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件： var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //todo：在椭球下点击创建点 handler.setInputAction(function(event) { ...

cesium视频教程

10-15

本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。

cesium 基础点线面原理

04-03

### Cesium 中点线面的渲染原理及基础实现 #### 渲染原理概述 Cesium 是基于 WebGL 的 JavaScript 库，用于创建三维地球和地图可视化应用。WebGL 提供了硬件级别的图形加速能力，使得 Cesium 能够高效处理复杂的几何数据并将其渲染到屏幕上。在 Cesium 中，点、线、面的渲染主要通过顶点着色器 (Vertex Shader) 和片段着色器 (Fragment Shader) 来完成。 - **点的渲染** 点通常由单个坐标表示，在 Cesium 中可以通过 `Cesium.Entity` 或者直接使用 `Cesium.Primitive` 进行定义。每个点的位置可以用经纬度指定，并转换为笛卡尔坐标系中的位置向量[^1]。随后，这些点会被传递给 GPU 并利用 GL_POINTS 模式进行绘制。 - **线的渲染** 线是由一系列连续的点组成，每两个相邻点之间形成一条直线段。在线条的渲染过程中，Cesium 使用 GL_LINES 模式来连接各个顶点。为了使线条能够适应地形起伏，Cesium 支持动态调整高度以保持贴地效果[^4]。 - **面的渲染** 面则是一组多边形区域，它们可以覆盖地面或者悬浮于空中。对于复杂形状的面，Cesium 可以自动计算边界并将内部填充颜色或纹理。同样地，如果希望面紧贴地形，则需启用相应的选项[^2]。 #### 基础实现方法以下是分别针对点、线、面的基础实现代码示例： ##### 绘制点 ```javascript // 创建一个实体对象代表某个地理空间上的点 viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.1641, 39.9525), point : { pixelSize : 10, color : Cesium.Color.RED, outlineColor : Cesium.Color.WHITE, outlineWidth : 2 } }); ``` ##### 绘制线 ```javascript // 添加一条从A地点指向B地点的连线 viewer.entities.add({ polyline : { positions : Cesium.Cartesian3.fromDegreesArray([ -75.1641, 39.9525, -75.5388, 39.9611 ]), width : 5, material : Cesium.Color.BLUE.withAlpha(0.5) } }); ``` ##### 绘制面 ```javascript // 构造一个多边形覆盖特定范围内的土地面积 viewer.entities.add({ polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArray([ -75.1641, 39.9525, -75.5388, 39.9611, -75.5512, 39.9022, -75.1444, 39.9108 ]), material : Cesium.Color.GREEN.withAlpha(0.7) } }); ``` 以上代码展示了如何简单快速地构建基本的地图要素——点、线以及封闭区域的面结构[^3]。 #### 总结说明综上所述，Cesium 利用了现代 Web 技术栈的优势实现了高效的 GIS 数据呈现方式；无论是简单的标注还是复杂的路径规划都可以借助该工具轻松达成目标。同时由于其开源特性允许开发者自由扩展功能满足个性化需求。