Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

shuishen

2021-04-23 8d837b97ffb27e4e26f067c1febde353bfdf91cf

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -188,11 +188,19 @@
    },
    // zoomNum: this.map.getZoom(),
    indexs: null,
    onceTime: 300, //防抖定时
    onceTimeMethod: null, //防抖判断属性
    onClick: function (evt) { //标志以及聚合表示点击事件
    onceTime: 300,//防抖定时
    onceTimeMethod: null,//防抖判断属性
    onClick: function (evt, und, indexControl) { //标志以及聚合表示点击事件// 弹窗
      var eour = evt.graphic.attributes.clusterCount;
      var mySelf = this;
      // console.log(und)
      if (und == '控制端') {//控制端弹窗关闭
        parent[0].layer.close(indexControl);
        parent[0].layer.close(+indexControl + 1);
        // console.log('控制:', indexControl)
      }
      // console.log('tucen:', mySelf.indexs)

      if (eour == undefined) {
        var dataO = evt;
        var aa = evt.graphic.screenX;
@@ -204,8 +212,46 @@
        }
        // console.log(dataO);
        // console.log(aa - bb);
        var cache = [];
        //解决重复JSON.stringify将循环结构转换为JSON。有几率出错，err：TypeError: Converting circular structure to JSON

        var fCard = (posi, ind, olds) => {

        // var setdata = JSON.stringify(evt.graphic.attributes

        //   , function (key, value) {
        //   if (typeof value === 'object' && value !== null) {
        //     if (cache.indexOf(value) !== -1) {
        //       // 移除
        //       return;
        //     }
        //     // 收集所有的值
        //     cache.push(value);
        //   }
        //   return value;
        // }
        // );
        
        var as = evt.graphic.attributes;
        for (let key in as) {
          if (typeof as[key] == 'object') {
            as = as[key].attributes;
            // console.log('youduixang ')
            break;
          }
        }
        var setdata = JSON.stringify(as);
        // console.log(setdata);
        // var newkeys = Object.keys(evt.graphic.attributes);
        // var newvalues = Object.values(evt.graphic.attributes);
        // var str = "";
        // newkeys.forEach(function (item,index) {
        //   str += item
        // })


        // console.log(cache);
        cache = null;
        var fCard = (posi, setdata) => { // 弹窗函数
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
@@ -238,59 +284,61 @@
              scrollbar: false,
              // tipsMore: true, //允许多个tipe
              // content: num,
              success: function (layero, index) { //成功后添加全局点击关闭
                $("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
              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;
                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", "");
                  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);
                  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);
@@ -342,14 +390,16 @@
                // }
                //尝试传值
                //js对象转json对象
                $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
                // $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
                $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);
              },
            })
          })
        }
        if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
          fCard(offsetMy);
          // console.log(evt.screenY);
          fCard(offsetMy, setdata);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
