修改图例动画功能

chenzeping

2021-03-08 3cc9f0efa740810f88738788b062f348d8d9b48a

修改图例动画功能

 public/assets/images/map/sewers/ÎÛË®ÅÅ¿Ú.png

 public/assets/images/map/sewers/ÎÛË®ÖÕµã.png

 public/assets/images/map/sewers/ÎÛË®Æðµã.png

 public/assets/images/map/sewers/±Ã.png

 public/assets/images/map/sewers/񿾮.png

 public/assets/images/map/sewers/¹ÜÏßµã.png

 public/assets/images/map/sewers/ÓêË®ÅÅ¿Ú.png

 public/assets/images/map/sewers/Óêó÷×Ó.png

 src/components/helpers/ServiceLayerHelper.js

@@ -15,8 +15,7 @@
    this.tileLayersWMTSArray = [] // åˆå§‹çš„WMTS集
    this.tileLayersTileArray = [] // åˆå§‹çš„Tile集
    this.tileLayersWMSArray = [] // åˆå§‹çš„WMS集
    this.geojsonArray = {} // åˆå§‹çš„geojson集
    this.layerConfig = {}
    this.layerArray = {} // key为配置的code，加载的图层对象，
    this.regex = /\{(.+?)\}/g // åŒ¹é…{}
    this.popupComp = null
  }
