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

liuyg

2021-04-27 72f62e60dd11c17d3cb3f30962b3fd3a685d01cd

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

 public/map/popup/html/SupervisoryMapYdata.html

@@ -263,7 +263,7 @@
            },
            methods: {
                getdatas(dat) {
                    console.log(dat);
                    // console.log(dat);
                    $('.introduce').append(dat.information)
                },
                handleClick(tab, event) {//标签tab点击事件

 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,16 +222,20 @@
        //解决重复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) => { // 弹窗函数
        if (this.userState == '设备') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
@@ -392,6 +406,96 @@
            //     })
          })
        }
        } 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 == '控制端') {//控制端弹窗关闭
@@ -408,12 +512,7 @@
        } 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();

@@ -1646,8 +1744,11 @@

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

    //#endregion
  });
});

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -205,7 +205,7 @@
        dataType: 'JSON',
        success: function (res) {
          var datas = res.data;
          console.log(datas)
          // console.log(datas)
          var heatmapRenderer = null;
          that.entityData = [];
          for (var i = 0; i < datas.length; i++) {
@@ -216,8 +216,8 @@
              lttd: Number(datas[i].wd)
            })
          }
          // that.flareClusterLayer(datas);
          console.log(datas)
          that.flareClusterLayer(datas);
          // console.log(datas)
          that.heatmapfeatureLayer = that.heatmFeaLayers();
          that._map.addLayer(that.heatmapfeatureLayer);
          // that.checkBoxSelect();//左侧控制热力图重复
@@ -234,9 +234,9 @@
        $('.analysis-and-judgment-tab li:eq(0)').addClass('on').siblings().removeClass('on');
        $($('.analysis-container > div')[0]).stop().show().siblings().stop().hide();

        that.heatmapfeatureLayer_1 = that.heatmFeaLayers();
        that.heatmapfeatureLayer = that.heatmFeaLayers();

        that._map.addLayer(that.heatmapfeatureLayer_1);
        that._map.addLayer(that.heatmapfeatureLayer);
        $('#analysis_select_time_start').val(time.tomorrow);
        $('#analysis_select_time_end').val(time.current);

@@ -281,9 +281,9 @@
          that.entitysData = [];
        }

        if (that.heatmapfeatureLayer_1.graphics.length > 0) {
          that.heatmapfeatureLayer_1.clear();
          that.heatmapfeatureLayer_1.setRenderer();
        if (that.heatmapfeatureLayer.graphics.length > 0) {
          that.heatmapfeatureLayer.clear();
          that.heatmapfeatureLayer.setRenderer();
          $('.analysis-category input').prop('checked', false);
        }

@@ -468,10 +468,19 @@



        console.log(b, id);
        // console.log(b, id);
        var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px'];
        var as = b;
        var setdata = JSON.stringify(as);
        var bs = {};
        for (let key in as) {
          if (typeof as[key] != 'object') {
            bs[key] = as[key]
            // as = as[key].attributes;
            // console.log('youduixang ')
            // break;
          }
        }
        var setdata = JSON.stringify(bs);
        // console.log(setdata,'setdata')
        var intOpen = () => {
          layui.use('layer', function () {
@@ -513,62 +522,7 @@
          }, mySelf.onceTime);
        } else {
        };
        // var url = './popup/html/owner-details.html?id=' + id;
        // layui.use('layer', function () {
        //   that.layuiLayer = layui.layer;
        //   that.layuiLayer.config({
        //     extend: 'myskin/owner-details.css'
        //   });
        //   that.layuiLayer.close(that.layuiLayer.index);
        //   that.layuiLayer.open({
        //     title: '业主详情',
        //     type: 2,
        //     shadeClose: true,
        //     shade: false,
        //     maxmin: false, //开启最大化最小化按钮
        //     area: ['500px', '340px'],
        //     offset: 'auto',
        //     skin: 'owner-details',
        //     content: url,
        //     closeBtn: 1,
        //   });
        // })


        // var y = +window.innerHeight / 2 + 200;
        // var x = (+window.innerWidth - 360) / 2 + 360 + 70;
        // // document.elementFromPoint(x, y).click();
        // // console.log(x, y)

        // // var a = document.elementFromPoint(21, 122);
        // // console.log(a);

        // // console.log(that.clusterLayer, that._map, 6)
        // // console.log(id, 'id');
        // // console.log(that.clusterLayer);
        // var Tattributes = null
        //   , ds = that.clusterLayer.allData;
        // for (var key in ds) {
        //   if (ds[key].id == id) {
        //     Tattributes = ds[key];
        //   }
        // }
        // if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
        //   var evtdata = {};
        //   evtdata = {
        //     graphic: {
        //       attributes: Tattributes,
        //     },
        //     screenX: x,
        //     screenY: y,
        //   }
        //   // console.log(that.clusterLayer,5555555555555);
        //   that.clusterLayer._clickOpenOnclick(evtdata, '控制端', that.clusterLayer.indexs);
        //   mySelf.onceTimeMethod = setTimeout(() => {
        //     mySelf.onceTimeMethod = null;
        //   }, mySelf.onceTime);
        // } else {
        // };
      })
      $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
        event.stopPropagation();
