superMap开源框架|superMap开源框架 使用Cesium实现截图

【superMap开源框架|superMap开源框架 使用Cesium实现截图】没有在主页面进行,在单独的一个路由通过监听事件监听截图按钮,根据我的代码或者查看开源代码进行使用或修改!
现在data中定义全局的viewer进行使用!因为要声明一个全局的viewer来进行的;

data(){ return{ url:'', viewer:window.viewer, scene:viewer.scene, } },

通过监听事件获取;
methods: { // 截图 screenshotClick() { var promise = this.scene.outputSceneToFile(); Cesium.when( promise, (base64data)=> { this.download(base64data); } ); }, /** * 根据图片生成画布 */ convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; }, /** * 下载图片 */ download(base64data) { var image = new Image(); image.src = https://www.it610.com/article/base64data; console.log(image.src,'image'); image.onload = ()=> { var canvas = this.convertImageToCanvas(image); this.url = canvas.toDataURL("image/jpeg"); //生成完全的base64照片编码 var a = document.createElement("a"); var event = new MouseEvent("click"); a.download = new Date().getTime() + ".jpg"; // 指定下载图片的名称 a.href = https://www.it610.com/article/this.url; a.dispatchEvent(event); // 触发超链接的点击事件 }; }, }

总体流程就是这样!
有什么没有看明白的也可以上官网参考:http://support.supermap.com.c...

    推荐阅读