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

Administrator

2021-04-20 d874cdc354465eeed76f7039de9e4d7e5b17dabc

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -169,7 +169,7 @@
    },
    _mapClick: function (e) {//地图全局点击事件 标记不能点击
      // console.log('地图全局点击事件');
      

      if (!e.target) {
        return;
      }
@@ -189,62 +189,144 @@

    onClick: function (evt) { //标志以及聚合表示点击事件
      var eour = evt.graphic.attributes.clusterCount;
      if(eour == undefined){
        var dataO = evt
      if (eour == undefined) {
        var dataO = evt;
        var aa = evt.graphic.screenX;
        var bb = evt.graphic.screenX;
        var data = {
          nums : evt.graphic.attributes.deviceNumber,
          nams : evt.graphic.attributes.deviceName,
          nums: evt.graphic.attributes.deviceNumber,
          nams: evt.graphic.attributes.deviceName,
          type: evt.graphic.attributes.jtype,
        }
        console.log(dataO);
        
        var rightCard = (num,name,posi)=>{
          var that = this;
          var url = './popup/html/FlareClusterLayer_v3.html?num=' + num + '&name=' + name;
            layui.use('layer', function () {
                that.layuiLayer = layui.layer;
                // that.layuiLayer.config({
                //     extend: 'myskin/police-details.css'
                // });
                that.layuiLayer.close(that.layuiLayer.index);
                that.layuiLayer.open({
                    title: '',
                    type: 2,
                    shadeClose: true,
                    shade: false,
                    skin: 'demo-class',
                    id: 'onelyOne',
                    maxmin: false, //开启最大化最小化按钮
                    // area: ['500px', '400px'],
                    offset: posi,
                    skin: 'police-details',
                    content: [url,'no'],
                    resize: false,
                    closeBtn: 1,
                    success: function(layero, index){//成功后添加全局点击关闭
                      console.log(layero, index);
                      
                      // var a = window.onmousedown  = ()=>{
                      //   // parent[0].layer.close(index);
                      //   // begins();
                      // }
                      var d = document.onclick = ()=>{
                        parent[0].layer.close(index);
                        d = '';
                      }
                    },
                });
        // console.log(dataO);
        // console.log(aa - bb);

        var fCard = (posi) => {
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
            downs = null,
            moves = null,
            ups = null;
          layui.use('layer', function () {
            that.layuiLayer = layui.layer;
            that.layuiLayer.config({
              extend: 'myskin/FlareClusterLayer.css'
            });
            // layer.alert('layer 新皮肤');
            that.layuiLayer.close(that.layuiLayer.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) {//成功后添加全局点击关闭
                $("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
                // console.log(layero, index);
                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","");
                  moves = document.onmousemove = () => {
                    // console.log('move');//move
                    // console.log(this.offset)
                    var ux = window.event.clientX//记录实时位置
                      , uy = window.event.clientY;
                    var 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,'最后位置');
                    
                    ups = document.onmouseup = () => {
                      // console.log('up');//end
                      downs = document.onmousedown = null;
                      moves = document.onmousemove = null;
                      ups = document.onmouseup = null;
                    }
                  }
                }

                clickD = document.onclick = () => {
                  parent[0].layer.close(index);
                  parent[0].layer.close(+index + 1);
                  // parent[0].layer.closeAll();
                  // console.log(111111111111)
                  clickD = document.onclick = null;
                }

              },
              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));
              },
            })
          })
        }
        var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
        rightCard  (data.nums,data.nams,offsetMy);
        var begins = ()=>{
          var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
          rightCard  (data.nums,data.nams,offsetMy);
        var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
        // var offsetMy = [+evt.graphic._shape.shape.y - 80 + 'px',+evt.graphic._shape.shape.x  + 'px'];
        fCard(offsetMy);
        var begins = (xy) => {
          var offsetMy = [xy.y + 'px', xy.x + 'px'];
          fCard(offsetMy);
        }
      }else {
        console.log(num,'zoom');
      } else {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
        // this.map.setExtent(evt.graphic._extent)
        this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
        // this.map.setZoom(18);
        // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
      }
      console.log(evt)
      // console.log(evt)
      this._restoreInfoWindowSettings();

      if (evt.graphic.attributes.isCluster) {
@@ -444,7 +526,7 @@
      dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
    },

    

    _graphicDraw: function (e) {
      var g = e.graphic;
      if (g.attributes.isCluster) {
@@ -810,11 +892,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,
@@ -938,10 +1020,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");
@@ -1242,11 +1324,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,
@@ -1260,12 +1342,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",
@@ -1401,11 +1483,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,