尧图网页设计 
CesiumJS 三维场景导出三件套截图、录屏与数据导出完整指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium用 CesiumJS 搭好三维项目之后成果怎么带出去是绕不开的一步。CesiumJS 的导出能力可以拆成三件事把当前三维场景截图存成 PNG、把相机运动和实体动画录成视频、把场景里的实体转成 CZML / KML / GeoJSON 等可迁移格式。下面按方向逐个讲每个方向对应哪些 API、要改哪些参数。为什么先要把三维场景成果导出来截图解决的是定格问题汇报材料、产品文档里需要一张当前视角的画面不用等用户来现场复现。录屏解决的是过程问题相机绕楼飞一圈、实体随时间变化这类内容单张图表达不了得用一段视频。数据导出解决的是迁移问题你建好的实体和属性可能还要在 Google Earth、其他 GIS 工具或另一套前端里继续用光有画面不够得把数据本身带走。静态画面捕获用 scene.canvas 拿到一张 PNG三维场景最终都画在一个 canvas 上引擎通过scene.canvas属性把它暴露出来定义见 packages/engine/Source/Scene/Scene.js。截图就是在这个 canvas 上调用浏览器自带的导出方法输出的是当前帧的渲染结果const canvas viewer.scene.canvas; canvas.toBlob((blob) { // 把 blob 保存为 .png 文件即可 });注意调用时机要在当前帧渲染完成之后立刻取如果隔了帧再取WebGL 缓冲区可能已被清空拿到的是空白图。怎么控制截图分辨率输出像素尺寸由canvas.width/canvas.height决定而这两个值受页面 CSS 尺寸、devicePixelRatio和viewer.resolutionScale共同影响。想让截图更清晰调高resolutionScale后再取图即可不需要额外配置。批量截图的相机参数怎么设多角度截图的本质是循环切视角 每帧渲染完再取图。每次用camera.setView或camera.flyTo设置新的destination和orientation等下一帧渲染完成再调用toBlob把相机参数写成数组逐项执行就行。路径类的验证数据可以参考仓库里的 Apps/SampleData/gpx/simple.gpx。动态过程录制把渲染流喂给 MediaRecorder引擎没有内置录制按钮标准做法是浏览器原生 API 的组合canvas.captureStream(30)把 canvas 的渲染输出变成一个实时流帧率参数直接决定视频帧率然后交给MediaRecorder编码const stream viewer.scene.canvas.captureStream(30); const rec new MediaRecorder(stream, { mimeType: video/webm }); rec.start(); // 结束后 rec.stop()ondataavailable 里拿到视频 Blob录之前让场景动起来推进viewer.clock、播放实体时间属性或者用相机路径飞行动画否则录出来就是一张静帧。30fps 是文件大小和流畅度的常用折中1080p 下再高收益就不明显了。数据格式迁移把实体导出成 CZML、KML、GeoJSON场景里的数据都挂在 DataSource 上导出就是把 DataSource 里的实体序列化回去。CesiumJS 里对应的源码都在 packages/engine/Source/DataSources/ 目录下exportKml.js实体转 KML打包成 KMZ 时内部用 zip.js 压缩CzmlDataSource.jsCZML 的加载与序列化带时间属性GeoJsonDataSource.jsGeoJSON 的读写KmlDataSource.jsKML/KMZ 的解析官方交互示例 packages/sandcastle/gallery/export-kml 演示了把当前视图实体导出并下载完整流程打开照着改最快。三种导出格式怎么选只导静态的点、线、面用 GeoJSON结构最简单、工具兼容性最广。实体带时间动态位置随时间变化、按时间显隐选 CZML它是为时间动态数据设计的。目标工具是 Google Earth 这类桌面 GIS选 KML/KMZexportKml.js会把实体属性尽量映射到 KML 元素。输出质量与性能的权衡截图是一次性开销成本在渲染那一帧本身录屏是持续开销captureStream的帧率参数越高每帧编码压力越大叠加 WebGL 渲染可能把中端设备的主线程占满。viewer.resolutionScale同时影响截图清晰度和录屏清晰度降到 0.75 左右画面细节损失有限GPU 开销下降明显长录屏场景值得先试这一项。MediaRecorder的videoBitsPerSecond控制码率相机快速运动、场景细节多时适当调高避免画面糊成一片静态背景为主时可以调低压体积。怎么控制输出分辨率截图和录屏共用同一套像素来源所以只有一处开关改viewer.resolutionScale或在初始化viewer时指定 canvas 尺寸。改完等一帧生效再开始截图或captureStream。高频问题速答截图全黑或空白取图时机晚于渲染帧缓冲区已被清空。在渲染完成回调里如scene.postRender事件内取图。截图分辨率和页面显示不一致输出尺寸以canvas.width/height为准它等于 CSS 尺寸乘以devicePixelRatio再乘以resolutionScale逐项核对即可。录出来的视频只能是 webmMediaRecorder的常见容器就是 webm需要 mp4 时再做一次转封装引擎侧不处理。时间动态数据导成 KML 后属性丢了时间采样属性的 KML 映射有限制这类数据优先走 CZML信息保留最完整。这套流程适合三类场景项目验收和汇报需要归档一张或多张标准视角截图要展示相机运动或时间动态效果需要一段可分发的视频实体数据要交给 Google Earth 或其他 GIS 工具继续处理。三者互不依赖按需取用就行。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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 的导出能力可以拆成三件事把当前三维场景截图存成 PNG、把相机运动和实体动画录成视频、把场景里的实体转成 CZML / KML / GeoJSON 等可迁移格式。下面按方向逐个讲每个方向对应哪些 API、要改哪些参数。为什么先要把三维场景成果导出来截图解决的是定格问题汇报材料、产品文档里需要一张当前视角的画面不用等用户来现场复现。录屏解决的是过程问题相机绕楼飞一圈、实体随时间变化这类内容单张图表达不了得用一段视频。数据导出解决的是迁移问题你建好的实体和属性可能还要在 Google Earth、其他 GIS 工具或另一套前端里继续用光有画面不够得把数据本身带走。静态画面捕获用 scene.canvas 拿到一张 PNG三维场景最终都画在一个 canvas 上引擎通过scene.canvas属性把它暴露出来定义见 packages/engine/Source/Scene/Scene.js。截图就是在这个 canvas 上调用浏览器自带的导出方法输出的是当前帧的渲染结果const canvas viewer.scene.canvas; canvas.toBlob((blob) { // 把 blob 保存为 .png 文件即可 });注意调用时机要在当前帧渲染完成之后立刻取如果隔了帧再取WebGL 缓冲区可能已被清空拿到的是空白图。怎么控制截图分辨率输出像素尺寸由canvas.width/canvas.height决定而这两个值受页面 CSS 尺寸、devicePixelRatio和viewer.resolutionScale共同影响。想让截图更清晰调高resolutionScale后再取图即可不需要额外配置。批量截图的相机参数怎么设多角度截图的本质是循环切视角 每帧渲染完再取图。每次用camera.setView或camera.flyTo设置新的destination和orientation等下一帧渲染完成再调用toBlob把相机参数写成数组逐项执行就行。路径类的验证数据可以参考仓库里的 Apps/SampleData/gpx/simple.gpx。动态过程录制把渲染流喂给 MediaRecorder引擎没有内置录制按钮标准做法是浏览器原生 API 的组合canvas.captureStream(30)把 canvas 的渲染输出变成一个实时流帧率参数直接决定视频帧率然后交给MediaRecorder编码const stream viewer.scene.canvas.captureStream(30); const rec new MediaRecorder(stream, { mimeType: video/webm }); rec.start(); // 结束后 rec.stop()ondataavailable 里拿到视频 Blob录之前让场景动起来推进viewer.clock、播放实体时间属性或者用相机路径飞行动画否则录出来就是一张静帧。30fps 是文件大小和流畅度的常用折中1080p 下再高收益就不明显了。数据格式迁移把实体导出成 CZML、KML、GeoJSON场景里的数据都挂在 DataSource 上导出就是把 DataSource 里的实体序列化回去。CesiumJS 里对应的源码都在 packages/engine/Source/DataSources/ 目录下exportKml.js实体转 KML打包成 KMZ 时内部用 zip.js 压缩CzmlDataSource.jsCZML 的加载与序列化带时间属性GeoJsonDataSource.jsGeoJSON 的读写KmlDataSource.jsKML/KMZ 的解析官方交互示例 packages/sandcastle/gallery/export-kml 演示了把当前视图实体导出并下载完整流程打开照着改最快。三种导出格式怎么选只导静态的点、线、面用 GeoJSON结构最简单、工具兼容性最广。实体带时间动态位置随时间变化、按时间显隐选 CZML它是为时间动态数据设计的。目标工具是 Google Earth 这类桌面 GIS选 KML/KMZexportKml.js会把实体属性尽量映射到 KML 元素。输出质量与性能的权衡截图是一次性开销成本在渲染那一帧本身录屏是持续开销captureStream的帧率参数越高每帧编码压力越大叠加 WebGL 渲染可能把中端设备的主线程占满。viewer.resolutionScale同时影响截图清晰度和录屏清晰度降到 0.75 左右画面细节损失有限GPU 开销下降明显长录屏场景值得先试这一项。MediaRecorder的videoBitsPerSecond控制码率相机快速运动、场景细节多时适当调高避免画面糊成一片静态背景为主时可以调低压体积。怎么控制输出分辨率截图和录屏共用同一套像素来源所以只有一处开关改viewer.resolutionScale或在初始化viewer时指定 canvas 尺寸。改完等一帧生效再开始截图或captureStream。高频问题速答截图全黑或空白取图时机晚于渲染帧缓冲区已被清空。在渲染完成回调里如scene.postRender事件内取图。截图分辨率和页面显示不一致输出尺寸以canvas.width/height为准它等于 CSS 尺寸乘以devicePixelRatio再乘以resolutionScale逐项核对即可。录出来的视频只能是 webmMediaRecorder的常见容器就是 webm需要 mp4 时再做一次转封装引擎侧不处理。时间动态数据导成 KML 后属性丢了时间采样属性的 KML 映射有限制这类数据优先走 CZML信息保留最完整。这套流程适合三类场景项目验收和汇报需要归档一张或多张标准视角截图要展示相机运动或时间动态效果需要一段可分发的视频实体数据要交给 Google Earth 或其他 GIS 工具继续处理。三者互不依赖按需取用就行。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考