地图弹窗，面包屑样式，地图图标切换

liuyg

2021-04-27 72f62e60dd11c17d3cb3f30962b3fd3a685d01cd

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -32,6 +32,9 @@
  PopupTemplate, GraphicsLayer
) {
  return declare([GraphicsLayer], {

    //聚合渲染data
    userState: '设备',
    constructor: function (options) {
      /* options description:
        spatialReference: default 102100. A SpatialReference object using the wkid of that data.
@@ -199,7 +202,14 @@
        // parent[0].layer.close(+indexControl + 1);
      }

      if (eour == undefined) {
      if (eour == undefined) {//判断是否是聚合状态
        // if(this.userState == '设备'){
        //   // console.log(this.userState)
        // }else if(this.userState == '警情'){
        //   // console.log(this.userState)
        // }else if(this.userState == '业主'){
        //   // console.log(this.userState)
        // }
        var dataO = evt;
        var aa = evt.graphic.screenX;
        var bb = evt.graphic.screenX;
@@ -212,31 +222,35 @@
        //解决重复JSON.stringify将循环结构转换为JSON。有几率出错，err：TypeError: Converting circular structure to JSON
        //舍弃上面方法，原因是对象里面嵌入对象，造成不能转换成JSON，吧对象去掉就好，
        var as = evt.graphic.attributes;
        var bs = {};
        for (let key in as) {
          if (typeof as[key] == 'object') {
            as = as[key].attributes;
          if (typeof as[key] != 'object') {
            bs[key] = as[key]
            // as = as[key].attributes;
            // console.log('youduixang ')
            break;
            // break;
          }
        }
        var setdata = JSON.stringify(as);
        var setdata = JSON.stringify(bs);
        cache = null;
        var fCard = (posi, setdata, winSize) => { // 弹窗函数
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
            clickG = null,
            downs = null,
            moves = null,
            ups = null;
           
          layui.use('layer', function () {
            that.layuiLayer = layui.layer;
            that.layuiLayer.config({
              extend: 'myskin/FlareClusterLayer.css'
            });
            that.layuiLayer.close(that.layuiLayer.index);
            //两个弹窗
        if (this.userState == '设备') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
            var that = this,
              url = './popup/html/FlareClusterLayer_v3.html',
              clickD = null,
              clickG = null,
              downs = null,
              moves = null,
              ups = null;

            layui.use('layer', function () {
              that.layuiLayer = layui.layer;
              that.layuiLayer.config({
                extend: 'myskin/FlareClusterLayer.css'
              });
              that.layuiLayer.close(that.layuiLayer.index);
              //两个弹窗
              that.layuiLayer.open({
                title: '',
                type: 2,
@@ -334,86 +348,171 @@

                }
              });
            that.layuiLayer.open({ //第二个iframe
              title: '',
              type: 2,
              shadeClose: true,
              shade: false,
              skin: 'demo-class',
              id: 'onelyTwo',
              maxmin: false, //开启最大化最小化按钮
              area: ['360px', '484px'],
              // area: 'auto',
              offset: winSize,
              skin: 'flare',
              isOutAnim: false,
              closeBtn: 2, //关闭按钮，可通过配置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,
            //       shadeClose: true,
            //       shade: false,
            //       skin: 'demo-class',
            //       id: 'onelyTwo',
            //       maxmin: false, //开启最大化最小化按钮
            //       area: ['360px', '484px'],
            //       // area: 'auto',
            //       offset: winSize,
            //       skin: 'flare',
            //       isOutAnim: false,
            //       closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
            //       content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
            //       resize: false,
            //       scrollbar: false,
            //       // tipsMore: true, //允许多个tipe
            //       // content: num,
            //       success: function (layero, index) { //成功后添加全局点击关闭
            //         $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);
              that.layuiLayer.open({ //第二个iframe
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['360px', '484px'],
                // area: 'auto',
                offset: winSize,
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置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,
              //       shadeClose: true,
              //       shade: false,
              //       skin: 'demo-class',
              //       id: 'onelyTwo',
              //       maxmin: false, //开启最大化最小化按钮
              //       area: ['360px', '484px'],
              //       // area: 'auto',
              //       offset: winSize,
              //       skin: 'flare',
              //       isOutAnim: false,
              //       closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
              //       content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
              //       resize: false,
              //       scrollbar: false,
              //       // tipsMore: true, //允许多个tipe
              //       // content: num,
              //       success: function (layero, index) { //成功后添加全局点击关闭
              //         $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

            //       },
            //     })
          })
              //       },
              //     })
            })
          }
        } else if (this.userState == '警情') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
            var that = this,
              url = './popup/html/FlareClusterLayer_v3.html',
              clickD = null,
              clickG = null,
              downs = null,
              moves = null,
              ups = null;

            layui.use('layer', function () {
              that.layuiLayer = layui.layer;
              that.layuiLayer.config({
                extend: 'myskin/FlareClusterLayer.css'
              });
              that.layuiLayer.close(that.layuiLayer.index);
              that.layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['360px', '484px'],
                // area: 'auto',
                offset: winSize,
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
                content: ['./popup/html/SupervisoryMapPdata.html'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) { //成功后添加全局点击关闭
                  $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

                },
              })
            })
          }
        } else if (this.userState == '业主') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
            var that = this,
              url = './popup/html/FlareClusterLayer_v3.html',
              clickD = null,
              clickG = null,
              downs = null,
              moves = null,
              ups = null;

            layui.use('layer', function () {
              that.layuiLayer = layui.layer;
              that.layuiLayer.config({
                extend: 'myskin/FlareClusterLayer.css'
              });
              that.layuiLayer.close(that.layuiLayer.index);

              that.layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['360px', '484px'],
                // area: 'auto',
                offset: winSize,
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
                content: ['./popup/html/SupervisoryMapYdata.html'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) { //成功后添加全局点击关闭
                  $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

                },
              })
            })
          }
        }


        if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var offsetMy = [+evt.screenY - 310 + 'px', +evt.screenX - 168 + 'px'];
          if (und == '控制端') {//控制端弹窗关闭
          var offsetMy = [+window.innerHeight / 2 - 115 + 'px', (+window.innerWidth - 360) / 2 + 257 + 'px'];
          // console.log('控制端中浮',offsetMy)
        }
            var offsetMy = [+window.innerHeight / 2 - 115 + 'px', (+window.innerWidth - 360) / 2 + 257 + 'px'];
            // console.log('控制端中浮',offsetMy)
          }
          // 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 {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
        // this.map.setExtent(evt.graphic._extent)
        // 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'));
@@ -426,7 +525,6 @@
        // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
      }
      // console.log(evt)

      if (und != '控制端') {
        this._restoreInfoWindowSettings();

@@ -841,7 +939,7 @@
      }
      for (i = 0, len = this.gridClusters.length; i < len; i++) {
        if (this.gridClusters[i].clusterCount === 1) {
// console.log(this.gridClusters)
          // console.log(this.gridClusters)

          this._createSingle(this.gridClusters[i].singles[0]);
        } else if (this.gridClusters[i].clusterCount > 0) {
@@ -1646,8 +1744,11 @@

    _clickOpenOnclick: function (e, und, indexControl) {
      this.onClick(e, und, indexControl)
    },
    _setUserState: function (state) {
      // console.log(state)
      this.userState = state
    }

    //#endregion
  });
});