From 0496b4afa185e318a1e5f5a6ef467b14d776aa08 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 01 Feb 2023 14:27:53 +0800
Subject: [PATCH] 水文水环境分析-洪水淹没页面--实现点击水面弹出框中有当前页面的截图
---
config.json | 7 +++
corelib/common/popup/floodAnalysis.html | 4 +
widgets/FloodAnalysis/Widget.js | 45 +++++++++++++++++-----
config_offline.json | 7 +++
corelib/common/popup/css/style.css | 11 +++++
5 files changed, 59 insertions(+), 15 deletions(-)
diff --git a/config.json b/config.json
index 297e4ae..61c5d7f 100644
--- a/config.json
+++ b/config.json
@@ -549,7 +549,12 @@
"enableCompass": true,
"enableZoomControls": false,
"enableDistanceLegend": false,
- "enableCompassOuterRing": true
+ "enableCompassOuterRing": true,
+ "contextOptions": {
+ "webgl": {
+ "preserveDrawingBuffer": true
+ }
+ }
}
},
"widgetPool": {
diff --git a/config_offline.json b/config_offline.json
index ae8579a..76d5e93 100644
--- a/config_offline.json
+++ b/config_offline.json
@@ -549,7 +549,12 @@
"enableCompass": true,
"enableZoomControls": false,
"enableDistanceLegend": false,
- "enableCompassOuterRing": true
+ "enableCompassOuterRing": true,
+ "contextOptions": {
+ "webgl": {
+ "preserveDrawingBuffer": true
+ }
+ }
}
},
"widgetPool": {
diff --git a/corelib/common/popup/css/style.css b/corelib/common/popup/css/style.css
index b7d3f62..754fd69 100644
--- a/corelib/common/popup/css/style.css
+++ b/corelib/common/popup/css/style.css
@@ -785,10 +785,19 @@
margin: 20px;
}
+.flood-box-left{
+ width: 80%;
+}
+
+.flood-box-left img{
+ width: 100%;
+ height: 100%;
+}
+
.flood-box-top{
display: flex;
width: 100%;
- height: 350px;
+ height: 475px;
border: 1px solid black;
}
diff --git a/corelib/common/popup/floodAnalysis.html b/corelib/common/popup/floodAnalysis.html
index 39a7231..8bcc1a1 100644
--- a/corelib/common/popup/floodAnalysis.html
+++ b/corelib/common/popup/floodAnalysis.html
@@ -13,7 +13,9 @@
</div>
<div class="flood-box">
<div class="flood-box-top">
- <div class="flood-box-left">11</div>
+ <div class="flood-box-left">
+ <img id="canvasImage">
+ </div>
<div class="flood-box-right">22</div>
</div>
<div class="flood-box-bottom">
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 88f06db..6205b8e 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -35,6 +35,8 @@
material: null,
drawingPolyline: null,
polygonCartesianArray:[],
+ //canvas转换后的图片
+ canvasImage:null,
startup: function () {
this.inherited(arguments);
var self = this;
@@ -60,7 +62,6 @@
cartesians.splice(cartesians.length - 1, cartesians.length);
self.drawLines(cartesians);
self.movehandLer()
- self.canvasToImage()
});
});
@@ -106,7 +107,6 @@
if (this.positions.length > 0) {
this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
console.log(this.sideRes,"----000----")
-
}
},
setPositions: function (e) {
@@ -371,7 +371,6 @@
let dis_temp1 = distance(positions[i], positions[j]);
let dis_temp2 = distance(positions[j], positions[k]);
res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle)) ;
- console.log(res);
}
@@ -434,6 +433,7 @@
clickHand:function (click){
var pickedObjects = this.map.scene.pick(click.position);
if (pickedObjects.primitive instanceof Cesium.Primitive) {
+ this.canvasToImage()
this.floodAnalysisPopup()
}
},
@@ -443,16 +443,22 @@
var url = './corelib/common/popup/floodAnalysis.html';
var top = ($(window).height() - 600) / 2;
var left = ($(window).width() - 900 - 340) / 2 + 340;
+ var self = this
layer.open({
title:'模拟分析',
type: 2,
maxmin: false, //开启最大化最小化按钮
- area: ['900px', '600px'],
+ area: ['1100px', '600px'],
skin: 'floodAnalysis',
offset: [top, left],
content: url,
id: "floodAnalysisLayer",
- closeBtn: 1
+ closeBtn: 1,
+ success: function(layero, index) {
+ var body = layer.getChildFrame("body",index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
+ var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
+ iframeWin.$('#canvasImage')[0].src = self.canvasImage; //渲染子页面中的img
+ },
});
},
@@ -462,13 +468,30 @@
},
//canvas转换为image
- canvasToImage(){
- var canvas = $('.cesium-widget canvas').get(0)
- //cesium基于webgl，因此获取上下文需要用experimental-webgl而不是2d
- var ctx = canvas.getContext('experimental-webgl');
- ctx.beginPath()
- ctx.rect(0,0,ctx.width,ctx.height)
+ canvasToImage:function (){
+ var canvas = this.map.scene.canvas
+ let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
+ this.canvasImage = image
+ // //导出看效果
+ // let link = document.createElement("a");
+ // let blob = this.dataURLtoBlob(image);
+ // let objurl = URL.createObjectURL(blob);
+ // link.download = "scene.png";
+ // link.href = objurl;
+ // link.click();
+ },
+
+ dataURLtoBlob:function (dataurl) {
+ let arr = dataurl.split(','),
+ mime = arr[0].match(/:(.*?);/)[1],
+ bstr = atob(arr[1]),
+ n = bstr.length,
+ u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
}
+ return new Blob([u8arr], { type: mime });
+ }
});
--
Gitblit v1.9.3