CesiumJS 3 大导出功能实战：截图、录像与数据导出完整指南

CesiumJS 3 大导出功能实战截图、录像与数据导出完整指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 把 3D 地球渲染进了你的浏览器但画面一关页面就没了——评审要存档、汇报要放演示视频、对接 Google Earth 要 KML 文件。本文教你用 CesiumJS 的 Canvas 截图、MediaRecorder 录像和 GeoJSON / CZML / KML 数据导出这三套方案把只能看的场景变成可交付的成果。能力总览先把三种导出能力放在一起看一屏了解能做什么、怎么做、什么时候用能力实现方式产出典型场景静态截图画布toDataURL导出 PNG一张位图文档配图、成果存档、缺陷留证场景录像canvas.captureStream MediaRecorderWebM 等视频相机飞行、时间动画演示数据导出GeoJSON / CZML / KML地理数据文件跨平台协作、第三方工具交付批量截图脚本驱动相机 循环截图一组位图多角度自动出图静态存档一键把场景存成图片最直接的诉求是把当前画面存下来。CesiumJS 的场景渲染在canvas元素上所以截图的核心就是画布的toDataURL方法——项目自带示例 packages/sandcastle/gallery/fog/main.js 里就有一行可以直接抄const dataUrl viewer.canvas.toDataURL(image/png);拿到这个 Data URL 之后页面内展示直接塞进一个img的src下载为文件用 Blob 配合临时a download触发浏览器保存export-kml 示例 里的downloadBlob函数就是这个套路。注意这条路线的成败手在preserveDrawingBuffer后面避坑一节细讲。动态演示把动画过程录成视频截图只能定格你的相机飞行、轨迹播放、时间轴动画是动的需要录像。CesiumJS 场景本身没有内置录像 API但浏览器提供了标准组合viewer.canvas.captureStream(fps)把画布输出变成 MediaStream用MediaRecorder对 MediaStream 实时编码监听dataavailable收集分片stop时拼成文件。参数怎么定帧率30fps 是文件体积和流畅度的平衡点硬件吃紧再降分辨率跟随画布实际像素CSS 尺寸 ×devicePixelRatio移动端注意别按高分屏硬录 4K。数据交付把地理要素变成标准文件截图和录像是存画面数据导出是存内容。你场景里的实体点、线、面、模型在 CesiumJS 中由数据源承载对应三种主流格式源码位于 packages/engine/Source/DataSources/GeoJSON点线面几何要素的通用格式最轻量CZML在 GeoJSON 能力上多了时间动态属性轨迹、时变样式回放信息不丢KML与 Google Earth 等第三方工具兼容最好。KML 导出有现成 APICesium.exportKml官方 export-kml 示例 完整演示了流程加载 CZML 数据源 → 传入实体集合调用exportKml→ 拿到 Blob 触发下载。它还展示了进阶玩法——通过modelCallback把 3D 模型和纹理一起打包进 KMZkmz: true时导出的是自包含压缩包交付出去开箱即用。选型指南什么场景选哪种拿不准选哪个时按交付给谁、交付什么倒推你的场景推荐方案理由成果归档、文档配图截图一张 PNG 够用零依赖汇报演示、动态汇报录像相机移动和时间动画只有视频能表达对接 Google Earth / 第三方 GISKML / KMZ兼容性最好exportKml直接可用需要保留时间动态数据CZML轨迹、时变样式完整保存轻量级几何交换GeoJSON格式最通用体积最小多角度批量出图截图脚本脚本控制相机循环渲染后逐张导出原则一句话给人看选图像截图/录像给工具用选数据KML/CZML/GeoJSON。避坑与调优截图黑屏先开preserveDrawingBuffer。这是最典型的坑。WebGL 默认在绘制完成后清空画布缓冲区此时调toDataURL拿到的是一片黑。创建 Viewer 时要显式传new Cesium.Viewer(cesiumContainer, { contextOptions: { webgl: { preserveDrawingBuffer: true } }, });该参数定义在 packages/engine/Source/Renderer/Context.js默认false。代价是部分平台可能有轻微性能开销按需开启即可。截图时机等资源加载完。瓦片、影像、模型都是异步的打开页面就截会截到半成品。稳妥做法先监听scene.readyEvent再用Cesium.RequestAnimationFrame等一两帧稳定最后再toDataURL。录像参数取舍30fps 起步场景有阴影、粒子、高分辨率纹理时把帧率降到 24fps体积和发热都可控。分辨率不要脱离画布实际像素脑补先看canvas.width再定。批量脚本节奏相机飞行是异步的每个机位要等flyTo完成 渲染稳定再截别在requestAnimationFrame里抢跑否则出图会糊。自定义导出配置分辨率、像素比、渲染相关选项都集中在 packages/engine/Source/Scene/Scene.js需要按项目调画质时从这里入手。收尾一句话回扣截图存档、录像演示、数据交付——CesiumJS 的三套导出方案覆盖了 3D 场景从看到用的最后一公里。下一步建议打开 export-kml 示例 和 fog 截图示例 通读一遍再按自己的项目搭一条截图 数据导出的最小流水线。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考