Cesium实现场景截图

/*** @description： 将地图canvas及上面的entity转换为bolb对象* @param： viewer地图对象
*/
export function captureScreenshot(viewer) {const { when } = Cesium;const deferred = when.defer();const scene = viewer.scene;var removeCallback = scene.postRender.addEventListener(function() {removeCallback();try {const cesiumCanvas = viewer.scene.canvas;// If we're using the splitter, draw the split position as a vertical white line.let canvas = cesiumCanvas;canvas.toBlob(function(blod) {deferred.resolve(blod);}, "image/png");// deferred.resolve(canvas.toDataURL("image/png"));} catch (e) {deferred.reject(e);}}, this);scene.render(viewer.clock.currentTime);return deferred.promise;
}

/*** @description： 将bolb对象导出为图片* @param： blob对象* @param： filename文件名
*/
export function saveAs(blob, filename) {if (blob === null) {return;}if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, filename);} else {const target = document.createElement("a");const body = document.querySelector("body");target.href = window.URL.createObjectURL(blob);target.download = filename;target.style.display = "none";body.appendChild(target);target.click();body.removeChild(target);window.URL.revokeObjectURL(target.href);}
}

调用以上方法实现场景出图

   const $promise = captureScreenshot(viewer);if ($promise) {$promise.then((blob) => {// 获取地图数据blob && saveAs(blob, `${Date.now()}.png`);});}

实现效果：

Cesium实现场景截图相关推荐

Cesium|xt3d 场景工具、测量工具
Cesium|xt3d 场景工具.测量工具效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN">< ...
ARFoundation入门教程U2-AR场景截图截屏
ARFoundation入门教程U2-AR场景截图截屏 <ARFoundation入门教程U1-android权限申请和配置升级>配置了android权限申请,获取权限后使用代码截屏,AR ...
cesium小场景鹰眼地图
一.基本需求由于项目需要,用基于CEIUSM引擎和3DMAX建模搭建一个小区级别的三维场景,在导航时,需要实现鹰眼小地图.一看到鹰眼小地图,我们会很自然地想到用百度地图或者别的什么地图加一个小图标, ...
Cesium 开启场景FPS显示
Viewer.scene.debugShowFramesPerSecond = true
Cesium开发高级篇 | 05场景后期处理
为实现三维模型的更炫.更酷.更美观,Cesium在1.46的版本中新增了场景的后期处理(Post Processing)功能,包括模型描边.黑白图.明亮度调整.夜市效果.环境光遮蔽,也包括雷达扫描.原 ...
cesium之三维场景展示篇
本篇实现cesium三维场景展示,效果图如下: 三维模型.gltf场景展示倾斜摄影场景展示详细的实现过程见:这里
cesium 之三维场景展示篇（附源码下载）
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
DEJA_VU3D - Cesium功能集之 085-屏幕打印（地图出图）
前言编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小130个左右的功能,后续也会不断的追加,所以暂时 ...
结合WebSocket编写WebGL综合场景示例
在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制. 首先是场景截图: 上图在场景中导入一个Babylon骨骼模型,使用asdw.空格.鼠标控制加速度移动 ...

Cesium实现场景截图

Cesium实现场景截图相关推荐

最新文章

热门文章