企业官网建设流程全解析

CesiumJS 导出指南：3 种方式保存 3D 场景为图片、视频和数据

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

交付一个 3D 地球项目，经常要把当前状态存下来：截取一张视角图、录下相机运动的过程、把地图上的数据写成文件。CesiumJS 的截图、录像、数据导出三类导出能力，正好对应这三个用途，下面逐个讲清楚。

📋 能力速览：CesiumJS 截图、录像、数据导出

三者的入口都在同一个 Scene：画面走 canvas，数据走数据源。理解了这一点，后面三个场景的写法就通了。

📷 场景一：定格视角，截一张能用的图

截图前的两个前置条件

等待渲染完成。默认连续渲染模式下，画面每帧自动更新；但如果你为性能开启了scene.requestRenderMode，canvas 只在显式请求时才出新帧。瓦片还在加载、或者画面还停在旧帧时截，得到的就是一张残图。稳妥的做法是监听scene.postRender事件，在帧真正绘制完之后取像素。

相机到位。调用camera.flyTo之后立刻截图，截到的是飞行途中的中间帧。需要特定视角时，等camera.moveEnd事件触发再导出。

从 Canvas 到图片文件：画面数据怎么落地

渲染结果就在scene.canvas这个 WebGL canvas 上。toDataURL("image/png")返回 base64 data URL，适合直接预览或上传；要控制文件大小，用canvas.toBlob得到 PNG 二进制。注意 data URL 比原始文件大约大三分之一，大图优先用 Blob。

const url = scene.canvas.toDataURL("image/png");

🎬 场景二：留住过程，录一段动态

帧率与分辨率的取值建议

帧率建议从30fps起步：相机飞越足够流畅，10 秒片段体积也可控。如果场景较重（瓦片多、开阴影和后处理），GPU 扛不住 30fps，录出来会卡，这时降到24fps或先减轻场景。分辨率不需要单独设置——它由 canvas 尺寸决定，也就是容器大小乘以resolutionScale，录制前先把容器尺寸定好。

相机运动与实体动画：哪些能录、哪些录不了

录像采集的是 canvas 像素流，画面上出现的都能录：相机飞越、实体沿路径运动、时钟驱动的时间动态更新，全部包含。录不到的是 canvas 之外的内容，比如 HTML overlay、时间轴控件这类 Widget 界面。另外注意：CesiumJS 本身没有内置录像 API，需要浏览器配合canvas.captureStream(30)加MediaRecorder编码，输出格式因浏览器而异，Chrome 默认是 WebM。

🗂️ 场景三：带走数据，按用途选格式

GeoJSON / CZML / KML 的适用边界

• GeoJSON：静态几何与属性（点、线、面），生态最广，几乎任何 GIS 工具都能读。从实体导出会丢掉时间动态属性，只留当前状态。
• CZML：可看作带时间的 GeoJSON 超集，时间区间、逐样本变化是一等公民。要归档"什么时间发生了什么"，只有它选。
• KML：面向 Google Earth 生态，支持样式和有限的时间段。CesiumJS 提供了Cesium.exportKml({ entities, kmz: true })，可把实体集合导出为 KML/KMZ，模型和贴图能一并打进 KMZ。

三种后续用途对号入座

• 给 WebGIS 前端、BI 系统消费：选GeoJSON。
• 要在另一个 CesiumJS 应用里、或需要时间轴回放：选CZML。
• 对方用 Google Earth 预览，或企业 GIS 流程：选KML/KMZ。

❓ 高频问题与避坑

截图发黑或画面不全？先查requestRenderMode：该模式下不调scene.requestRender()就不会渲染新帧，要等帧画完再取像素。其次确认相机已到位，flyTo后立刻导出拿到的是飞行中的画面。

为什么找不到 CesiumJS 自带的录像 API？录像依赖浏览器能力：canvas.captureStream(30)拿到流，MediaRecorder编码，输出多为 WebM。需要 MP4 时用 ffmpeg 之类的工具转码。

视频卡顿是帧率参数的问题吗？不是。实际录制帧率受渲染帧率限制，场景复杂时低于 30fps，视频自然卡。降帧率或先关阴影、后处理，比调参数有效。

时间动态属性导出后还在吗？CZML 完整保留时间区间和逐样本数据；GeoJSON 与 KML 只导出静态状态，KML 的时间支持有限。需要回放选 CZML，只要几何快照选 GeoJSON。

截图、录像、数据导出共用同一套地基：canvas 存画面，数据源存数据，按用途选对格式，交付链路就完整了。源码可看 Scene 与 canvas 渲染（Scene.js） 和 数据源加载与导出（DataSources/），KML 导出示例（export-kml） 里有完整的导出流程参考。

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