Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

Administrator

2021-04-23 8f3062cd6729850839b02b4dc0a4a76c4322f1c4

 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) => { // 弹窗函数
        var fCard = (posi, setdata, winSize) => { // 弹窗函数
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
@@ -266,103 +266,134 @@
            });
            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,
            //   shadeClose: true,
            //   shade: false,
            //   skin: 'demo-class',
            //   id: 'onelyTwo',
            //   maxmin: false, //开启最大化最小化按钮
            //   area: ['360px', '484px'],
            //   // area: 'auto',
            //   offset: 'r',
            //   skin: 'flare',
            //   isOutAnim: false,
            //   closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
            //   content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
            //   resize: false,
            //   scrollbar: false,
            //   // tipsMore: true, //允许多个tipe
            //   // content: num,
            //   success: function (layero, index) { //成功后添加全局点击关闭
            //     // var z = document.onclick = ()=>{
            //     //   parent[0].layer.close(index);
            //     // //   // parent[0].layer.close(+index + 1);
            //     //   z = null;
            //     // }
            //     //尝试传值
            //     //js对象转json对象
            //     // $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
            //     $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);
            //   },
            // })
            that.layuiLayer.open({ //第二个iframe
              title: '',
              type: 2,
@@ -373,10 +404,10 @@
              maxmin: false, //开启最大化最小化按钮
              area: ['360px', '484px'],
              // area: 'auto',
              offset: 'r',
              offset: winSize,
              skin: 'flare',
              isOutAnim: false,
              closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
              closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
              content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
              resize: false,
              scrollbar: false,
@@ -392,6 +423,7 @@
                //js对象转json对象
                // $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
                $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

              },
            })
          })
@@ -399,15 +431,13 @@
        if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
          // console.log(evt.screenY);
          fCard(offsetMy, setdata);
          var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px']
          // console.log(winSize,4454645634536);
          fCard(offsetMy, setdata, winSize);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else {};




        } else { };

      } else {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
@@ -754,8 +784,9 @@
    },

    _clusterData: function () {

      //此函数当前仅适用于不使用预聚集数据的情况
      //this function currently only applies if not using preclustered data
      // console.log('改变111111111111111')
      if (this.preClustered) {
        return;
      }
@@ -841,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]);
@@ -899,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);
@@ -1001,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,
@@ -1129,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");
@@ -1433,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,
@@ -1451,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",
@@ -1592,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,