企业官网建设流程全解析

CesiumJS 导出实战：截图、场景录像与 KML 数据导出的 3 种做法

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

把 CesiumJS 场景带出浏览器，无非三种结果：CesiumJS 截图存成一张图、Cesium 录影像留下一段视频、数据以 KML/GeoJSON 形式存成文件。这篇文章按“什么时候需要”来讲这三件事各怎么做、会卡在哪儿。KML 导出是内置能力，先说；截图用得最多，放中间；录像要借助浏览器的能力，放最后。

先把实体从项目里带走：KML/KMZ 导出

如果目标是把场景里的实体发给 Google Earth 或 ArcGIS，不用自己写转换工具：CesiumJS 自带 KML 导出接口（exportKml），输入一组实体，返回 KML 或 KMZ 文件。选择 KMZ 打包时，贴图和三維模型可以一起塞进压缩包——仓库示例里就是把一辆奶罐车模型连同贴图打进 KMZ，别人在 Google Earth 里打开就能看到模型。

完整的可运行示例在 packages/sandcastle/gallery/export-kml/，照着看一遍调用方式就清楚了。

三种格式怎么选：

• KML/KMZ：内置路线，适合带实体、模型、贴图的场景，是三种里最省事的；
• GeoJSON：适合纯点线面几何，很多后端和地图工具都认；注意 CesiumJS 没有提供一键 GeoJSON 导出，需要从实体数据自行转换后保存；
• CZML：当数据随时间变化（位置、样式按时间变化）时，CZML 是唯一保住时间维度的格式，同样需要自行转换后保存。

一个容易忽略的细节：广告牌图标本身可以导出成 PNG 图片，再随 KMZ 一起打包，对方打开文件不用再去配图标。

从画布拿到一张清晰的 PNG

CesiumJS 本身没有“截图”按钮，但场景渲染在一块 canvas 上，而 canvas 自带存图方式：调用toDataURL就能得到一段 PNG 的 base64 数据，交给一个链接即可保存。真正要回答的只有两个问题：抓哪一帧、图有多大。

抓哪一帧：刚发起飞行或旋转就调用，拿到的是动画中间帧。稳妥做法是在场景每帧渲染完成后的回调（postRender）里取图，或者等相机动画结束再取。

图有多大：成图的像素数由画布自身像素决定，不是屏幕上的 CSS 尺寸。高分屏上浏览器会按设备像素比放大后备缓冲区；如果为了省性能调低过渲染分辨率，出图也会跟着缩水。

导出的图为什么发虚：先查这两个参数

大多数“图发虚”不是取图方式的问题，而是这两项参数在起作用：

1. 渲染分辨率缩放：如果场景的分辨率缩放被调低来省性能，画布就按缩水后的尺寸渲染，导出的任何图都是那个缩水质感。准备汇报截图前先确认这一项。
2. 窗口尺寸与设备像素比：屏幕上的画布是 1000 像素，后备缓冲区可能是 2000 像素，直接抓缓冲区得到的是 2000 像素的图；反过来，低分辨率缓冲区被 CSS 放大显示时，截图再好看放大也糊。

处理办法一致：导出前把分辨率缩放调回原样，确认窗口尺寸够大，然后取图。

用浏览器两个 API 录 Cesium 场景视频

CesiumJS 自己没有录像能力，但浏览器提供了趁手的工具：对 canvas 调用captureStream得到视频流，再用MediaRecorder把流编码成文件（常见为 WebM）。流程一句话：拿流、开始录、结束调停止、拿到视频文件。

帧率配置上，建议给 captureStream 传一个期望值，动态适中的场景从 30 帧起步；场景基本静止时用 15 帧就够了。

两点注意：录像内容只有画布区域，没有声音、不含周边界面；想录整个窗口连同工具栏，用系统自带录屏更省事。

控制录像体积：三个调节点

一段录像动辄几百兆，体积由三样东西决定，可以按这个顺序收紧：

• 码率：最直接的一档。编码码率减半，文件大约减半。先用中档值试录，看质量再调高或调低；
• 录像帧率：场景实际只有 20 帧，却按 60 帧录，只是把重复帧写进文件白白变大。先看场景实际帧率，录像帧率不要超过它；
• 画布分辨率：画布越小，每帧像素越少。只是内部预览的话，用小的窗口录即可。

三项叠加，体积一般能回到可管理的范围。

下一步可以做什么

想深入看 KML 导出逻辑，源码在 packages/engine/Source/DataSources/exportKml.js；示例则建议把仓库 clone 下来（clone 地址：https://gitcode.com/GitHub_Trending/ce/cesium），打开packages/sandcastle/gallery/export-kml/目录，能看到回调里如何把模型和贴图嵌进 KMZ。

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