修改图层控制

徐旺旺

2021-02-22 b89ad0355f2d466304ecc2dad86407e26aa69db4

 src/components/helpers/ServiceLayerHelper.js

@@ -2,151 +2,233 @@
/**
 * 创建图层相关的类
 */
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.mapConfig = {}
    }
import AjaxUtils from '@/utils/AjaxUtils'

    /**
class ServiceLayerHelper {
  constructor (options) {
    this.map = options.map
    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.geojsonArray = [] // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
  }

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

  /**
     * 根据配置文件初始化业务底图
     */
    initServiceLayers(mapConfig){
        this.mapConfig = mapConfig
        this._loadLayers(mapConfig)
    }
  initServiceLayers (layerConfig) {
    this.layerConfig = layerConfig
    this._loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
  }

    /**
  /**
     * 按配置文件加载三种不同类型的
     * @param {*} mapConfig 
     * @param {*} isAddToMap 
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
    _loadLayers(mapConfig, isAddToMap = true){
        console.debug('ServiceLayerHelper加载参数：',mapConfig)
        for(let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = mapConfig.mapConfig.ServiceLayers[i]
            if(opt.type === 'wmts') {
                this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }else if(opt.type === 'wms') {
                this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }else if(opt.type === 'tile') {
                this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
  _loadLayers (layerConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', layerConfig)
    for (let i = 0, len = layerConfig.length; i < len; ++i) {
      const opt = layerConfig[i]
      if (opt.checked) {
        if (opt.type === 'wmts') {
          this.loadWmtsLayer(opt, isAddToMap)
          this.tileLayersWMTSArray.push(opt)
        } else if (opt.type === 'wms') {
          this.loadWmsLayer(opt, isAddToMap)
          this.tileLayersWMSArray.push(opt)
        } else if (opt.type === 'tile') {
          this.loadTileLayer(opt, isAddToMap)
          this.tileLayersTileArray.push(opt)
        } else if (opt.type === 'geojson') {
          this.loadGeojson(opt)
        }
      }
    }
  }

  loadGeojson (options) {
    var url = options.url
    var layers = options.layers
    var matches = this.regex.exec(url)
    for (var i = 0; i < layers.length; i++) {
      var layer = layers[i]
      var matchValue = layer[matches[1]]
      var checked = layer.checked
      if (!checked) {
        continue
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        // let geojsondata =    L.geoJSON(test.features,{
        that.L.geoJSON(res.features, {
          style: function (feature) {
            return {
              fill: true,
              weight: 2,
              fillColor: '#06cccc',
              color: '#06cccc',
              fillOpacity: 0.2,
              opacity: 0.8,
              dashArray: '10,4',
              dashSpeed: -10
            }
        }
          },
          minZoom: 10
        }).bindPopup(function (layer) {
          // return layer.feature.properties.linenumber
        }).addTo(that.map)
      })
    }
  }

    /**
  /**
     * 往地图中加入一个WMTS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadWmtsLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer(options.url, options.option);
        layer.config = config
        
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersWMTSArray.push(layer)
  loadWmtsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, options.option)
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.map)
    }
    /**
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadWmsLayer(options, isAddToMap = true, config) {
        const layer =this.L.tileLayer.wms(options.url, options.option);
        layer.config = config
  loadWmsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer.wms(options.url, options.option)
    layer.config = options

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

    /**
  /**
     * 往地图中加入一个TILE服务
     * @param {}} options 
     * @param {*} isAddToMap 
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadTileLayer(options, isAddToMap = true, config) {
        const layer =this.L.tileLayer(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs: options.crs || L.CRS.EPSG4326,
            maxZoom: options.maxZoom || 21,
            minZoom: options.minZoom || 1,
            zoomOffset: options.zoomOffset || 0
        });
        layer.config = config
    
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code , layer)
        this.tileLayersTileArray.push(layer)
    }
    /**
     * 隐藏服务图层
     * @param {*} name 
     */
    hideTileLayer(code){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(code)
            this.map.removeLayer(tileLayer)
        }
    }
    /**
     * 展示服务图层
     * @param {*} name 
     */
    showTileLayer(code){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(code)
            this.map.addLayer(tileLayer)
        }
    }
  loadTileLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, {
      layers: options.layers || 'all', // country
      format: options.format || 'image/png',
      transparent: options.true || true,
      crs: options.crs || this.L.CRS.EPSG4326,
      maxZoom: options.maxZoom || 21,
      minZoom: options.minZoom || 1,
      zoomOffset: options.zoomOffset || 0
    })
    layer.config = options

    /**
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
     * 隐藏服务图层
     * @param {*} name
     */
  hideTileLayer (code) {
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.removeLayer(tileLayer)
    }
  }

  /**
     * 展示服务图层
     * @param {*} name
     */
  showTileLayer (code) {
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.addLayer(tileLayer)
    }
  }

  /**
     * 得到选中的图层列表
     * @param mapConfig
     * @returns {[]}
     */
  getCheckedLayers (serviceLayers) {
    var checkedLayers = []
    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
  }

  /**
     * 获取所有的TILE服务图层
     */
    getTileLayers(){
        return this.tileLayersTileArray
    }
    /**
  getTileLayers () {
    return this.tileLayersTileArray
  }

  /**
     * 获取所有的WMTS服务图层
     */
    getWmtsLayers(){
        return this.tileLayersWMTSArray
    }
    /**
  getWmtsLayers () {
    return this.tileLayersWMTSArray
  }

  /**
     * 获取所有的WMS服务图层
     */
    getWmsLayers(){
        return this.tileLayersWMSArray
    }
  getWmsLayers () {
    return this.tileLayersWMSArray
  }

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

  }

  /**
     * 通过code查找WMS的服务配置
     * @param {} code wms服务配置的code
     */
    getWMSConfig(code){
        let 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'){
                return mc.mapConfig.ServiceLayers[i]
            }
        }
        return null
  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') {
        return mc.mapConfig.ServiceLayers[i]
      }
    }
    return null
  }
}

export default ServiceLayerHelper