@@ -584,29 +538,6 @@
      // 设备列表中的点击事件
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function (event) {
        var id = $(this).attr('term-listid');
        // console.log(mySelf.Sdata);
        //   // var url = './popup/html/equipment-details.html?obj=' + id;//设备每一项钟打开警情窗口
        //   // layui.use('layer', function () {
        //   //   that.layuiLayer = layui.layer;
        //   //   that.layuiLayer.config({
        //   //     extend: 'myskin/equipment-details.css'
        //   //   });
        //   //   that.layuiLayer.close(that.layuiLayer.index);
        //   //   that.layuiLayer.open({
        //   //     title: '警情详情',
        //   //     type: 2,
        //   //     shadeClose: true,
        //   //     shade: false,
        //   //     maxmin: false, //开启最大化最小化按钮
        //   //     area: ['520px', '320px'],
        //   //     offset: 'auto',
        //   //     skin: 'equipment-details',
        //   //     content: url,
        //   //     closeBtn: 1,
        //   //   });
        //   // })




        event.stopPropagation();
@@ -852,7 +783,7 @@
          var oldData = data.data.records
          var result = oldData;
          that.Pdata = oldData;
          console.log(that.Pdata);//警情筛选
          // console.log(that.Pdata);//警情筛选
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
@@ -861,6 +792,7 @@
            if (result[i].waringType == "紧急求救") {
              result[i].waringType = "一键求助"
            }


            that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '警情信息', {
              lgtd: result[i].jd,
@@ -875,6 +807,7 @@
            h = result[i].alarmTime.substr(11, 5);
            a = Number(i) + 1;


            str += '<tr term-list=' + result[i].id + '>';
            str += '<td>' + a + '</td>';
            str += '<td title=' + result[i].waringType + '>' + result[i].waringType + '</td>';
@@ -882,13 +815,13 @@
            str += "<td><a href='javascript:;' title=" + time + ">" + y + ' ' + h + "</a></td>";
            // str += "<td class='location' style='display: none'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            if (result[i].jtype == 0) {
              str += "<td class='location'> <input style='color:#000000;background-color:#ffffff;background-image:linear-gradient(to right, #fffff , #fffff' type='button' value='未处理'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
              str += "<td class='location'> <input style='color:#fff;background-color:#F35B5B;width: 50px' type='button' value='未处理'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            } else {
              if (result[i].jtype == 1) {
                str += "<td class='location'> <input style='color:#000000;background-color:#ffffff;background-image:linear-gradient(to right, #fffff , #fffff' type='button' value='处理中'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
                str += "<td class='location'> <input style='color:#fff;background-color:rgb(18, 145, 230);width: 50px' type='button' value='处理中'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";

              } else {
                str += "<td class='location'> <input style='color:#000000;background-color:#ffffff;background-image:linear-gradient(to right, #fffff , #fffff' type='button' value='已处理'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
                str += "<td class='location'> <input style='color:#fff;background-color:#32C1A2;width: 50px' type='button' value='已处理'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";

              }
            }
@@ -899,6 +832,25 @@


          }

          that.clearLayer();//图标清除
          that.entityData = [];
          for (var i = 0; i < result.length; i++) {
            result[i].x = Number(result[i].jd);
            result[i].y = Number(result[i].wd);
            that.entityData.push({
              lgtd: Number(result[i].jd),
              lttd: Number(result[i].wd)
            })
          }
          // console.log(result);//警情
          if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
            that.heatmapfeatureLayer.clear();
            that.heatmapfeatureLayer.setRenderer();
            $('.analysis-category input').prop('checked', false);
          };
          that.flareClusterLayer(result);//图标渲染
          that.clusterLayer._setUserState('警情');//切换聚合图标点击事件

          for (var i = 0; i < 1000; i++) {
            var dd = Math.random();
@@ -955,6 +907,26 @@
          // console.log(oldData)
          var result = oldData;
          that.Ydata = oldData;
          that.clearLayer();//图标清除
          that.entityData = [];
          for (var i = 0; i < result.length; i++) {
            result[i].x = Number(result[i].jd);
            result[i].y = Number(result[i].wd);
            that.entityData.push({
              lgtd: Number(result[i].jd),
              lttd: Number(result[i].wd)
            })
          }
          // console.log(result);//业主
          if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
            that.heatmapfeatureLayer.clear();
            that.heatmapfeatureLayer.setRenderer();
            $('.analysis-category input').prop('checked', false);
          };
          that.flareClusterLayer(result);//图标渲染
          that.clusterLayer._setUserState('业主');//切换聚合图标点击事件


          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
