修改图层控制逻辑

徐旺旺

2021-05-20 2483e4562d0373ed571e7efd0d92890c7fdaec80

修改图层控制逻辑

 src/components/LayerController/dataset/WmsLayerList.js

@@ -1,5 +1,8 @@
import clone from '../../../utils/utils'

/**
 * 组装wms加载所需的layers以及filters参数
 */
class WmsLayerList {
  constructor () {
    // [{图层名称：[{typeName:xxx,filter:yyy}]}]
@@ -10,7 +13,7 @@
    const typeName = config.typeName
    const layerGroup = config.layerGroup || typeName
    const filter = config.filter
    const index = config.index || 9
    const index = config.index
    if (layerGroup) {
      this.addLayer(layerGroup, typeName, filter, index)
    }
@@ -18,7 +21,6 @@

  addLayer (layerGroup, typeName, filter, index) {
    const layer = this._getLayer(layerGroup)

    if (layer) {
      const offset = this.indexOf(typeName, filter)
      if (offset < 0) {
@@ -28,7 +30,11 @@
    } else {
      const layerConfig = {}
      layerConfig[layerGroup] = [{ typeName: typeName, filter: filter || 'INCLUDE' }]
      if (index) {
        this.layers[index] = layerConfig
      } else {
      this.layers.push(layerConfig)
      }
    }
  }

@@ -36,7 +42,7 @@
    const layers = this.layers
    for (let i = 0; i < layers.length; i++) {
      const lay = layers[i]
      if (lay[layer]) {
      if (lay && lay[layer]) {
        return lay
      }
    }
@@ -112,8 +118,10 @@
          }
        }
      }
      if (filters.length > 0) {
      cqlFilters.push(filters.join(' OR '))
    }
    }
    return cqlFilters.join(';')
  }


 src/components/LayerController/modules/LcServiceLayer.vue

@@ -40,6 +40,11 @@
export default {
  name: 'LcServiceLayer',
  components: { LcServiceLayerFilter },
  data () {
    return {
      changeList: []
    }
  },
  computed: {
    serviceLayers () {
      return this.$store.state.map.serviceLayers.LayerSewersLine
@@ -51,8 +56,18 @@
    swAllLayers (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      this.toggleLayer(item)
      // this.toggleLayer(item)
      if (item.layers && item.layers.length > 0) {
      this.swLayers(item.layers, item.checked)
        if (item.checked) {
          window.layerFactory.showAll(this.changeList)
        } else {
          window.layerFactory.hideAll(this.changeList)
        }
        this.changeList = []
      } else {
        this.toggleLayer(item)
      }
      this.serviceLayers.forEach(function (item1, index1) {
        if (item1.layers) {
          item1.istrue = 0
@@ -99,14 +114,14 @@
      })
      // console.log(this.serviceLayers)
    },
    swLayers (layers, checked) {
      if (layers) {
        for (let i = 0, len = layers.length; i < len; ++i) {
          var layer = layers[i]
          layer.checked = checked
          this.toggleLayer(layer)
          if (layer.layers) {
            this.swLayers(layer.layers, checked)
    swLayers (configs, checked) {
      if (configs) {
        for (let i = 0, len = configs.length; i < len; ++i) {
          var config = configs[i]
          config.checked = checked
          this.changeList.push(config)
          if (config.layers) {
            this.swLayers(config.layers, checked)
          }
        }
      }

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -24,6 +24,7 @@
    return {
      visible: {},
      layers: [],
      changeList: [],
      filterConfig: [] // 附属要素
    }
  },
@@ -40,17 +41,28 @@
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      this.toggleLayer(item)
      if (item.layers && item.layers.length > 0) {
      this.swLayers(item.layers, item.checked)
    },
    swLayers (layers, checked) {
      if (layers) {
        for (let i = 0, len = layers.length; i < len; ++i) {
          var layer = layers[i]
          layer.checked = checked
          this.toggleLayer(layer)
          if (layer.layers) {
            this.swLayers(layer.layers, checked)
        if (item.checked) {
          window.layerFactory.showAll(this.changeList)
        } else {
          window.layerFactory.hideAll(this.changeList)
          }
        this.changeList = []
      } else {
        this.toggleLayer(item)
      }
    },
    swLayers (configs, checked) {
      if (configs) {
        for (let i = 0, len = configs.length; i < len; ++i) {
          const config = configs[i]
          const layers = config.layers
          this.changeList.push(config)
          if (layers) {
            this.swLayers(config, checked)
          }
          config.checked = checked
        }
      }
    },

 src/components/LayerController/service/LayerFactory.js

@@ -106,6 +106,16 @@
    return layer
  }

  showAll (configs) {
    if (Array.isArray(configs)) {
      for (let i = 0; i < configs.length; i++) {
        const config = configs[i]
        this.show(config)
      }
      this.wmsLayerService && this.wmsLayerService.addAll(configs)
    }
  }

  /**
   * 如果 存在已经加载了的对象，就直接加到map
   * 如果 不存在则 调用 addLayer 及 逻辑类的init 进行初始化操作
@@ -128,6 +138,15 @@
    this.wmsLayerService && this.wmsLayerService.add(config)
  }

  hideAll (configs) {
    if (Array.isArray(configs)) {
      for (let i = 0; i < configs.length; i++) {
        this.hide(configs[i])
      }
      this.wmsLayerService && this.wmsLayerService.removeAll(configs)
    }
  }

  hide (config) {
    const code = config.code
    const layer = this.layers[code]

 src/components/LayerController/service/WmsLayerGroupService.js

File was deleted

 src/components/LayerController/service/WmsLayerService.js

@@ -40,23 +40,47 @@
  init () {
  }

  addAll (configs) {
    for (let i = 0; i < configs.length; i++) {
      const config = configs[i]
      const layers = config.layers
      if (layers) {
        this.addAll(layers)
      }
      this.wmsLayerList.addConfig(config)
    }
    this.reload()
  }

  add (config) {
    this.wmsLayerList.addConfig(config)
    this.reload()
  }

  removeAll (configs) {
    for (let i = 0; i < configs.length; i++) {
      const config = configs[i]
      const layers = config.layers
      if (layers) {
        this.removeAll(layers)
      }
      this.wmsLayerList.remove(config.typeName, config.filter)
    }
    this.reload()
  }

  remove (config) {
    this.wmsLayerList.remove(config.typeName, config.filter)
    this.reload()
  }

  reload () {
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = {}
    params.cql_filter = filter
    params.layers = layers
    this.wmsLayer.setParams(params)
  }

  remove (config) {
    this.wmsLayerList.remove(config.typeName, config.filter)
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = { layers: layers }
    params.cql_filter = filter
    this.wmsLayer.setParams(params)
    this.wmsLayer.setParams(params, false)
  }

  load () {