修改图层控制BUG

徐旺旺

2021-05-14 fb36301ca4335e9f511a877569204153e9d461fe

修改图层控制BUG

 src/components/LayerController/dataset/WmsLayerList.js

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

class WmsLayerList {
  constructor () {
    // {图层名称：[{typeName:xxx,filter:yyy}]}
    // [{图层名称：[{typeName:xxx,filter:yyy}]}]
    this.layers = []
  }

@@ -9,36 +10,76 @@
    const typeName = config.typeName
    const layerGroup = config.layerGroup || typeName
    const filter = config.filter
    const index = config.index || 9
    if (layerGroup) {
      this.addLayer(layerGroup, typeName, filter)
      this.addLayer(layerGroup, typeName, filter, index)
    }
  }

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

    if (layer) {
      layers[layerGroup].push({ typeName: typeName, filter: filter || 'INCLUDE' })
      const offset = this.indexOf(typeName, filter)
      if (offset < 0) {
        const layerConfig = layer[layerGroup]
        layerConfig.push({ typeName: typeName, filter: filter || 'INCLUDE' })
      }
    } else {
      layers[layerGroup] = [{ typeName: typeName, filter: filter || 'INCLUDE' }]
      const layerConfig = {}
      layerConfig[layerGroup] = [{ typeName: typeName, filter: filter || 'INCLUDE' }]
      this.layers.push(layerConfig)
    }
  }

  _getLayer (layer) {
    const layers = this.layers
    for (let i = 0; i < layers.length; i++) {
      const lay = layers[i]
      if (lay[layer]) {
        return lay
      }
    }
    return null
  }

  indexOf (typeName, filter) {
    filter = filter || 'INCLUDE'
    const layers = this.layers
    for (let i = 0; i < layers.length; i++) {
      const layer = layers[i]
      for (const k in layer) {
        const lay = layer[k]
        for (let j = 0; j < lay.length; j++) {
          const l = lay[j]
          if (typeName === l.typeName && filter === l.filter) {
            return j
          }
        }
      }
    }
    return -1
  }

  remove (typeName, filter) {
    const layers = this.layers
    for (const k in layers) {
      if (k === typeName) {
        delete this.layers[k]
        break
      }
      for (let i = 0; i < layers[k].length; i++) {
        const layer = layers[k][i]
        if (typeName === layer.typeName && filter === layer.filter) {
          this.layers[k].splice(i, 1)
          if (this.layers[k].length === 0) {
            delete this.layers[k]
          }
    filter = filter || 'INCLUDE'
    const layers = clone(this.layers)
    for (let j = 0; j < layers.length; j++) {
      const layer = layers[j]
      for (const k in layer) {
        /* if (typeName === k) {
          delete this.layers[j][k]
          break
        } */
        const layerConfig = layer[k]
        for (let i = 0; i < layerConfig.length; i++) {
          const lay = layerConfig[i]
          if (typeName === lay.typeName && filter === lay.filter) {
            this.layers[j][k].splice(i, 1)
            if (this.layers[j][k].length === 0) {
              this.layers.splice(j, 1)
            }
          }
        }
      }
    }
@@ -47,8 +88,11 @@
  getLayers () {
    const layers = this.layers
    const _layers = []
    for (const k in layers) {
      _layers.push(k)
    for (let i = 0; i < layers.length; i++) {
      const layer = layers[i]
      for (const k in layer) {
        _layers.push(k)
      }
    }
    return _layers.join(',')
  }
@@ -56,15 +100,37 @@
  getFilters () {
    const layers = this.layers
    const cqlFilters = []
    for (const k in layers) {
    for (let i = 0; i < layers.length; i++) {
      const layer = layers[i]
      const filters = []
      for (let i = 0; i < layers[k].length; i++) {
        filters.push(layers[k][i].filter)
      for (const k in layer) {
        const layerConfig = layer[k]
        for (let i = 0; i < layerConfig.length; i++) {
          const filter = layerConfig[i].filter
          if (filter) {
            filters.push(filter)
          }
        }
      }
      cqlFilters.push(filters.join(' OR '))
    }
    return cqlFilters.join(';')
  }

  /**
   * 添加元素到指定位置
   * @param index
   * @param element
   * @private
   */
  _addIndex (index, element) {
    const newArr = []
    for (var i = this.dataSouce.length - 1; i > index - 1; i--) {
      newArr[i + 1] = this.dataSouce[i]
    }
    newArr[index] = element
    this.layers = newArr
  }
}

export default WmsLayerList

 src/conf/Constants.js

@@ -38,6 +38,7 @@
export const props = {
  code: '编号',
  name: '名称',
  teamname: '名称',
  pfktype: '排放口类型',
  level: '级别',
  length: '长度(m)',

 src/conf/layers/LayerHbss.js

@@ -14,7 +14,7 @@
      checked: false,
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wmsLayers: 'sewer:manhole',
      typeName: 'sewer:manhole',
      icon: 'sewers/窨井.png'
    },
    {

 src/conf/layers/LayerPk.js

@@ -7,17 +7,18 @@
  code: 'sewersDischargeport',
  name: '排放口',
  icon: 'sewers/雨水排口.png',
  checked: true,
  checked: false,
  type: 0,
  layers: [
    {
      code: 'sewersNpk',
      name: '内排口',
      sname: '内排口',
      checked: true,
      checked: false,
      type: SERVICE_TYPE.WMS,
      icon: 'sewers/雨水排口.png',
      typeName: 'sewer:dischargeport',
      filter: 'pfktype = \'内排\'',
      minZoom: 10 // 在指定级别显示
    },
    {
@@ -25,9 +26,10 @@
      name: '外排口',
      sname: '外排口',
      icon: 'sewers/雨水排口.png',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:dischargeport',
      filter: 'pfktype = \'外排\'',
      minZoom: 10
    }
  ]

 src/utils/utils.js

@@ -24,6 +24,43 @@
}

/**
 * 脉冲效果
 */
export function pulseEffect (xy) {
  let times = 5
  const colors = ['#98FB98', '#ff0000']
  // 插件 效果实现
  var pulsingIcon = window.L.icon.pulse({
    iconSize: [20, 20],
    color: colors[0],
    fillColor: ''
  })
  var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.map)
  // 定时
  var timeInterval = setInterval(() => {
    if (times > 0) {
      times--
    } else {
      clearInterval(timeInterval)
      picGroupMarker.remove()
    }
  }, 1000)
}

/**
 * 设置弹窗平移位置
 * @param pos
 * @param value
 */
export function setPanTo (pos, value) {
  var position = pos
  position = window.map.latLngToLayerPoint(position)
  position.y += value
  position = window.map.layerPointToLatLng(position)
  window.map.flyTo(position)
}

/**
 * 复制对象
 * @param obj
 * @returns {{}}