南昌市物联网技防平台-前端
shuishen
2021-04-23 e2ed7cb4ef578d970beca80aea4903e9b13cd1f8
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -230,7 +230,7 @@
        //   return value;
        // }
        // );
        var as = evt.graphic.attributes;
        for (let key in as) {
          if (typeof as[key] == 'object') {
@@ -251,7 +251,7 @@
        // console.log(cache);
        cache = null;
        var fCard = (posi, setdata,winSize) => { // 弹窗函数
        var fCard = (posi, setdata, winSize) => { // 弹窗函数
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
@@ -266,103 +266,103 @@
            });
            that.layuiLayer.close(that.layuiLayer.index);
            // layer.alert('layer 新皮肤');
          //   that.layuiLayer.open({
          //     title: '',
          //     type: 2,
          //     shadeClose: false,
          //     shade: false,
          //     skin: 'demo-class',
          //     // id: 'onelyOne',
          //     maxmin: false, //开启最大化最小化按钮
          //     area: ['200px', '75px'],
          //     // area: 'auto',
          //     offset: posi,
          //     skin: 'flare',
          //     closeBtn: 0, //关闭按钮,可通过配置1和2来展示,0关闭
          //     content: [url, 'no'],
          //     resize: false,
          //     scrollbar: false,
          //     // tipsMore: true, //允许多个tipe
          //     // content: num,
          //     success: function (layero, index) {//成功后添加全局点击关闭
          //       // console.log(evt.graphic.attributes);
          //       $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
          //       // console.log(layero, index);
          //       that.indexs = index;
            //   that.layuiLayer.open({
            //     title: '',
            //     type: 2,
            //     shadeClose: false,
            //     shade: false,
            //     skin: 'demo-class',
            //     // id: 'onelyOne',
            //     maxmin: false, //开启最大化最小化按钮
            //     area: ['200px', '75px'],
            //     // area: 'auto',
            //     offset: posi,
            //     skin: 'flare',
            //     closeBtn: 0, //关闭按钮,可通过配置1和2来展示,0关闭
            //     content: [url, 'no'],
            //     resize: false,
            //     scrollbar: false,
            //     // tipsMore: true, //允许多个tipe
            //     // content: num,
            //     success: function (layero, index) {//成功后添加全局点击关闭
            //       // console.log(evt.graphic.attributes);
            //       $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
            //       // console.log(layero, index);
            //       that.indexs = index;
          //       var isclickD = true
          //         , endx = null
          //         , endy = null;
          //       layero[0].style.position = 'absolute';
            //       var isclickD = true
            //         , endx = null
            //         , endy = null;
            //       layero[0].style.position = 'absolute';
          //       downs = document.onmousedown = () => { //鼠标按下事件
          //         // console.log('down');//start
          //         // downs = document.onmousedown = null;
          //         var mx = window.event.clientX//鼠标初始位置
          //           , my = window.event.clientY
          //           , cx = this.offset[1].replace("px", "")//初始位置
          //           , cy = this.offset[0].replace("px", "");
            //       downs = document.onmousedown = () => { //鼠标按下事件
            //         // console.log('down');//start
            //         // downs = document.onmousedown = null;
            //         var mx = window.event.clientX//鼠标初始位置
            //           , my = window.event.clientY
            //           , cx = this.offset[1].replace("px", "")//初始位置
            //           , cy = this.offset[0].replace("px", "");
          //         //判断鼠标是否在地图上
          //         // console.log(mx,'+',my);
          //         if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
          //           // console.log('on map')
          //           if (endx != null && endy != null) {
          //             cx = endx;
          //             cy = endy;
          //           }
          //           moves = document.onmousemove = () => {//鼠标移动事件
          //             // console.log('move');//move
          //             // console.log(this.offset)
          //             var ux = window.event.clientX//记录实时位置
          //               , uy = window.event.clientY;
          //             endx = +cx + (ux - mx)// 初始位置+(鼠标初始位置-实时位置)
          //             endy = +cy + (uy - my);
          //             layero[0].style.left = endx + 'px';
          //             layero[0].style.top = endy + 'px';
          //             // console.log(+cx, +cy,'初始位置');
          //             // console.log(mx, my,'鼠标初始位置');
          //             // console.log(ux, uy,'记录实时位置');
          //             // console.log(ux, uy,'最后位置');
          //             isclickD = false;
          //             ups = document.onmouseup = () => {//鼠标抬起事件
          //               // console.log('up');//end
          //               // downs = document.onmousedown = null;
          //               moves = document.onmousemove = null;
          //               ups = document.onmouseup = null;
          //               var timess = setTimeout(() => {
          //                 clearTimeout(timess);
          //                 timess = null;
          //                 isclickD = true;
          //               }, 1);
          //             }
          //           }
          //         }
          //       }
          //       clickD = document.onclick = () => {
          //         if (isclickD) {
          //           parent[0].layer.close(index);
          //           parent[0].layer.close(+index + 1);
          //           // parent[0].layer.closeAll();
          //           // console.log(111111111111)
          //           clickD = document.onclick = null;
          //         }
          //       }
            //         //判断鼠标是否在地图上
            //         // console.log(mx,'+',my);
            //         if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
            //           // console.log('on map')
            //           if (endx != null && endy != null) {
            //             cx = endx;
            //             cy = endy;
            //           }
            //           moves = document.onmousemove = () => {//鼠标移动事件
            //             // console.log('move');//move
            //             // console.log(this.offset)
            //             var ux = window.event.clientX//记录实时位置
            //               , uy = window.event.clientY;
            //             endx = +cx + (ux - mx)// 初始位置+(鼠标初始位置-实时位置)
            //             endy = +cy + (uy - my);
            //             layero[0].style.left = endx + 'px';
            //             layero[0].style.top = endy + 'px';
            //             // console.log(+cx, +cy,'初始位置');
            //             // console.log(mx, my,'鼠标初始位置');
            //             // console.log(ux, uy,'记录实时位置');
            //             // console.log(ux, uy,'最后位置');
            //             isclickD = false;
            //             ups = document.onmouseup = () => {//鼠标抬起事件
            //               // console.log('up');//end
            //               // downs = document.onmousedown = null;
            //               moves = document.onmousemove = null;
            //               ups = document.onmouseup = null;
            //               var timess = setTimeout(() => {
            //                 clearTimeout(timess);
            //                 timess = null;
            //                 isclickD = true;
            //               }, 1);
            //             }
            //           }
            //         }
            //       }
            //       clickD = document.onclick = () => {
            //         if (isclickD) {
            //           parent[0].layer.close(index);
            //           parent[0].layer.close(+index + 1);
            //           // parent[0].layer.closeAll();
            //           // console.log(111111111111)
            //           clickD = document.onclick = null;
            //         }
            //       }
          //       var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
            //       var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
          //       function myMouseWheelHandler(event) {
          //         // console.log("Mouse wheel value = " + event.value);
          //         parent[0].layer.close(index);
          //         parent[0].layer.close(+index + 1);
          //         mouseWheel.remove();
          //       }
            //       function myMouseWheelHandler(event) {
            //         // console.log("Mouse wheel value = " + event.value);
            //         parent[0].layer.close(index);
            //         parent[0].layer.close(+index + 1);
            //         mouseWheel.remove();
            //       }
          //     },
          //     end: function () { //关闭事件
            //     },
            //     end: function () { //关闭事件
          //     }
          //   });
            //     }
            //   });
            // that.layuiLayer.open({ //第二个iframe
            //   title: '',
            //   type: 2,
@@ -433,11 +433,11 @@
          // console.log(evt.screenY);
          var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px']
          // console.log(winSize,4454645634536);
          fCard(offsetMy, setdata,winSize);
          fCard(offsetMy, setdata, winSize);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else {};
        } else { };
      } else {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
@@ -784,8 +784,9 @@
    },
    _clusterData: function () {
      //此函数当前仅适用于不使用预聚集数据的情况
      //this function currently only applies if not using preclustered data
      // console.log('改变111111111111111')
      if (this.preClustered) {
        return;
      }
@@ -871,9 +872,10 @@
          cl.singles.push(obj);
        }
      }
      for (i = 0, len = this.gridClusters.length; i < len; i++) {
        if (this.gridClusters[i].clusterCount === 1) {
// console.log(this.gridClusters)
          this._createSingle(this.gridClusters[i].singles[0]);
        } else if (this.gridClusters[i].clusterCount > 0) {
          this._createCluster(this.gridClusters[i]);
@@ -929,15 +931,21 @@
      this.singles.push(single);
      delete single.graphic;
      var symbol;
      if (single.jtype == 1) {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40);
      // console.log(single.state);
      if (single.state != '') {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
      } else {
        if (single.onlineStatus == 1) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
        if (single.jtype == 1) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40);
        } else {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
          if (single.onlineStatus == 1) {
            symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
          } else {
            symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
          }
        }
      }
      var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
      var attributes = lang.clone(single);
