修改图例动画功能

chenzeping

2021-03-08 3cc9f0efa740810f88738788b062f348d8d9b48a

 src/components/helpers/ServiceLayerHelper.js

@@ -2,121 +2,376 @@
/**
 * 创建图层相关的类
 */
import L from 'leaflet'
class ServiceLayerHelper {
    constructor(options){
        this.map = options.map
        this.L = options.L
        this.tileLayersMap = new Map()
        this.tileLayersArray = []
        this.mapConfig = {}
    }
import AjaxUtils from '@/utils/AjaxUtils'
import store from '@/store'
import styles from '@/conf/Styles'

    /**
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.layerArray = {} // key为配置的code，加载的图层对象，
    this.regex = /\{(.+?)\}/g // 匹配{}
    this.popupComp = null
  }

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

  getByLayerId (layerId) {
    for (var k in this.layerArray) {
      var layer = this.layerArray[k]
      var geojson = layer.toGeoJSON()
      var features = geojson.features
      for (var j = 0; j < features.length; j++) {
        var feature = features[j]
        if (feature.id === layerId) {
          return layer
        }
      }
    }
    return null
  }

  initDisplayZoom (layerConfig) {
    var that = this
    that.map.on('zoomend ', function (e) {
      const zoom = that.map.getZoom()
      for (var i = 0, l = layerConfig.length; i < l; i++) {
        var config = layerConfig[i]
        var layers = config.layers
        for (var j = 0; j < layers.length; j++) {
          var layer = layers[j]
          if (layer.minZoom) {
            if (zoom > layer.minZoom) {
              var layerObj = that.layerArray[layer.code]
              layerObj && layerObj.addTo(that.map)
            } else {
              that.removeLayer(layer)
            }
          }
        }
      }
    })
  }

  /**
     * 根据配置文件初始化业务底图
     */
    initServiceLayers(mapConfig){
        console.log(mapConfig)
        this.mapConfig = mapConfig
  initServiceLayers (layerConfig, popupComp) {
    this.layerConfig = layerConfig
    this.popupComp = popupComp
    store.commit('clearSewersDatas')
    store.commit('clearSewersLayers')
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
    this.initDisplayZoom(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.initDisplayZoom(layerConfig.mapConfig.Layers.layerSewersPoint)
  }

        this._loadLayers(mapConfig)
    }

    _loadLayers(mapConfig, isAddToMap = true){
        console.debug('ServiceLayerHelper加载参数：',mapConfig)
        this.loadTileLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
    }

    /**
     * 往地图中加入一个tile服务
     * @param {}} options 
     * @param {*} isAddToMap 
  /**
     * 按配置文件加载三种不同类型的
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
    loadWmtsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wmts') {
                continue
            }
            const layer = this.L.tileLayer(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        }
  loadLayers (layerConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', layerConfig)
    for (let i = 0, len = layerConfig.length; i < len; ++i) {
      const opt = layerConfig[i]
      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.loadGeojsonLayers(opt)
      }
    }
    /**
  }

  loadGeojsonLayers (options) {
    var url = options.url
    var layers = options.layers
    for (var i = 0; i < layers.length; i++) {
      var layer = layers[i]
      var checked = layer.checked
      if (checked) {
        this.loadGeojsonLayer(url, layer)
      }
    }
  }

  /**
     * 请求wfs数据
     * @param url
     * @param item
     */
  loadGeojsonLayer (url, item) {
    var matches = this.regex.exec(url)
    var matchValue = item[matches[1]]
    var code = item.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.layerArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        store.commit('addSewersDatas', res)
        var layer = that.loadGeojson(res, item)
        that.layerArray[code] = layer
      })
    } else {
      that.layerArray[code].addTo(that.map)
    }
  }

  /**
     * 加载gis server返回的geoson数据到地图中展示
     * @param res
     */
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const geojson = that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
          weight: styles.defaultLineStyle.weight,
          fillColor: styles.defaultLineStyle.fillColor,
          color: styles.defaultLineStyle.color,
          fillOpacity: styles.defaultLineStyle.fillOpacity,
          opacity: styles.defaultLineStyle.opacity
          // dashArray: styles.defaultLineStyle.dashArray,
          // dashSpeed: styles.defaultLineStyle.dashSpeed
        }
      },
      pointToLayer: function (geoJsonPoint, latlng) {
        return that.L.canvasMarker(latlng,
          {
            img: {
              // url: 'assets/images/map/marker-icon.png',
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
          })
      }
    }).bindPopup(function (layer) {
      that.popupComp.setDatas(layer)
      that.popupComp.setShow()
      return that.popupComp.$el
    }, {
      className: 's-map-popup',
      minWidth: 300,
      closeButton: false,
      autoClose: false
    })
      .bindTooltip(function (layer) {
        const nameId = layer.feature.id
        let name = ''
        if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
          name = layer.feature.properties.pointnumber
        } else {
          name = layer.feature.properties.name
        }
        if (name === undefined) {
          name = ''
        }
        return name
      }, { direction: 'bottom', offset: [0, 15], sticky: true })
      .on('mouseover', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
          layer.setStyle({ weight: 8, color: '#00ffff' })
        } else if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: [25, 25]
            }
          })

          layer.bringToFront()
        }
      }).on('mouseout', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
          layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
        }
        if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
          })
        }
      }).addTo(that.map)
    store.commit('addSewersDatas', geojson)
    if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
      geojson.bringToBack()
    } else {
      geojson.bringToFront()
    }
    return geojson
  }

  removeLayer (item) {
    var layer = this.layerArray[item.code]
    layer && this.map.removeLayer(layer)
  }

  /**
     * 往地图中加入一个WMTS服务
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadWmtsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, options.option)
    layer.config = options
    var checked = options.checked
    if (checked) {
      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) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wms') {
                continue
            }
  loadWmsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer.wms(options.url, options.option)
    layer.config = options

            const layer =this.L.tileLayer.wms(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        }
        
    var checked = options.checked
    if (checked) {
      if (isAddToMap) {
        layer.addTo(this.tileLayerWmslayerGroup)
      }
      this.loadedLayersMap.set(options.code, layer)
    }
  }

    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
  /**
     * 往地图中加入一个TILE服务
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadTileLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'tile') {
                continue
            }
  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

            const layer =this.L.tileLayer(opt.url, {
                layers: opt.layers || 'all',//country
                format: opt.format || "image/png",
                transparent: opt.true || true,
                crs:opt.crs || L.CRS.EPSG4326,
                maxZoom: opt.maxZoom || 21,
                minZoom: opt.minZoom || 1,
                zoomOffset: opt.zoomOffset || 0
            });
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code , layer)
            this.tileLayersArray.push(layer)
        }
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    /**
    this.loadedLayersMap.set(options.code, layer)
  }

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

    /**
     * 获取所有的服务图层
  /**
     * 展示服务图层
     * @param {*} name
     */
    getTileLayers(){
        return this.tilelayersArray
  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
  }

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

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

  /**
     * 根据线的选择，得到点的可选择图层数据
     */
  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') {
        return mc.mapConfig.ServiceLayers[i]
      }
    }
    return null
  }
}

export default ServiceLayerHelper