图层控制修改

徐旺旺

2021-05-12 8ee4edce98711de3917d9da85e928ad7285bf914

图层控制修改

 src/components/LayerController/dataset/WmsLayerList.js

New file
@@ -0,0 +1,70 @@

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

  addConfig (config) {
    const typeName = config.typeName
    const layerGroup = config.layerGroup || typeName
    const filter = config.filter
    if (layerGroup) {
      this.addLayer(layerGroup, typeName, filter)
    }
  }

  addLayer (layerGroup, typeName, filter) {
    const layers = this.layers
    const layer = layers[layerGroup]
    if (layer) {
      layers[layerGroup].push({ typeName: typeName, filter: filter || 'INCLUDE' })
    } else {
      layers[layerGroup] = [{ typeName: typeName, filter: filter || 'INCLUDE' }]
    }
  }

  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]
          }
          break
        }
      }
    }
  }

  getLayers () {
    const layers = this.layers
    const _layers = []
    for (const k in layers) {
      _layers.push(k)
    }
    return _layers.join(',')
  }

  getFilters () {
    const layers = this.layers
    const cqlFilters = []
    for (const k in layers) {
      const filters = []
      for (let i = 0; i < layers[k].length; i++) {
        filters.push(layers[k][i].filter)
      }
      cqlFilters.push(filters.join(' OR '))
    }
    return cqlFilters.join(';')
  }
}

export default WmsLayerList

 src/components/LayerController/service/LayerFactory.js

@@ -36,7 +36,7 @@
        var childLayer = config.childLayer
        var checked = config.checked
        /* if (config.groupName) {
          const wmsGroupLayerService = new WmsGroupLayerService(config)
          const wmsGroupLayerService = new WmsLayerGroupService(config)
          wmsGroupLayerService.init()
          continue
        } */

 src/components/LayerController/service/WmsLayerGroupService.js

File was renamed from src/components/LayerController/service/WmsGroupLayerService.js
@@ -4,7 +4,7 @@
/**
 * wms 图层组的管理
 */
class WmsGroupLayerService {
class WmsLayerGroupService {
  constructor (config) {
    this.config = config
    this.L = window.L
@@ -13,8 +13,18 @@
    this.map = window.map
    this.popupComp = window.popupComp
    // {groupName:{url:'.../wms',layers:[]}}
    this.groups = []
    this.map.on('click', (e) => this.click(e))
  }

  load () {
    for (var k in this.groups) {
      console.log(k)
      this.L.tileLayer.wms(PIPELINE_WMS, {
        format: 'image/png', // 返回的数据格式
        transparent: true,
        layers: k // todo
      }).addTo(this.layer).bringToFront()
    }
  }

  init () {
@@ -53,17 +63,6 @@
          layers: [layerName]
        }
      }
    }
  }

  load () {
    for (var k in this.groups) {
      console.log(k)
      this.L.tileLayer.wms(PIPELINE_WMS, {
        format: 'image/png', // 返回的数据格式
        transparent: true,
        layers: k // todo
      }).addTo(this.layer).bringToFront()
    }
  }

@@ -114,4 +113,4 @@
  }
}

export default WmsGroupLayerService
export default WmsLayerGroupService

 src/components/LayerController/service/WmsLayerService.js