@@ -1031,11 +1039,11 @@
      //add a text element for the label to display the count and add to the group
      var shapeCenter = this._getShapeCenter(cluster.graphicShape);
      var textShape = groupShape.createText({
          x: shapeCenter.x,
          y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
          text: cluster.clusterCount,
          align: 'middle'
        })
        x: shapeCenter.x,
        y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
        text: cluster.clusterCount,
        align: 'middle'
      })
        .setFont({
          size: this.textSymbol.font.size,
          family: this.textSymbol.font.family,
@@ -1159,10 +1167,10 @@
      //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
      var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
      var containerCircle = groupShape.createCircle({
          cx: center.x,
          cy: center.y,
          r: conCircleRadius
        })
        cx: center.x,
        cy: center.y,
        r: conCircleRadius
      })
        //.setStroke({ width: 1, color: "000" })
        .setFill(new Color([0, 0, 0, 0]));
      containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1463,11 +1471,11 @@
      var textShapes = [];
      for (var i = 0, len = lines.length; i < len; i++) {
        var textShape = tooltipGroup.createText({
            x: xPos,
            y: yPos + (i * 10),
            text: lines[i],
            align: 'middle'
          })
          x: xPos,
          y: yPos + (i * 10),
          text: lines[i],
          align: 'middle'
        })
          .setFill("#000")
          .setFont({
            size: 8,
@@ -1481,12 +1489,12 @@
      var rectPadding = 2;
      var textBox = tooltipGroup.getBoundingBox();
      var rectShape = tooltipGroup.createRect({
          x: textBox.x - rectPadding,
          y: textBox.y - rectPadding,
          width: textBox.width + (rectPadding * 2),
          height: textBox.height + (rectPadding * 2),
          r: 0
        })
        x: textBox.x - rectPadding,
        y: textBox.y - rectPadding,
        width: textBox.width + (rectPadding * 2),
        height: textBox.height + (rectPadding * 2),
        r: 0
      })
        .setFill(new Color([255, 255, 255, 0.9]))
        .setStroke({
          color: "#000",
@@ -1622,11 +1630,11 @@
      //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
      if (this.shape.flareText) {
        var flareText = this.shape.createText({
            x: this.shape.flareText.location.x,
            y: this.shape.flareText.location.y,
            text: this.shape.flareText.text,
            align: 'middle'
          })
          x: this.shape.flareText.location.x,
          y: this.shape.flareText.location.y,
          text: this.shape.flareText.text,
          align: 'middle'
        })
          .setFill(layer.textSymbol.color)
          .setFont({
            size: this.shape.flareText.textSize,