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...
推荐阅读
- android第三方框架(五)ButterKnife
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 探索免费开源服务器tomcat的魅力
- Spring|Spring 框架之 AOP 原理剖析已经出炉!!!预定的童鞋可以识别下发二维码去看了
- 构建App(一)(框架与结构)
- 要玩转这个星际争霸II开源AI,你只需要i5+GTX1050
- laravel框架泛解
- redis|redis 常见问题一
- spring事务管理_01:事务管理框架+声明式事务
- java|微软认真聆听了开源 .NET 开发社区的炮轰( 通过CLI 支持 Hot Reload 功能)