Cesium功能集——屏幕截图

最新推荐文章于 2025-09-24 11:32:37 发布

AbjCommon_Lisp

最新推荐文章于 2025-09-24 11:32:37 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/AbjCommon_Lisp/article/details/133095948

DEJA_VU3D 专栏收录该内容

38 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何在Cesium中实现屏幕截图功能。通过使用Cesium的Scene类和辅助函数，创建一个按钮触发截图，将场景渲染到Canvas，然后转换为DataURL，最后模拟点击下载链接保存为本地图片。

在Cesium中，屏幕截图是一个非常有用的功能，它允许用户捕捉当前3D场景的屏幕快照。本文将探讨如何在Cesium中实现屏幕截图功能，并提供相应的源代码示例。

要实现屏幕截图功能，我们需要使用Cesium的Scene类和相关的辅助函数。下面是一个简单的示例，展示了如何在Cesium中进行屏幕截图：

// 创建一个Cesium Viewer
var viewer = new Cesium.Viewer("cesiumContainer");

// 创建一个按钮用于触发屏幕截图
var screenshotButton =

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AbjCommon_Lisp

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Cesium中级开发教程之七：截图#保存图片

Cesium开发工程师

11-10

246

利用dataURLtoBlob方法将地球场景转化为Blob对象，再将其转换为图片文件。

Cesium中级开发教程之八：截图#截屏

Cesium开发工程师

11-10

368

引用html2canvas的外部包，将场景截屏为图片，再右键点击保存下来。

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

html2Canvas页面截图

WATERFALL_的博客

01-13

472

