弹框组件初步，管线动画控制，默认值修改

徐旺旺

2021-04-15 72e8ced67fe06adf794678a03d95bc1eb0947d4e

 src/components/LayerController/service/LayerFactory.js

@@ -1,7 +1,7 @@
import store from '@/store'
import WfsLayerService from './WfsLayerService'
import BusiLayerService from './BusiLayerService'
import WmsLayerService from './WmsLayerService'
import EventLayerService from './EventLayerService'

class LayerFactory {
  constructor (options) {
@@ -10,71 +10,186 @@
    this.layers = {}
  }

  init () {
  init (layerConfig) {
    // 1. 遍历layer config
    var layerConfig = store.state.map.serviceLayers.LayerSewersLine
    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 childConfig = layers[j]
        var code = childConfig.code
        var wfs = childConfig.wfs
        var wms = childConfig.wms
        var url = childConfig.url
        // 判断是否已经加载过，加载过就 直接得到对象调用 显示函数
        var layer = this.layers[code]
        if (!layer) {
          layer = this.L.featureGroup({}).addTo(this.map)
          // 2. 判断类型
          if (wfs) {
            // 3. 实例化具体service
            var wfsLayerService = new WfsLayerService(childConfig)
            wfsLayerService.init(layer)
          }
          if (wms) {
            var wmsLayerService = new WmsLayerService(childConfig)
            wmsLayerService.init(layer)
          }
          // 请求业务数据接口
          if (url) {
            var busiLayerService = new BusiLayerService(childConfig)
            busiLayerService.init(layer)
          }
          layer ? (this.layers[code] = layer) : console.log('LayerFactory：newLayer is null，please check !!!')
        } else {
          this.show(code)
        }
    if (layerConfig) {
      for (var i = 0; i < layerConfig.length; i++) {
        var config = layerConfig[i]
        var layers = config.layers
        var childLayer = config.childLayer
        layers && this.init(config.layers)
        childLayer && this.init(config.childLayer)

        var checked = config.checked
        checked && this.load(config)
        checked && this.toggleZoomByConfig(config)
      }
    }
  }

  show (code) {
    var _layer = this.layers[code].addTo(this.map)
    this.setZIndex(_layer)
  /**
     * 控制显示的级别
     * @param layerConfig
     */
  initEvent (layerConfig) {
    this.map.on('zoomend ', (e) => this.toggleZoomByLayer(layerConfig))
  }

  hide (code) {
  toggleZoomByLayer (layerConfig) {
    var config = layerConfig
    if (Array.isArray(layerConfig)) {
      for (var i = 0, l = layerConfig.length; i < l; i++) {
        config = layerConfig[i]
        var layers = config.layers
        var childLayer = config.childLayer
        layers && this.toggleZoomByLayer(layers)
        childLayer && this.toggleZoomByLayer(childLayer)
        this.toggleZoomByConfig(config)
      }
    } else {
      this.toggleZoomByConfig(layerConfig)
    }
  }

  toggleZoomByConfig (config) {
    const zoom = this.map.getZoom()
    var checked = config.checked
    if (checked && config.minZoom) {
      if (zoom > config.minZoom) {
        this.show(config)
      } else {
        this.hide(config)
      }
    }
  }

  load (config) {
    var code = config.code
    var wfs = config.wfs
    var wms = config.wms
    var url = config.url
    var checked = config.checked
    // 判断是否已经加载过，加载过就 直接得到对象调用 显示函数
    var layer = this.layers[code]
    // todo if是不是太多了
    if (checked) {
      if ((wfs || wms || url)) {
        if (layer) {
          this.show(code)
        } else {
          layer = this.L.featureGroup({}).addTo(this.map)
          this.layers[code] = layer
        }
      }
      // 2. 判断类型
      if (wfs) {
        // 3. 实例化具体service
        var wfsLayerService = new WfsLayerService(config)
        wfsLayerService.init(layer)
        this.setZIndex(layer)
      } else if (wms) {
        var wmsLayerService = new WmsLayerService(config)
        wmsLayerService.init(layer)
      } else if (url) {
        var busiLayerService = new BusiLayerService(config)
        busiLayerService.init(layer)
      }
    }
    var eventLayerService = new EventLayerService(config)
    eventLayerService.init()
  }

  show (config) {
    var layer = this.layers[config.code]
    if (layer) {
      layer.addTo(this.map)
      this.setZIndex(layer)
    } else {
      this.load(config)
    }
  }

  hide (config) {
    var layer = this.layers[config.code]
    layer && this.map.removeLayer(layer)
    this.load(config)
  }

  toggle (code) {

  }

  flyByLayerId (code, id) {
    const layer = this.layers[code]

    if (layer.eachLayer) {
      layer.eachLayer(function (layer) {
        const layers = layer.getLayers()
        for (var i = 0; i < layers.length; i++) {
          const lay = layers[i]
          const feature = lay.feature
          lay.closePopup()
          if (feature.id === id) {
            lay.openPopup()
            break
          }
        }
      })
    }
    /* for (var k in this.layers) {
          var layerGroup = this.layers[k]
          layerGroup.eachLayer(function (layer) {
            console.log(layer)
            console.log(layer.getAttribution())
          })
          var layers = layerGroup.getLayers()
          if (layers) {
            for (var m = 0; m < layers.length; m++) {
              var layer = layers[m]
              console.log(layer)
              console.log(layer.getLayerId(val.id))
              /!* var feature = layer.feature
              if (feature.id === layerId) {
                this.map.flyToBounds(bound)
                return layer
              } *!/
            }
          }
        } */
    return null
  }

  findLayerById (layer, id) {
    const layers = layer.getLayers
    if (layers) {
      this.findLayerById(layer.getLayers(), id)
    } else {
      layer.eachLayer(function (layer) {
        console.log(layer)
      })
    }
  }

  /**
     * todo 这里无效，貌似是因为geojson加载到地图也是个layergroup
     *
     * 设置index,线在最下面，点在上面
     * @param layerGroup 图层组
     */
  setZIndex (layerGroup) {
    var layers = layerGroup.getLayers()
    if (layers.length > 0) {
      var layer = layers[0]
      if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
        layerGroup.bringToBack()
  setZIndex (layer) {
    if (Array.isArray(layer)) {
      for (var i = 0; i < layer.length; i++) {
        this.setZIndex(layer[i])
      }
    } else {
      if (layer.getLayers) {
        this.setZIndex(layer.getLayers())
      } else {
        layerGroup.bringToFront()
        if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
          layer.bringToBack && layer.bringToBack()
        } else {
          layer.bringToFront && layer.bringToFront()
        }
      }
    }
  }