@@ -25,14 +24,55 @@
    return this.loadedLayersMap.get(code)
  }

  getByLayerId (layerId) {
    for (var k in this.layerArray) {
      var layer = this.layerArray[k]
      var geojson = layer.toGeoJSON()
      var features = geojson.features
      for (var j = 0; j < features.length; j++) {
        var feature = features[j]
        if (feature.id === layerId) {
          return layer
        }
      }
    }
    return null
  }

  initDisplayZoom (layerConfig) {
    var that = this
    that.map.on('zoomend ', function (e) {
      const zoom = that.map.getZoom()
      for (var i = 0, l = layerConfig.length; i < l; i++) {
        var config = layerConfig[i]
        var layers = config.layers
        for (var j = 0; j < layers.length; j++) {
          var layer = layers[j]
          if (layer.minZoom) {
            if (zoom > layer.minZoom) {
              var layerObj = that.layerArray[layer.code]
              layerObj && layerObj.addTo(that.map)
            } else {
              that.removeLayer(layer)
            }
          }
        }
      }
    })
  }

  /**
     * æ ¹æ®é…ç½®æ–‡ä»¶åˆå§‹åŒ–业务底图
     */
  initServiceLayers (layerConfig, popupComp) {
    this.layerConfig = layerConfig
    this.popupComp = popupComp
    store.commit('clearSewersDatas')
    store.commit('clearSewersLayers')
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
    this.initDisplayZoom(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.initDisplayZoom(layerConfig.mapConfig.Layers.layerSewersPoint)
  }

  /**
@@ -82,12 +122,14 @@
    var code = item.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.geojsonArray[code]) {
    if (!that.layerArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        store.commit('setSewersDatas', res)
        store.commit('addSewersDatas', res)
        var layer = that.loadGeojson(res, item)
        that.geojsonArray[code] = layer
        that.layerArray[code] = layer
      })
    } else {
      that.layerArray[code].addTo(that.map)
    }
  }

@@ -98,7 +140,6 @@
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const featureGroup = that.L.featureGroup().addTo(that.map)
    const geojson = that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
@@ -135,10 +176,13 @@
      .bindTooltip(function (layer) {
        const nameId = layer.feature.id
        let name = ''
        if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1) {
        if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
          name = layer.feature.properties.pointnumber
        } else {
          name = layer.feature.properties.name
        }
        if (name === undefined) {
          name = ''
        }
        return name
      }, { direction: 'bottom', offset: [0, 15], sticky: true })
@@ -171,22 +215,19 @@
            }
          })
        }
      }).addTo(featureGroup)
      }).addTo(that.map)
    store.commit('addSewersDatas', geojson)
    if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
      geojson.bringToBack()
    } else {
      geojson.bringToFront()
    }
    return featureGroup
    return geojson
  }

  removeLayer (item) {
    var code = item.code
    var layer = this.geojsonArray[code]
    if (layer) {
      this.map.removeLayer(layer)
      delete this.geojsonArray[code]
    }
    var layer = this.layerArray[item.code]
    layer && this.map.removeLayer(layer)
  }

  /**

 src/components/panel/LegendPanel.vue

@@ -6,7 +6,7 @@
    </div>
    <transition name="fade">
      <div class="legend-content" v-show="legendControl">
        <div class="legend-content-centent" v-for="(item,index) in legendContents" :key="index">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
          <ul>
            <li v-for="(ite,inde) in item.items" :key="inde">
@@ -206,11 +206,12 @@
  methods: {
    // å›¾æ ‡ æŽ§åˆ¶å†…容的展示与隐藏
    legendChange () {
      if (this.legendControl === false) {
        this.legendControl = true
      } else {
        this.legendControl = false
      }
      // if (this.legendControl === false) {
      //   this.legendControl = true
      // } else {
      //   this.legendControl = false
      // }
      this.legendControl = !this.legendControl
    }
  }
}
@@ -242,9 +243,9 @@
      transform: scale(0);
      opacity: 0.3;
    }
    50% {
      transform: scale(1.2);
    }
    //50% {
    //  transform: scale(1.1);
    //}
    100% {
      transform: scale(1);
      opacity: 1;
@@ -252,13 +253,15 @@
  }

  .fade-enter-active {
    transform-origin: right center;
    animation: bounce-in 1s;
    transform-origin: right bottom;
    animation: bounce-in .5s;
  }

  .fade-leave-active {
    transform-origin: right;
    animation: bounce-in 1s reverse;
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
  }

  .legend-content {
@@ -270,7 +273,7 @@
    border-radius: 1rem;
    background: #3c7699;

    .legend-content-centent {
    .legend-content-box {
      p {
        text-align: center;
        color: #ffffff;

 src/components/panel/topicSearch/SewersSearch.vue

@@ -173,6 +173,7 @@
      wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // const _this = this
      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
        this.list = res.features
      })
    },
@@ -180,6 +181,9 @@
      console.log(val)
      const bound = this.L.geoJSON([val], {}).getBounds()
      console.log(bound)
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      console.log(layer)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
    }
  }

 src/conf/LayerSewers.js

@@ -16,7 +16,7 @@
      sname: '管网', // è¡¨å
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      zoom: 10, // åœ¨æŒ‡å®šçº§åˆ«æ˜¾ç¤º
      minZoom: 10, // åœ¨æŒ‡å®šçº§åˆ«æ˜¾ç¤º
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -25,6 +25,7 @@
      sname: '含油污水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -33,6 +34,7 @@
      sname: '含盐污水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -41,6 +43,7 @@
      sname: '含碱污水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -49,6 +52,7 @@
      sname: '排口',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'pk' // å…³è”PointLayers
    },
    {
@@ -57,6 +61,7 @@
      sname: '事故水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -65,6 +70,7 @@
      sname: '循环水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -73,6 +79,7 @@
      sname: '净化水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -81,6 +88,7 @@
      sname: '生活污水',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'fsss,hbss' // å…³è”PointLayers
    },
    {
@@ -89,6 +97,7 @@
      sname: '区域信息',
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      filter: {},
      minZoom: 10,
      childLayer: 'qyxx' // å…³è”PointLayers
    }
  ]
@@ -107,6 +116,7 @@
        name: '四通',
        sname: '四通',
        checked: true,
        minZoom: 10,
        icon: 'sewers/四通.png'
      },
      {
@@ -114,18 +124,21 @@
        name: '三通',
        sname: '三通',
        checked: false,
        minZoom: 10,
        icon: 'sewers/三通.png'
      },
      {
        code: 'piperack',
        name: '管架(墩)',
        sname: 'PipeRack',
        minZoom: 10,
        checked: false
      },
      {
        code: 'pipegallery',
        name: '管廊(带)',
        sname: 'PipeGallery',
        minZoom: 10,
        checked: false
      },
      {
@@ -137,12 +150,14 @@
      {
        code: 'pipeline',
        name: '管网',
        minZoom: 10,
        sname: 'pipeline',
        checked: false
      },
      {
        code: 'valve',
        name: '阀门',
        minZoom: 10,
        sname: 'valve',
        checked: false,
        icon: 'sewers/阀门.png'
@@ -151,6 +166,7 @@
        code: 'elbow',
        name: '弯头',
        sname: 'Elbow',
        minZoom: 10,
        checked: false,
        icon: 'sewers/弯头.png'
      }
@@ -166,6 +182,7 @@
      {
        code: 'manhole',
        name: '窨井',
        minZoom: 10,
        sname: '窨井',
        checked: false,
        icon: 'sewers/窨井.png'
@@ -174,6 +191,7 @@
        code: 'firedike',
        name: '防火堤',
        sname: '防火堤',
        minZoom: 10,
        checked: false
      },
      {
@@ -181,24 +199,28 @@
        name: '雨篦子',
        sname: '雨篦子',
        checked: false,
        minZoom: 10,
        icon: 'sewers/雨篦子.png'
      },
      {
        code: 'overflowweir',
        name: '溢流堰',
        sname: '溢流堰',
        minZoom: 10,
        checked: false
      },
      {
        code: 'chokevalve',
        name: '截流闸',
        sname: '截流闸',
        minZoom: 10,
        checked: false
      },
      {
        code: 'collectingbasin',
        name: '集水池(罐)',
        sname: '集水池',
        minZoom: 10,
        checked: false,
        icon: 'sewers/集水池.png'
      },
@@ -206,6 +228,7 @@
        code: 'oilseparator',
        name: '隔油池',
        sname: '隔油池',
        minZoom: 10,
        checked: false,
        icon: 'sewers/隔油池.png'
      }
@@ -221,6 +244,7 @@
      {
        code: 'dischargeport',
        name: '排放口',
        minZoom: 10,
        sname: '排放口',
        checked: false
      }
@@ -236,6 +260,7 @@
      {
        code: 'thirdpartypipe',
        name: '第三方管道',
        minZoom: 10,
        sname: '第三方管道',
        checked: false
      },
@@ -243,6 +268,7 @@
        code: 'firefightingunit',
        name: '消防单位',
        sname: '消防单位',
        minZoom: 10,
        checked: false,
        icon: 'sewers/消防单位.png'
      },
@@ -250,6 +276,7 @@
        code: 'emergencyesources',
        name: '应急物资',
        sname: '应急物资',
        minZoom: 10,
        checked: false
      },
      {
@@ -257,6 +284,7 @@
        name: '社会专业应急救援队伍',
        sname: '专业应急救援',
        checked: false,
        minZoom: 10,
        icon: 'sewers/社会专业应急救援.png'
      },
      {
@@ -264,6 +292,7 @@
        name: '维抢修队伍',
        sname: '维抢修队伍',
        checked: false,
        minZoom: 10,
        icon: 'sewers/社会专业应急救援.png'
      },
      {
@@ -271,6 +300,7 @@
        name: '医院',
        sname: '医院',
        checked: false,
        minZoom: 10,
        icon: 'sewers/医院.png'
      },
      {
@@ -278,6 +308,7 @@
        name: '自然保护区',
        sname: '自然保护区',
        checked: false,
        minZoom: 10,
        icon: 'sewers/自然保护区.png'
      },
      {
@@ -285,6 +316,7 @@
        name: '水体',
        sname: '水体',
        checked: false,
        minZoom: 10,
        icon: 'sewers/水体.png'
      },
      {
@@ -292,6 +324,7 @@
        name: '敏感目标',
        sname: '敏感目标',
        checked: false,
        minZoom: 10,
        icon: 'sewers/敏感目标.png'
      },
      {
@@ -299,18 +332,21 @@
        name: '环境监测单位',
        sname: '环境监测单位',
        checked: false,
        minZoom: 10,
        icon: 'sewers/环境监测单位.png'
      },
      {
        code: 'pointcontaminants',
        name: '监测点污染物指标信息',
        sname: '污染物指标',
        minZoom: 10,
        checked: false
      },
      {
        code: 'dischargeportaround',
        name: '排放口周边环境敏感信息',
        sname: '排放口周边环境',
        minZoom: 10,
        checked: false,
        iconN: 'sewers/排放口周边敏感信息.png'
      },
@@ -318,6 +354,7 @@
        code: 'pump',
        name: 'æ³µ',
        sname: 'æ³µ',
        minZoom: 10,
        checked: false,
        icon: 'sewers/æ³µ.png'
      },
@@ -326,12 +363,14 @@
        name: '液位计',
        sname: '液位计',
        checked: false,
        minZoom: 10,
        icon: 'sewers/液位计.png'
      },
      {
        code: 'flowmeter',
        name: '流量计',
        sname: '流量计',
        minZoom: 10,
        checked: false,
        icon: 'sewers/流量计.png'
      },
@@ -339,30 +378,35 @@
        code: 'video',
        name: '视频监控配置',
        sname: '视频监控',
        minZoom: 10,
        checked: false
      },
      {
        code: 'onlinemonitoring',
        name: '在线监测设备配置',
        sname: '在线监测',
        minZoom: 10,
        checked: false
      },
      {
        code: 'combustiblegas',
        name: '可燃气体报警设备配置',
        sname: '可燃气体报警',
        minZoom: 10,
        checked: false
      },
      {
        code: 'hydrogensulfide',
        name: 'H2S浓度报警设备配置',
        sname: 'H2S浓度报警',
        minZoom: 10,
        checked: false
      },
      {
        code: 'controlpoint',
        name: '管线点',
        sname: '管线点',
        minZoom: 10,
        checked: false,
        icon: 'sewers/管线点.png'
      },
@@ -370,6 +414,7 @@
        code: 'pipesegment',
        name: '管段',
        sname: '管段',
        minZoom: 10,
        checked: false
      }
    ]

 src/store/modules/map.js

@@ -14,7 +14,11 @@
  selectedServiceLayer: '', // ä½¿ç”¨è¿‡æ»¤å™¨æ—¶ï¼Œè¢«æ‰“开的WMS服务的CODE
  serviceLayerFilters: {}, // æœåŠ¡å›¾å±‚控制过滤配置
  checkedLayers: {}, // é€‰ä¸­å›¾å±‚对象
  // å›¾å±‚数据
  // å›¾å±‚数据,图层对象
  layers: {
    sewers: []
  },
  // åŽŸå§‹åŽå°JSON数据
  datas: {
    sewers: []
  },
@@ -30,8 +34,17 @@
    state.map = map
  },
  // è®¾ç½®æ±¡é›¨æ°´å›¾å±‚数据
  setSewersDatas (state, sewersDatas) {
    state.datas.sewers = sewersDatas
  addSewersLayers (state, sewersLayers) {
    state.layers.sewers.push(sewersLayers)
  },
  clearSewersLayers (state, SewersLayers) {
    state.layers.sewers = []
  },
  addSewersDatas (state, sewersDatas) {
    state.datas.sewers.push(sewersDatas)
  },
  clearSewersDatas (state, sewersDatas) {
    state.datas.sewers = []
  },
  setBasemapHelper (state, layerHelper) {
    state.basemapHelper = layerHelper