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

guoshilong

2023-02-01 0496b4afa185e318a1e5f5a6ef467b14d776aa08

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


      });