CesiumJS 导出：从场景截图到数据导出的保姆级教程

CesiumJS 导出：从场景截图到数据导出的保姆级教程

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

你用 CesiumJS 搭好的三维场景，关浏览器就没了。这篇讲清 CesiumJS 导出的两条路：场景截图和 KML 数据导出，看完你能把当前视角存成 PNG，把场景数据交付给 Google Earth。

想把场景放进汇报，总不能只截个屏吧？

你八成遇到过这两种情况：演示时的三维城市视角刚调好，一关浏览器素材就没了；合作方要场景里的实体数据，可他们只用 Google Earth，读不了你的源数据。CesiumJS 导出解决的就是这两类问题：一是把当前视角存成 PNG 图片，二是把场景实体变成 KML 或 KMZ 文件（KMZ 是带附件压缩成单包的 KML）。两者都是引擎自带能力，不用装第三方库。

方向明确了，先出一张图。

📸 3 分钟出第一张：CesiumJS 导出快速跑通

存档当前视角，第一步做什么？

截图就是画布元素（页面渲染的容器）导一张图，6 行代码：

const viewer = new Cesium.Viewer("cesiumContainer"); viewer.scene.render(); const a = document.createElement("a"); a.href = viewer.canvas.toDataURL("image/png"); a.download = "cesium-view.png"; a.click();

跑完就能看到 cesium-view.png 落在下载目录，画面就是画布里当前的三维地球视角，所见即所得：

图存好了，接下来看怎么把数据交给对方。

CesiumJS KML 导出，这 4 个参数必须调对

调用 Cesium.exportKml 之前，参数该怎么调？真正要盯的只有 4 个：

参数理顺了，再看看还能玩出什么花样。

进阶组合：多角度批量截图与模型 KMZ 交付

一张图不够用，还有两种玩法。

多角度批量截图

每次拍照前先用viewer.camera.setView把相机转到预设方位，等一帧渲染完成再 toDataURL，循环即可。俯视、斜视、特写，5 个角度出 5 张图，全程脚本完成。适合做汇报、交付需要多角度素材的人。

把三维模型装进 KMZ

KML 不认识 glTF，需要在 modelCallback 里返回一个 Collada（Google Earth 认的三维模型格式）路径，把模型和纹理的 Blob 塞进 externalFiles，引擎会自动打包进 KMZ，官方示例 export-kml 里就有可跑通的 demo：

适合需要把带模型的场景交付给 Google Earth 用户的人。

图和文件都齐了，但有几个地方最容易翻车。

做 CesiumJS 导出的人踩过的坑，替你排好了

1. 截图是空白图 → 首帧没渲染完就调了 toDataURL → 截图前先调 render()，或等场景加载完成。
2. 报 "entities is required" → 没传 entities 参数 → 传对应数据源的集合，如 viewer.dataSources[0].entities。
3. 场景里有模型就抛异常 → KML 不支持 glTF 且未传 modelCallback → 回调里返回 .dae 路径并嵌入模型文件。
4. 时变轨迹导出后变成一个静态点 → 时变属性只按 options.time 取值 → 传入合适的 time，或调 sampleDuration 控制采样密度。
5. KMZ 在 Google Earth 打不开 → 模型 href 写成了 glTF 链接 → 换成内嵌在 KMZ 里的本地 Collada 文件。

汇报的图、交付的数据，两条路都通了。想弄清哪些实体类型能导出，去看 exportKml 源码，注释里写得很细。

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