水文水环境分析-洪水淹没页面--实现点击水面弹出框中有当前页面的截图

guoshilong

2023-02-01 0496b4afa185e318a1e5f5a6ef467b14d776aa08

水文水环境分析-洪水淹没页面--实现点击水面弹出框中有当前页面的截图

 config.json

@@ -549,7 +549,12 @@
      "enableCompass": true,
      "enableZoomControls": false,
      "enableDistanceLegend": false,
      "enableCompassOuterRing": true
      "enableCompassOuterRing": true,
      "contextOptions": {
        "webgl": {
          "preserveDrawingBuffer": true
        }
      }
    }
  },
  "widgetPool": {

 config_offline.json

@@ -549,7 +549,12 @@
      "enableCompass": true,
      "enableZoomControls": false,
      "enableDistanceLegend": false,
      "enableCompassOuterRing": true
      "enableCompassOuterRing": true,
      "contextOptions": {
        "webgl": {
          "preserveDrawingBuffer": true
        }
      }
    }
  },
  "widgetPool": {

 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;
}


 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">

 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 });
        }


        });