1、下载一个html2canvas.min.js. 2、饮用后使用方法如下 $(function(){ var content = $("#content"); html2canvas(content,{ onrendered: function(canvas) { var image = new Image();//新建一个img标签

cesuim场景截屏功能

Smile_666666的博客

02-29

1750

cesuim场景截屏功能:对当前场景viewer范围进行拍照截图，类似快照功能，截图后的照片，可直接下载到浏览器

cusium常见操作：截图（快照功能）

happy81997的博客

03-01

1283

cusium常见操作：截图（快照功能）

Cesium工具应用

【cacrle】的博客

01-27

2575

现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。本文将使用Cesium完成一些工具应用级别的功能开发，并介绍如何与常见的第三方库（如Echarts、Turf.js、CesiumHeatmap.js等）进行集成来完成一些需求的开发。

Cesium截屏

wo_buzhidao的博客

06-09

2913

1.实现cesium截屏功能，有时候截屏中没有cesium里面的要素，需要在地球初始化options里面配置如下代码 "contextOptions": { "webgl": { "alpha": true, "depth": false, "stencil": true, "antialias": true, "premultipliedAlpha": true, "preserveDrawing

Cesium实现场景截图

weixin_39150852的博客

02-25

2511

cesium场景出图

superMap开源框架使用Cesium实现截图

weixin_43822237的博客

12-02

647

通过监听事件监听截图按钮,根据我的代码或者查看开源代码进行使用或修改！ data(){ return{ url:'', viewer:window.viewer, scene:viewer.scene, } }, methods: { // 截图 screenshotClick() { var promise = this.scene.outputSceneToFile(); Cesium.when

Cesium 入门

虎康的博客

06-23

3265

Viewer：主要窗口Cesium 展示三维要素内容的主要窗口，包含三维地球的视窗，还包含了一些基础控价const viewer = new Cesium.Viewer('div的ID',{ options可选参数 }，包括图层)options可选参数animation: false, 隐藏动画效果timeline:false, 隐藏时间轴等等Scene：场景类，隐藏地球图层Entity：实体类。

Cesium等高线插件

08-29

Cesium 等高线插件

cesium米转换经纬度_Cesium中的地形和坐标转换说明

weixin_39734074的博客

12-20

795

1 Cesium中的地形Cesium中的地形系统是一种由流式瓦片数据生成地形mesh的技术，厉害指出在于其可以自动模拟出地面、海洋的三维效果。创建地形图层的方式如下：var terrainProvider = new Cesium.CesiumTerrainProvider({url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/t...

迈向三维：vue3+Cesium.js三维WebGIS项目实战

02-21

6302

WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。

Cesium影像图层加载指南——Cesium基础笔记（快速入门）附完整代码实例

最新发布

weixin_44716194的博客

09-24

774

Cesium基础笔记摘要本文为CesiumJS快速入门指南，重点解析常用API方法参数。内容涵盖影像图层基础概念、核心API设计模式（ImageryLayer与ImageryProvider分离架构），以及createWorldImageryAsync异步加载方法的详细说明。提供多类型影像服务（如WMTS）的加载实现方案，包含参数配置表和代码示例，并说明国内服务的跨域问题解决方案。通过设计模式解析和实战代码演示，帮助开发者快速掌握Cesium影像图层加载技术。后续将更新高级应用笔记，持续完善Cesium技

cesium-场景出图场景截屏导出图片或pdf

zslsh44的专栏

02-01

1607

如果安装的插件Canvas2Image不好用，可自建js。cesium把当前的场景截图，下载图片或pdf。

基于supermap超图、cesium的场景截图实现，避免全黑截图

hoaxxcj的博客

04-12

1346

由于超图或cesium场景都是在一个canvas标签上，所以一开始打算用canvas.toDataURL()获取画布上的绘制内容，再通过a标签触发点击下载。但最后试了多次得到的都是全黑图片。就算通过 Canvas.getContext()设置preserveDrawingBuffer: true也不行，这会导致场景变黑，部分内容闪亮，此时截图还是能看到一部分的，说明canvas.toDataURL()功能正常，只是场景出了问题。最近有个需求：只截场景图片，不保留其它功能标签，并导出下载。

cesium实现场景导出图片功能

专注GIS开发

05-10

3135

cesium实现场景导出图片功能

Cesium + Vue 实现地图（屏幕）截图（四）

qq_41366268的博客

07-15

4206

cesium实现截图 html2canvas

cesium js 路径_Cesium开发入门篇 | 02开发环境搭建及第一个示例

weixin_39933508的博客

12-13

421

开发环境准备利用Cesium API进行二次开发属于Web前端开发范畴，目前比较火的Web三剑客包括React、Vue、AngularJS，每个js库的详细介绍可转至官网查看，在此不做详细介绍。本次开发环境是基于Vue搭建的，需要安装(部署)的软件主要包括以下几种：IDE：VS Code浏览器：ChromeWeb服务器：nginx包管理：node前两个下载后安装即可，注意VS Code需要安装Li...

cesium粒子效果——飞机模型上雷达扫描效果

07-11

在Cesium中实现飞机模型上的雷达扫描粒子效果，可以通过结合Cesium的粒子系统（`ParticleSystem`）和3D模型（如GLTF格式的飞机模型）来完成。以下是一种可行的实现方法： ### 1. 加载飞机模型首先，使用`Entity`或`DataSource`加载飞机模型到场景中。通常，飞机模型会以GLTF格式提供，并绑定到特定的位置和方向。 ```javascript viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), model: { uri: 'path/to/airplane.glb', scale: 1.0 } }); ``` ### 2. 创建粒子系统的发射器为了模拟雷达扫描效果，可以在飞机模型的某个部位（如机头或雷达位置）创建一个粒子发射器。可以使用`ParticleEmitter`类，并将其位置绑定到飞机模型的局部坐标系中。 ```javascript const particlePosition = new Cesium.Cartesian3(0, 0, 0); // 飞机模型局部坐标中的雷达位置 const emitterModelMatrix = Cesium.Matrix4.multiply( viewer.scene.globe.ellipsoid.cartographicToCartesian( Cesium.Cartographic.fromDegrees(-75.59777, 40.03883) ), Cesium.Matrix4.fromTranslation(particlePosition), new Cesium.Matrix4() ); ``` ### 3. 定义雷达扫描粒子效果使用`ParticleSystem`定义雷达扫描效果。雷达扫描通常表现为扇形区域内的动态粒子扩散，可以通过设置粒子的速度、生命周期、颜色变化等参数来模拟。 ```javascript const radarParticleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: 'path/to/particle.png', // 粒子贴图 startColor: Cesium.Color.RED.withAlpha(0.7), endColor: Cesium.Color.YELLOW.withAlpha(0.0), startScale: 1.0, endScale: 3.0, minimumSpeed: 0.1, maximumSpeed: 0.5, life: 2.0, emissionRate: 100, // 每秒发射的粒子数 bursts: [new Cesium.ParticleBurst({ time: 0, minimum: 100, maximum: 200 })], lifetime: 60, modelMatrix: emitterModelMatrix, emitter: new Cesium.CircleEmitter(10.0), // 扇形发射区域 rotationAxis: Cesium.Cartesian3.UNIT_Z, applyWind: false })); ``` ### 4. 动态更新粒子系统位置与方向由于飞机是移动的，需要在每一帧更新粒子系统的位置和方向，使其始终跟随飞机模型的当前位置和朝向。 ```javascript viewer.scene.postRender.addEventListener(() => { const heading = viewer.entities.values[0].position.getValue(viewer.clock.currentTime).heading; const pitch = viewer.entities.values[0].position.getValue(viewer.clock.currentTime).pitch; const roll = viewer.entities.values[0].position.getValue(viewer.clock.currentTime).roll; const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); const orientation = Cesium.Transforms.headingPitchRollQuaternion( viewer.entities.values[0].position.getValue(viewer.clock.currentTime), hpr ); radarParticleSystem.modelMatrix = Cesium.Matrix4.multiply( viewer.scene.globe.ellipsoid.cartographicToCartesian( Cesium.Cartographic.fromCartesian(viewer.entities.values[0].position.getValue(viewer.clock.currentTime)) ), Cesium.Matrix4.fromQuaternion(orientation), new Cesium.Matrix4() ); }); ``` ### 5. 可选：添加扇形扫描动画为了增强雷达扫描的视觉效果，可以使用定时器控制粒子系统的开启与关闭，或者调整发射器的方向，从而模拟旋转扫描的效果。 ```javascript let angle = 0; setInterval(() => { angle += 0.1; const rotationMatrix = Cesium.Matrix4.fromRotationZ(angle); radarParticleSystem.emitter.direction = Cesium.Matrix3.getColumn(rotationMatrix, 2, new Cesium.Cartesian3()); }, 100); ``` ---