CesiumJS 导出实战3 个交付卡点的截图、录像与数据落地【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesiumCesiumJS 是一个用 JavaScript 渲染 3D 地球和地图的开源库。你看到的地球、实体、模型全部画在 canvas 元素里数据则挂在 DataSource 的实体模型上。所以 CesiumJS 导出就拆成三件事canvas 怎么办、渲染过程怎么办、数据模型怎么办。这篇文章覆盖三个交付卡点截图模糊、录像文件过大、甲方打不开的格式。 截图出来模糊canvas 分辨率是根因先说结论截图质量由 canvas 物理像素决定。CesiumJS 没有专门的截图 API抓的就是渲染画布本身调用只有一行viewer.scene.canvas.toDataURL(image/png)。模糊常见于两种情况CSS 尺寸大于物理像素没算 pixelRatio低分辨率画布被浏览器拉伸。抓图前用 Scene.js 的 pixelRatio 把导出分辨率钉死。瓦片还在刷新抓图瞬间低清影像正在换片成品一半灰块。等场景稳定再抓判断标准是连续一帧没有新的瓦片加载回调。要批量导多个机位别手点按钮把相机脚本化。先锁定位置与姿态等相机停稳再抓一帧。仓库自带的 e2e 测试就是这么干的用 Playwright 驱动浏览器反复抓同一场景做比对。 录像文件 200M帧率与码率怎么定先澄清事实引擎没有内置录像 API。CesiumJS 渲染到 canvas录像链路要在应用侧搭——用浏览器原生 captureStream API 把画布采成视频流帧率参数写 30再交给 MediaRecorder 编码产出 WebM。文件爆炸的元凶几乎都是码率没管住。调三个参数编码器优先 vp9甲方播放环境挑 h264。同等清晰度比默认设置小得多。码率普通 1080p 场景2M 到 4M 就够。MediaRecorder 默认能到 8M 以上。帧率30fps 是平衡点。相机环绕动画不需要 60fps文件体积直接翻倍。只要关键帧的话还有一条更省的路逐帧写 PNG 序列再用 ffmpeg 拼。磁盘贵一点清晰度可控后期随时重编码。 甲方打不开格式KML、GeoJSON、CZML 各导什么数据落地这块CesiumJS 有内置导出器调用一行Cesium.exportKml({ entities, kmz: true })实现就在 KmlDataSource.js。三种格式三个分工KML / KMZ内置 exportKml能把模型和纹理打进 kmz。仓库 packages/sandcastle/gallery 下的 export-kml 样例正是把 .dae 模型加图片打包进 KMZ。Google Earth 直接打开。GeoJSON点线面这类纯矢量数据。原始数据在你手里就直写 GeoJSON别从场景实体反推。CZML时间动态数据的容器唯一能装下某时刻某物在某处的格式。选择顺序很简单甲方用 Google Earth 选 KMZ用 WebGIS 或 QGIS 选 GeoJSON要交带动画数据选 CZML。下一步动作把 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/11 14:27:58 · 阅读 1.2k 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 是一个用 JavaScript 渲染 3D 地球和地图的开源库。你看到的地球、实体、模型全部画在 canvas 元素里数据则挂在 DataSource 的实体模型上。所以 CesiumJS 导出就拆成三件事canvas 怎么办、渲染过程怎么办、数据模型怎么办。这篇文章覆盖三个交付卡点截图模糊、录像文件过大、甲方打不开的格式。 截图出来模糊canvas 分辨率是根因先说结论截图质量由 canvas 物理像素决定。CesiumJS 没有专门的截图 API抓的就是渲染画布本身调用只有一行viewer.scene.canvas.toDataURL(image/png)。模糊常见于两种情况CSS 尺寸大于物理像素没算 pixelRatio低分辨率画布被浏览器拉伸。抓图前用 Scene.js 的 pixelRatio 把导出分辨率钉死。瓦片还在刷新抓图瞬间低清影像正在换片成品一半灰块。等场景稳定再抓判断标准是连续一帧没有新的瓦片加载回调。要批量导多个机位别手点按钮把相机脚本化。先锁定位置与姿态等相机停稳再抓一帧。仓库自带的 e2e 测试就是这么干的用 Playwright 驱动浏览器反复抓同一场景做比对。 录像文件 200M帧率与码率怎么定先澄清事实引擎没有内置录像 API。CesiumJS 渲染到 canvas录像链路要在应用侧搭——用浏览器原生 captureStream API 把画布采成视频流帧率参数写 30再交给 MediaRecorder 编码产出 WebM。文件爆炸的元凶几乎都是码率没管住。调三个参数编码器优先 vp9甲方播放环境挑 h264。同等清晰度比默认设置小得多。码率普通 1080p 场景2M 到 4M 就够。MediaRecorder 默认能到 8M 以上。帧率30fps 是平衡点。相机环绕动画不需要 60fps文件体积直接翻倍。只要关键帧的话还有一条更省的路逐帧写 PNG 序列再用 ffmpeg 拼。磁盘贵一点清晰度可控后期随时重编码。 甲方打不开格式KML、GeoJSON、CZML 各导什么数据落地这块CesiumJS 有内置导出器调用一行Cesium.exportKml({ entities, kmz: true })实现就在 KmlDataSource.js。三种格式三个分工KML / KMZ内置 exportKml能把模型和纹理打进 kmz。仓库 packages/sandcastle/gallery 下的 export-kml 样例正是把 .dae 模型加图片打包进 KMZ。Google Earth 直接打开。GeoJSON点线面这类纯矢量数据。原始数据在你手里就直写 GeoJSON别从场景实体反推。CZML时间动态数据的容器唯一能装下某时刻某物在某处的格式。选择顺序很简单甲方用 Google Earth 选 KMZ用 WebGIS 或 QGIS 选 GeoJSON要交带动画数据选 CZML。下一步动作把 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考