企业官网建设流程全解析

CesiumJS 导出快速上手:截图、录像、数据三种交付方式

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

你调好的 3D 场景,可以变成三种能交付的东西:一张图片、一段能播放的视频、一份能进其他系统的地理要素文件。 本文按 CesiumJS 导出的实际使用顺序,把三者的选择逻辑、常用参数和坑一次讲清,看完就能直接上手。 整个过程只需要浏览器和项目自带文件,不用额外搭环境。

🧭 先想清楚要导出什么:三种交付物各适合什么场景

动手前先选对交付物,选错方式比参数没调好更浪费时间:

• 一张图:放进报告、邮件附图、汇报配图,选截图。
• 一段运动画面:相机飞越、实体动画、时间动态效果,选录像。
• 可复用的要素信息:坐标、属性、时间序列要进别的系统或项目下一版,选数据文件。

很多导出问题,本质是交付物选错了:只想分享场景外观,一张图就够;想把数据带出去,就别录十分钟视频。

📸 截图:把当前视角存成图片

原理一句带过:场景每帧都画在画布上,想存图时调用toDataURL把当前帧转成 PNG 数据字符串,再落成文件即可,不需要手动配置。

截图前必做的一件事

等场景加载完再拍。瓦片铺满、模型贴图显示出来、动画跑到目标帧,再动手,不然很容易拿到一帧半加载的画面。

质量上盯三点:

1. 分辨率跟着画布走:画布拉满整窗,图就大;想要小图,先缩小画布尺寸再截。
2. 视角定好再截:截图只认当前帧,构图事后补不了,先转好相机再导出。
3. 文件名带信息:场景名、视角编号、日期一起写上,多视角时编号补零,方便排序。

底层渲染与截图的入口在 Scene.js,想改截图行为可以从这里读起。

🎬 录像:把相机运动存成视频

录像的实质是把逐帧变化的画面交给浏览器的MediaRecorder编码成视频文件。录进视频的就是屏幕上的内容:相机运动、实体动画、时间动态效果会一起被记下来。

录像帧率怎么定

• 帧率先取 30,体积和流畅度最稳,多数飞越、演示都够用。
• 画面变化慢(如缓慢平移),24 也能用,体积更小。
• 相机运动快、画面刷新猛,试 60;嫌文件大再降回 30。

分辨率按投放位置定:网页里用就匹配画布实际尺寸,汇报材料里用,1080p 足够。体积大致等于时长、帧率、分辨率三者相乘,任意两项让步,第三项就能省。

两个实用点:

• 长镜头分段录:整条飞越拆成几段分别导出,比一次录完翻车后重录省事。
• 卡顿先降分辨率:机器编码能力有限,先降分辨率,再动帧率。

🗂 数据导出:把地理要素带出项目

这里导出的不是渲染出来的像素,而是项目里存着的要素信息:坐标、属性字段、样式、时间序列。这是数据导出和截图、录像的根本区别。

三种数据格式怎么选

• GeoJSON:点、线、面等几何要素,通用度最高;只要"几何加属性",优先它。
• CZML:数据带时间维度(位置随时变、实体做动画),选这个。
• KML:要拿给 Google Earth 或第三方工具打开,优先这个,兼容性有保障。

结构清晰的数据,先定格式再导出,别想着"先倒出来再改",格式转换的成本通常比认真导一次更高。这类数据源的实现可以看 KmlDataSource.js,同一目录下还有 GeoJSON 和 CZML 对应的处理文件。

⚡ 效率与避坑:批量、时机、体积一起算

• 批量截图靠流程,不靠按钮:用脚本让相机依次飞位,每个视角等画面稳定再截一张;文件名按"场景 + 视角号 + 日期"来,编号补零,避免覆盖和乱序。
• 时机统一等加载:场景没加载完、时钟没到目标时间,都不动手;等十秒,比重导一次便宜得多。
• 体积控制的顺序:截图控画布尺寸,导出后再压缩;录像先降分辨率再降帧率;数据先删字段,只留要用的。
• 正式导出前先试跑:用小尺寸、短时长出一次样,确认构图和格式没问题,再跑正式版本。

记住三句话就够了:

1. 先定交付物:单帧截图,运动录像,可复用要素走文件。
2. 场景加载完再导出,文件统一带上"场景 + 视角 + 日期"。
3. 体积大就先降分辨率和帧率,别急着换格式。

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