@@ -991,7 +963,7 @@
          }


          console.log(that.Ydata);//业主筛选
          // console.log(that.Ydata);//业主筛选
        }
      })
    },
@@ -1057,7 +1029,10 @@
              }
            }
          }

          if(once != 'once'){
            that.clearLayer();//图标清除
            that.entityData = [];
            for (var i = 0; i < result.length; i++) {
              result[i].x = Number(result[i].jd);
              result[i].y = Number(result[i].wd);
@@ -1066,8 +1041,15 @@
                lttd: Number(result[i].wd)
              })
            }
            console.log(result);//设备筛选
          that.flareClusterLayer(result);
            // console.log(result);//设备筛选
            if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
              that.heatmapfeatureLayer.clear();
              that.heatmapfeatureLayer.setRenderer();
              $('.analysis-category input').prop('checked', false);
            };
            that.flareClusterLayer(result);//图标渲染
            that.clusterLayer._setUserState('设备');//切换聚合图标点击事件

          }

          for (var a, i = 0; i < result.length; i++) {
@@ -1264,7 +1246,7 @@


    //聚合图层事件
    flareClusterLayer: function (datas) {  //top聚合事件，导航
    flareClusterLayer: function (datas, userState) {  //top聚合事件，导航

      var that = this;


 src/page/crumbsL/crumbsL.vue

@@ -320,6 +320,7 @@
</script>
<style lang="scss" scoped>
.breadEval {
  color: rgba($color: #000000, $alpha: .7);
  position: relative;
  top: -10px;
  font-size: 14px;

 src/views/suser/suser.vue

@@ -220,9 +220,12 @@
      },
      ids() {
        let ids = [];
          console.log(this.selectionList,111111111);
        this.selectionList.forEach(ele => {
          console.log(ele,id,2222222222);
          ids.push(ele.id);
        });
          console.log(this.selectionList,333333333333);
        return ids.join(",");
      }
    },