@@ -362,66 +412,78 @@
      } else {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
        // this.map.setExtent(evt.graphic._extent)
        this.map.setZoom(this.map.getZoom() + 1) //地图中心缩放
        // this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
        // console.log(this.map.getZoom())
        // this.map.setZoom(18);
        // event.stopPropagation();
        var lgtd = Number(evt.graphic.attributes.x);//地图跟随缩放
        var lttd = Number(evt.graphic.attributes.y);
        // // console.log($(this).find('input').attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        this._map.centerAndZoom(position, this.map.getZoom() + 1);//缩放，10是缩放级别，可以自定义，数值越大缩放越大

        parent[0].layer.close(this.indexs)
        parent[0].layer.close(+this.indexs + 1)

        // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
      }
      // console.log(evt)
      this._restoreInfoWindowSettings();

      if (evt.graphic.attributes.isCluster) {
        evt.stopPropagation();
        //this._activateCluster(evt.graphic);
        this.map.infoWindow.hide();
      } else if (evt.graphic.attributes.isFlare) {
        evt.stopPropagation();
      if (und != '控制端') {
        this._restoreInfoWindowSettings();

        var flareObject = this._getFlareFromGraphic(evt.graphic);
        if (!flareObject) {
          this._hideFlareDetail();
        if (evt.graphic.attributes.isCluster) {
          evt.stopPropagation();
          //this._activateCluster(evt.graphic);
          this.map.infoWindow.hide();
          return;
        }
        } else if (evt.graphic.attributes.isFlare) {
          evt.stopPropagation();

        if (flareObject.isSummaryFlare || !flareObject.singleData) {
          this._showFlareDetail(evt.graphic);
          var flareObject = this._getFlareFromGraphic(evt.graphic);
          if (!flareObject) {
            this._hideFlareDetail();
            this.map.infoWindow.hide();
            return;
          }

          if (flareObject.isSummaryFlare || !flareObject.singleData) {
            this._showFlareDetail(evt.graphic);
            this.map.infoWindow.hide();
            return;
          }

          //if we're clicking on a single data flare then show an info window
          var graphic = evt.graphic;

          this.originalInfoWindow = {
            highlight: lang.clone(this.map.infoWindow.get("highlight")),
            anchor: lang.clone(this.map.infoWindow.anchor)
          };

          this.map.infoWindow.hide();
          return;
          this.map.infoWindow.clearFeatures();
          this.map.infoWindow.set("highlight", false);
          this.map.infoWindow.setFeatures([graphic]);

          //when getting screen point make sure we use the location of the flare on screen, by converting the map point on the object.
          var sp = this.map.toScreen({
            x: flareObject.mapPoint.x,
            y: flareObject.mapPoint.y
          });

          //Could do something with the anchor of the info window here if wanted. The offsets can be a bit wacky as well.
          //var anchor = this._getInfoWindowAnchor(flareObject.degree);
          //this.map.infoWindow.anchor = anchor;

          this.map.infoWindow.cluster = this.activeCluster;
          //reset the geometry of the flare feature in the info window to be the actual location of the flared object, not the location of the flare graphic.
          var p = webMercatorUtils.geographicToWebMercator(new Point(flareObject.singleData[this.xPropertyName], flareObject.singleData[this.yPropertyName], this.spatialRef));
          this.map.infoWindow.features[0].geometry = p;
          this.map.infoWindow.show(sp);

        }

        //if we're clicking on a single data flare then show an info window
        var graphic = evt.graphic;

        this.originalInfoWindow = {
          highlight: lang.clone(this.map.infoWindow.get("highlight")),
          anchor: lang.clone(this.map.infoWindow.anchor)
        };

        this.map.infoWindow.hide();
        this.map.infoWindow.clearFeatures();
        this.map.infoWindow.set("highlight", false);
        this.map.infoWindow.setFeatures([graphic]);

        //when getting screen point make sure we use the location of the flare on screen, by converting the map point on the object.
        var sp = this.map.toScreen({
          x: flareObject.mapPoint.x,
          y: flareObject.mapPoint.y
        });

        //Could do something with the anchor of the info window here if wanted. The offsets can be a bit wacky as well.
        //var anchor = this._getInfoWindowAnchor(flareObject.degree);
        //this.map.infoWindow.anchor = anchor;

        this.map.infoWindow.cluster = this.activeCluster;
        //reset the geometry of the flare feature in the info window to be the actual location of the flared object, not the location of the flare graphic.
        var p = webMercatorUtils.geographicToWebMercator(new Point(flareObject.singleData[this.xPropertyName], flareObject.singleData[this.yPropertyName], this.spatialRef));
        this.map.infoWindow.features[0].geometry = p;
        this.map.infoWindow.show(sp);

      }

    },

    //Add a data point to be clustered.
@@ -1577,6 +1639,10 @@
      this.animationsRunning = [];
    },

    _clickOpenOnclick: function (e, und, indexControl) {
      this.onClick(e, und, indexControl)
    }

    //#endregion
  });
});