修改图层控制

徐旺旺

2021-02-22 a6da1ff6d9b294f46955da5d5cff30919467fa8b

 src/components/helpers/ServiceLayerHelper.js

@@ -2,21 +2,21 @@
/**
 * 创建图层相关的类
 */
import L from 'leaflet'

class ServiceLayerHelper {
  constructor (options) {
    this.map = options.map
    this.L = options.L
    this.tileLayersMap = new Map()
    this.tileLayersWMSArray = []
    this.tileLayersWMTSArray = []
    this.tileLayersTileArray = []
    this.L = window.L
    this.loadedLayersMap = new Map()
    this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.mapConfig = {}
  }

  getTileLayer (code) {
    return this.tileLayersMap.get(code)
    return this.loadedLayersMap.get(code)
  }

  /**
@@ -36,13 +36,25 @@
    console.debug('ServiceLayerHelper加载参数：', mapConfig)
    for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
      const opt = mapConfig.mapConfig.ServiceLayers[i]
      this.setArray(opt)
      if (opt.type === 'wmts') {
        this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'wms') {
        this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'tile') {
        this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      }
    }
  }

  setArray (opt) {
    var type = opt.type
    if (type === 'wmts') {
      this.tileLayersWMTSArray.push(opt)
    } else if (type === 'wms') {
      this.tileLayersWMSArray.push(opt)
    } else if (type === 'tile') {
      this.tileLayersTileArray.push(opt)
    }
  }

@@ -58,8 +70,7 @@
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMTSArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -72,10 +83,9 @@
    layer.config = config

    if (isAddToMap) {
      layer.addTo(this.map)
      layer.addTo(this.tileLayerWmslayerGroup)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMSArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -88,7 +98,7 @@
      layers: options.layers || 'all', // country
      format: options.format || 'image/png',
      transparent: options.true || true,
      crs: options.crs || L.CRS.EPSG4326,
      crs: options.crs || this.L.CRS.EPSG4326,
      maxZoom: options.maxZoom || 21,
      minZoom: options.minZoom || 1,
      zoomOffset: options.zoomOffset || 0
@@ -98,8 +108,7 @@
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersTileArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -107,8 +116,8 @@
     * @param {*} name
     */
  hideTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.removeLayer(tileLayer)
    }
  }
@@ -118,10 +127,32 @@
     * @param {*} name
     */
  showTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.addLayer(tileLayer)
    }
  }

  /**
   * 得到选中的图层列表
   * @param mapConfig
   * @returns {[]}
   */
  getCheckedLayers (mapConfig) {
    var checkedLayers = []
    var serviceLayers = mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var serviceLayer = serviceLayers[i]
      var layers = serviceLayer.layers
      for (var j = 0; j < layers.length; j++) {
        var layer = layers[j]
        var checked = layer.checked
        if (checked) {
          checkedLayers.push(layer)
        }
      }
    }
    return checkedLayers
  }

  /**
@@ -146,13 +177,20 @@
  }

  /**
   * 根据线的选择，得到点的可选择图层数据
   */
  getFiltersGroup () {

  }

  /**
     * 通过code查找WMS的服务配置
     * @param {} code wms服务配置的code
     */
  getWMSConfig (code) {
    const mc = this.mapConfig
    for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
      if (code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
      if (code === mc.mapConfig.ServiceLayers[i].code || mc.mapConfig.ServiceLayers[i].type === 'wms') {
        return mc.mapConfig.ServiceLayers[i]
      }
    }