企业官网建设流程全解析

如何把 CesiumJS 3D 场景变成图、视频和数据文件：完整导出实操

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium

做完一个 CesiumJS 3D 场景，最常见的收尾动作是把成果导出：一张截图、一段视频、一份数据文件。这三种资产分别对应展示、汇报和交换三种用途。本文按任务顺序给你一套可执行的做法，从截一张清晰的图开始，到批量导出多角度画面结束。

截一张高清画面：等渲染稳定再按快门

先判断场景是否可以截图

等三件事都完成再截：地形与影像瓦片加载完毕、模型和实体不再跳动、页面没有加载转圈。如果动画还在跑，先把动画暂停或定格，截出来的图才干净。

截图数据从哪来

CesiumJS 的渲染目标是 canvas 元素，截取的本质是把这块画布转成图片数据：canvas.toDataURL()直接返回 PNG 编码的字符串，存下来就是图。分辨率由画布当前尺寸决定，想要更清晰的图，截之前先把场景渲染分辨率调大，截完再恢复。相关分辨率参数定义在 Scene 源码 中，改完记得还原，避免影响后续交互。

录一段视频：30fps 帧率和分辨率怎么配

录像走的是MediaRecorder路线：它直接录 canvas 的实时帧流，浏览器负责编码，你不用自己逐帧抓图。

参数建议从两个问题入手：

• 帧率：场景每秒渲染多少帧，视频就多少帧。建议锁在 30fps，流畅度和文件体积的平衡点；想更顺滑再上 60fps，但文件会明显变大。
• 分辨率：先用窗口原始尺寸试录，确认效果后再按交付目标统一调整场景分辨率正式录。

录之前顺手关掉调试叠加层和闪烁的元素，录完得到的 webm/mp4 直接就能发。

导出数据文件：GeoJSON、CZML、KML 三选一

选格式前先问自己三个问题：数据有没有时间属性？要不要给 Google Earth 用？对方系统只认哪种？对照下面的表基本就能定下来。

反向操作同样常用：已有数据源加载进场景后，也可以把场景里的要素反向取回来存盘。拿不准就先选 GeoJSON，兼容性最高，后期转换成本也低。

进阶：脚本批量导出多角度画面

如果一次要交付多张图，比如报告插图或图集，手写点击效率太低。做法是写个循环：依次修改相机位置和朝向，等一两帧渲染稳定，再截图，然后下一个角度。相机沿路径自动飞行时配合同样的截图调用，还能顺手拿到连续的帧。

场景级参数集中在 Scene.js 里维护，包括分辨率、渲染相关开关等。常见套路是：导出前临时改参数，导出完再恢复原状。

导出前检查清单

• 截图前确认所有瓦片与模型加载完毕、动画已定格
• 截图分辨率已调到目标值，截完恢复默认
• 录像帧率设为 30fps，窗口尺寸与交付要求一致
• 数据格式按"是否含时间、是否给 Google Earth"两条标准选定
• 批量导出脚本跑完后，抽查首帧和末帧画面是否正常

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium