ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

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

如何把 CesiumJS 3D 场景变成图、视频和数据文件:完整导出实操 如何把 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点、线、面等静态几何通用交换最容易被第三方工具接受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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进