@@ -1,7 +1,7 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import List from '../../../utils/List'
import WmsLayerList from '../dataset/WmsLayerList'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -28,57 +28,59 @@
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = new List()
    this.filters = new List()
    this.wmsLayerList = new WmsLayerList()
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      const typeName = config.typeName
      if (typeName) {
        this.layers.add(config.index, typeName)
        if (config.filter) {
          this.filters.addEnd(config.filter)
        }
      }
      this.wmsLayerList.addConfig(config)
    }
    this.load()
  }

  init () {
    if (this.layers) {
      this.load(this.layers)
      this.clickListener()
    }
    this.clickListener()
  }

  add (config) {
    const typeName = config.typeName
    if (typeName) {
      if (!this.layers.contains(typeName)) {
        this.layers.add(config.index, typeName)
        if (config.filter) {
          this.filters.addEnd(config.filter)
        }
        this.wmsLayer.setParams({ cql_filter: this.filters.join(' and ') })
      }
    this.wmsLayerList.addConfig(config)
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const params = {}
    if (filter) {
      params.cql_filter = filter
    }
    if (layers) {
      params.layers = layers
    }
    this.wmsLayer.setParams(params)
  }

  remove (config) {
    console.log(config)
    const typeName = config.typeName
    this.layers.remove(typeName)
    if (config.filter) {
      this.filters.remove(config.filter)
    this.wmsLayerList.remove(config.typeName, config.filter)
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const params = { layers: layers }
    if (filter) {
      params.cql_filter = filter
    }
    this.wmsLayer.setParams({ cql_filter: this.filters.join(' and ') })
    this.wmsLayer.setParams(params)
  }

  load (layers) {
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
  load () {
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const params = {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      layers: 'sewer:pipesegment', // this.layers.join(','),
      cql_filter: this.filters.join(' and ')
    }).addTo(this.map)
      BBOX: this.map.getBounds().toBBoxString()
    }
    if (layers) {
      params.layers = layers
    }
    if (filter.length > 0) {
      params.cql_filter = filter
    }
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, params).addTo(this.map)
  }

  clickListener () {
@@ -88,11 +90,11 @@
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()

      if (this.layers.length() > 0) {
      const layers = this.wmsLayerList.getLayers()
      if (layers.length > 0) {
        const params = Object.assign({
          LAYERS: this.layers.join(','),
          QUERY_LAYERS: this.layers.join(','),
          LAYERS: layers,
          QUERY_LAYERS: layers,
          WIDTH: size.x,
          HEIGHT: size.y,
          X: Math.round(point.x),

 src/conf/layers/LayerFsss.js

@@ -1,8 +1,8 @@
/**
 * 区域
 */
import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
const WFS_URL = PIPELINE_WFS
import { SERVICE_TYPE } from '../Constants'

export const LayerFsss = {
  code: 'sewersFsss',
  name: '附属设施',
@@ -46,7 +46,7 @@
      sname: 'PipeRack',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: WFS_URL + '?TYPENAME=管架',
      typeName: 'sewer:piperack',
      checked: false
    },
    {
@@ -55,7 +55,7 @@
      sname: 'PipeGallery',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: '?TYPENAME=管廊',
      typeName: 'sewer:pipegallery',
      checked: false
    },
    {

 src/conf/layers/LayerHbss.js

@@ -1,8 +1,7 @@
/**
 * 区域
 */
import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
const WFS_URL = PIPELINE_WFS
import { SERVICE_TYPE } from '../Constants'
export const LayerHbss = {
  code: 'sewersHbss',
  name: '环保设施',
@@ -35,7 +34,7 @@
      sname: '防火堤',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=防火堤',
      typeName: 'sewer:firedike',
      checked: false
    },
    {
@@ -43,7 +42,7 @@
      name: '集水池',
      sname: '集水池',
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=集水池',
      typeName: 'sewer:collectingbasin',
      checked: false,
      type: SERVICE_TYPE.WMS,
      icon: 'sewers/集水池.png'
@@ -53,7 +52,7 @@
      name: '截流闸',
      sname: '截流闸',
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=截流闸',
      typeName: 'sewer:collectingbasin',
      checked: false
    },
    {
@@ -62,7 +61,7 @@
      sname: '溢流堰',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=溢流堰',
      typeName: 'ewer:overflowweir',
      checked: false
    },
    {
@@ -72,7 +71,7 @@
      minZoom: 16,
      checked: false,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=隔油池',
      typeName: 'ewer:oilseparator',
      icon: 'sewers/隔油池.png'
    }
  ]

 src/conf/layers/LayerPipeLines.js

@@ -19,7 +19,8 @@
      sname: '管网',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
@@ -36,7 +37,8 @@
      sname: '事故水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      minZoom: 13,
      filter: 'mediumtype = \'事故水\'',
      index: 1
@@ -47,7 +49,8 @@
      sname: '含油污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      minZoom: 13,
      color: '#ffaa00',
      filter: 'mediumtype = \'含油污水\'',
@@ -63,7 +66,8 @@
      sname: '含盐污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      minZoom: 13,
      filter: 'mediumtype = \'含盐污水\'',
      index: 1
@@ -74,7 +78,8 @@
      sname: '含碱污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含碱污水\'',
      minZoom: 10,
      index: 1
@@ -85,7 +90,8 @@
      sname: '含硫污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含硫污水\'',
      minZoom: 10,
      index: 1
@@ -96,7 +102,8 @@
      sname: '生活污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'生活污水\'',
      minZoom: 13,
      index: 1
@@ -107,7 +114,8 @@
      sname: '净化水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'净化水\'',
      minZoom: 13,
      index: 1
@@ -117,7 +125,8 @@
      name: '循环水',
      sname: '循环水',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'循环水\'',
      checked: false,
      minZoom: 13,
@@ -129,7 +138,8 @@
      sname: '生产污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'生产污水\'',
      minZoom: 13,
      color: '#a8a800',