CesiumJS导出功能截图、录像、KMZ三种结果一次拿齐【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium做汇报、留证、交接时你常需要把 CesiumJS 场景变成可交付的文件一张当前视角的截图、一段相机飞行录像或一份能塞进 Google Earth 的地理数据。CesiumJS 的导出路径恰好覆盖这三类结果——画面导出走 Canvas 与 MediaRecorder数据导出走内置的Cesium.exportKml全部在浏览器端完成无需服务端。 能力边界总览先分清哪些是库原生提供的、哪些要你自己拼。画面类导出截图/录像依赖 WebGL Canvas 的标准能力数据类导出依赖 Entity 集合KML 序列化在 exportKml.js 里实现。注意Cesium3DTileset、Primitive 这类图层对象不在exportKml的输入范围内。能力输入输出适用场景截图渲染完成的 canvasPNGDataURL 字符串或 Blob汇报配图、问题留证录像场景持续渲染 相机动画WebM 视频文件演示回放、方案汇报KML/KMZ 数据导出dataSource.entities集合.kml文本或.kmz压缩包向 Google Earth、GIS 工具交接实体数据GeoJSON/CZML无原生导出函数需自行序列化JSON 文本矢量分析、时间动态数据存档 最短路径跑通以截图为例从 0 到拿到第一张图只要四步打开 CesiumJS 页面构造 Viewer 时加一行contextOptions: { webgl: { preserveDrawingBuffer: true } }——它告诉 WebGL 每帧渲染后保留画面缓冲否则下一帧会清屏你截到的就是空白。调用viewer.camera.flyTo把相机定位到目标视角并监听viewer.camera.moveEnd等视角稳定。调用截图拿到 PNG 的 DataURLviewer.scene.render(); const dataUrl viewer.canvas.toDataURL(image/png);检查dataUrl是否为非空data:image/png开头的字符串然后用URL.createObjectURL或直接赋给a download落盘。录像同理换掉第 3 步用viewer.canvas.captureStream(30)拿到画面流喂给MediaRecorder即可。数据导出则直接对已加载的 DataSource 调Cesium.exportKml一个示例见下文场景拆解。 按场景拆解用法汇报材料里嵌入当前视角解决什么问题截图要在渲染完成时抓抓到半透明加载帧或空白帧汇报图就废了。具体做法在camera.moveEnd回调里执行scene.render()再调canvas.toDataURL(image/png)把相机停稳和立即抓帧绑在一起。关键参数toDataURL的格式参数固定传image/png因为汇报图需要无损、支持透明底若场景有半透明材质PNG 比 JPEG 少一次色带失真。相机飞行过程的演示录像解决什么问题静态图讲不清相机轨迹和时序需要把flyTo过程录成视频。具体做法调用canvas.captureStream(30)生成 MediaStream再用new MediaRecorder(stream, { mimeType: video/webm })开始录制在相机动画结束后调用recorder.stop()并在ondataavailable里收集 Blob。关键参数帧率建议 30fps再高体积近翻倍肉眼差异很小timeslice不传即可默认按内部缓冲切块避免小文件碎片。实体数据交接给 Google Earth解决什么问题项目里用 Entity 描述的点位、路径、模型要交给第三方 GIS 工具KML/KMZ 是兼容性最高的格式。具体做法加载 DataSource 后调用官方示例同款流程把模型等外部文件打进 KMZ参考 export-kml 沙盒示例const { kmz } await Cesium.exportKml({ entities: dataSource.entities, kmz: true, modelCallback: modelCallback, });关键参数实体里含ModelGraphics时modelCallback是必填的回调要把 glTF 换成 COLLADA.dae路径并把.dae与贴图通过externalFiles挂进 KMZ缺回调会直接抛 RuntimeErrorkmz: true让库用 zip 把 KML 和外部文件打包单文件交付最省事。⚖️ 关键参数与取舍参数建议取值理由副作用preserveDrawingBuffer需要截图/录像就传true关闭时帧渲染完即清屏toDataURL只能拿到空白默认false见 Context.js 的选项说明缓冲常驻显存低端设备内存占用上升长期开着可能轻微拖累帧率captureStream帧率30fps再高体积近翻倍而飞行镜头的肉眼差异很小帧率低于场景实际刷新率时快速转场会有轻微跳帧exportKml的kmz含外部资源时传trueKML 引用本地相对路径对方机器路径对不上就丢图KMZ 单包交付避免此问题压缩打包有耗时实体和纹理多时 Promise 等待变长贴图引用方式小图用 data URI大图走Resource.fetchBlob外挂库里对 data URI 会抓成 Blob 塞进 KMZtexture_${n}.pngdata URI 本身还比二进制大约 33% 体积贴图原样进包KMZ 体积随纹理尺寸线性增长️ 高频坑位与排查现象toDataURL返回的图片是纯黑或纯透明。原因preserveDrawingBuffer为默认false抓帧时缓冲已清。处理构造 Viewer 时开启该选项并务必在camera.moveEnd之后调用scene.render()再截图。现象实体含 3D 模型时exportKml报 RuntimeError。原因库里遇到ModelGraphics但未收到modelCallback直接抛错。处理补上回调返回 COLLADA 相对路径并把模型与贴图文件注册进externalFiles。现象KMZ 导出后体积远超预期几 MB 变成上百 MB。原因billboard 或 label 的贴图是 data URI被整体打包进 KMZ。处理大图改走Resource.fetchBlob外挂引用或先把贴图压缩到实际显示尺寸再导出。现象录像文件播放卡顿、丢帧严重。原因主线程每帧还跑着后处理和复杂材质编码帧跟不上渲染。处理录制前降低场景复杂度关postProcessStages中的增强效果或把渲染分辨率降半再录。 适用与不适用场景适合场景以 Entity 为主、交付目标是图片/视频/KML 类静态文件、且全程可跑在浏览器里的项目。不适合需要导出Cesium3DTileset或 Primitive 图层——exportKml只接受 Entity 集合3D Tiles 的交接要直接拷贝 tileset 资源需要时间动态数据的完整存档——CesiumJS 没有原生 CZML 导出得自己按 CZML 结构序列化 Entity 的时间属性工作量明显大于 KML需要服务端批量出图——浏览器方案受同源与内存限制批量渲染应改用 headless 方案逐视角出图。取舍一句话画面导出用 Canvas 标准 API 最稳数据导出只有 KML 是库内一站式完成的其余格式按目标系统选 GeoJSON 或 CZML 自行组装。CesiumJS 的导出核心就三条线Canvas 出图、MediaRecorder 出片、exportKml出数据。 按先保缓冲、再等视角稳定、最后抓结果的顺序操作三类交付物都能一次拿齐。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考