CesiumJS 导出指南3 种方式保存 3D 场景为图片、视频和数据【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium交付一个 3D 地球项目经常要把当前状态存下来截取一张视角图、录下相机运动的过程、把地图上的数据写成文件。CesiumJS 的截图、录像、数据导出三类导出能力正好对应这三个用途下面逐个讲清楚。 能力速览CesiumJS 截图、录像、数据导出能力输出格式典型用途关键 API截图PNGdata URL 或 Blob存档文档、对比渲染效果scene.canvas.toDataURL()录像WebM浏览器编码保存相机动画、演示过程canvas.captureStream(30)MediaRecorder数据导出GeoJSON/CZML/KML与 GIS 工具互通、归档时间动态数据Cesium.exportKml()、GeoJsonDataSource.toGeoJson()三者的入口都在同一个 Scene画面走 canvas数据走数据源。理解了这一点后面三个场景的写法就通了。 场景一定格视角截一张能用的图截图前的两个前置条件等待渲染完成。默认连续渲染模式下画面每帧自动更新但如果你为性能开启了scene.requestRenderModecanvas 只在显式请求时才出新帧。瓦片还在加载、或者画面还停在旧帧时截得到的就是一张残图。稳妥的做法是监听scene.postRender事件在帧真正绘制完之后取像素。相机到位。调用camera.flyTo之后立刻截图截到的是飞行途中的中间帧。需要特定视角时等camera.moveEnd事件触发再导出。从 Canvas 到图片文件画面数据怎么落地渲染结果就在scene.canvas这个 WebGL canvas 上。toDataURL(image/png)返回 base64 data URL适合直接预览或上传要控制文件大小用canvas.toBlob得到 PNG 二进制。注意 data URL 比原始文件大约大三分之一大图优先用 Blob。const url scene.canvas.toDataURL(image/png); 场景二留住过程录一段动态帧率与分辨率的取值建议帧率建议从30fps起步相机飞越足够流畅10 秒片段体积也可控。如果场景较重瓦片多、开阴影和后处理GPU 扛不住 30fps录出来会卡这时降到24fps或先减轻场景。分辨率不需要单独设置——它由 canvas 尺寸决定也就是容器大小乘以resolutionScale录制前先把容器尺寸定好。相机运动与实体动画哪些能录、哪些录不了录像采集的是 canvas 像素流画面上出现的都能录相机飞越、实体沿路径运动、时钟驱动的时间动态更新全部包含。录不到的是 canvas 之外的内容比如 HTML overlay、时间轴控件这类 Widget 界面。另外注意CesiumJS 本身没有内置录像 API需要浏览器配合canvas.captureStream(30)加MediaRecorder编码输出格式因浏览器而异Chrome 默认是 WebM。️ 场景三带走数据按用途选格式GeoJSON / CZML / KML 的适用边界GeoJSON静态几何与属性点、线、面生态最广几乎任何 GIS 工具都能读。从实体导出会丢掉时间动态属性只留当前状态。CZML可看作带时间的 GeoJSON 超集时间区间、逐样本变化是一等公民。要归档什么时间发生了什么只有它选。KML面向 Google Earth 生态支持样式和有限的时间段。CesiumJS 提供了Cesium.exportKml({ entities, kmz: true })可把实体集合导出为 KML/KMZ模型和贴图能一并打进 KMZ。三种后续用途对号入座给 WebGIS 前端、BI 系统消费选GeoJSON。要在另一个 CesiumJS 应用里、或需要时间轴回放选CZML。对方用 Google Earth 预览或企业 GIS 流程选KML/KMZ。❓ 高频问题与避坑截图发黑或画面不全先查requestRenderMode该模式下不调scene.requestRender()就不会渲染新帧要等帧画完再取像素。其次确认相机已到位flyTo后立刻导出拿到的是飞行中的画面。为什么找不到 CesiumJS 自带的录像 API录像依赖浏览器能力canvas.captureStream(30)拿到流MediaRecorder编码输出多为 WebM。需要 MP4 时用 ffmpeg 之类的工具转码。视频卡顿是帧率参数的问题吗不是。实际录制帧率受渲染帧率限制场景复杂时低于 30fps视频自然卡。降帧率或先关阴影、后处理比调参数有效。时间动态属性导出后还在吗CZML 完整保留时间区间和逐样本数据GeoJSON 与 KML 只导出静态状态KML 的时间支持有限。需要回放选 CZML只要几何快照选 GeoJSON。截图、录像、数据导出共用同一套地基canvas 存画面数据源存数据按用途选对格式交付链路就完整了。源码可看 Scene 与 canvas 渲染Scene.js 和 数据源加载与导出DataSources/KML 导出示例export-kml 里有完整的导出流程参考。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
CesiumJS 导出指南：3 种方式保存 3D 场景为图片、视频和数据
CesiumJS 导出指南3 种方式保存 3D 场景为图片、视频和数据【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium交付一个 3D 地球项目经常要把当前状态存下来截取一张视角图、录下相机运动的过程、把地图上的数据写成文件。CesiumJS 的截图、录像、数据导出三类导出能力正好对应这三个用途下面逐个讲清楚。 能力速览CesiumJS 截图、录像、数据导出能力输出格式典型用途关键 API截图PNGdata URL 或 Blob存档文档、对比渲染效果scene.canvas.toDataURL()录像WebM浏览器编码保存相机动画、演示过程canvas.captureStream(30)MediaRecorder数据导出GeoJSON/CZML/KML与 GIS 工具互通、归档时间动态数据Cesium.exportKml()、GeoJsonDataSource.toGeoJson()三者的入口都在同一个 Scene画面走 canvas数据走数据源。理解了这一点后面三个场景的写法就通了。 场景一定格视角截一张能用的图截图前的两个前置条件等待渲染完成。默认连续渲染模式下画面每帧自动更新但如果你为性能开启了scene.requestRenderModecanvas 只在显式请求时才出新帧。瓦片还在加载、或者画面还停在旧帧时截得到的就是一张残图。稳妥的做法是监听scene.postRender事件在帧真正绘制完之后取像素。相机到位。调用camera.flyTo之后立刻截图截到的是飞行途中的中间帧。需要特定视角时等camera.moveEnd事件触发再导出。从 Canvas 到图片文件画面数据怎么落地渲染结果就在scene.canvas这个 WebGL canvas 上。toDataURL(image/png)返回 base64 data URL适合直接预览或上传要控制文件大小用canvas.toBlob得到 PNG 二进制。注意 data URL 比原始文件大约大三分之一大图优先用 Blob。const url scene.canvas.toDataURL(image/png); 场景二留住过程录一段动态帧率与分辨率的取值建议帧率建议从30fps起步相机飞越足够流畅10 秒片段体积也可控。如果场景较重瓦片多、开阴影和后处理GPU 扛不住 30fps录出来会卡这时降到24fps或先减轻场景。分辨率不需要单独设置——它由 canvas 尺寸决定也就是容器大小乘以resolutionScale录制前先把容器尺寸定好。相机运动与实体动画哪些能录、哪些录不了录像采集的是 canvas 像素流画面上出现的都能录相机飞越、实体沿路径运动、时钟驱动的时间动态更新全部包含。录不到的是 canvas 之外的内容比如 HTML overlay、时间轴控件这类 Widget 界面。另外注意CesiumJS 本身没有内置录像 API需要浏览器配合canvas.captureStream(30)加MediaRecorder编码输出格式因浏览器而异Chrome 默认是 WebM。️ 场景三带走数据按用途选格式GeoJSON / CZML / KML 的适用边界GeoJSON静态几何与属性点、线、面生态最广几乎任何 GIS 工具都能读。从实体导出会丢掉时间动态属性只留当前状态。CZML可看作带时间的 GeoJSON 超集时间区间、逐样本变化是一等公民。要归档什么时间发生了什么只有它选。KML面向 Google Earth 生态支持样式和有限的时间段。CesiumJS 提供了Cesium.exportKml({ entities, kmz: true })可把实体集合导出为 KML/KMZ模型和贴图能一并打进 KMZ。三种后续用途对号入座给 WebGIS 前端、BI 系统消费选GeoJSON。要在另一个 CesiumJS 应用里、或需要时间轴回放选CZML。对方用 Google Earth 预览或企业 GIS 流程选KML/KMZ。❓ 高频问题与避坑截图发黑或画面不全先查requestRenderMode该模式下不调scene.requestRender()就不会渲染新帧要等帧画完再取像素。其次确认相机已到位flyTo后立刻导出拿到的是飞行中的画面。为什么找不到 CesiumJS 自带的录像 API录像依赖浏览器能力canvas.captureStream(30)拿到流MediaRecorder编码输出多为 WebM。需要 MP4 时用 ffmpeg 之类的工具转码。视频卡顿是帧率参数的问题吗不是。实际录制帧率受渲染帧率限制场景复杂时低于 30fps视频自然卡。降帧率或先关阴影、后处理比调参数有效。时间动态属性导出后还在吗CZML 完整保留时间区间和逐样本数据GeoJSON 与 KML 只导出静态状态KML 的时间支持有限。需要回放选 CZML只要几何快照选 GeoJSON。截图、录像、数据导出共用同一套地基canvas 存画面数据源存数据按用途选对格式交付链路就完整了。源码可看 Scene 与 canvas 渲染Scene.js 和 数据源加载与导出DataSources/KML 导出示例export-kml 里有完整的导出流程参考。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
)
