根据不同级别显示隐藏图层

徐旺旺

2021-04-13 ea446a1a9cdaf333a062ea471a3bde02b6eda655

 src/components/LayerController/service/LayerFactory.js

@@ -11,13 +11,47 @@

  init (layerConfig) {
    // 1. 遍历layer config
    for (var i = 0, l = layerConfig.length; i < l; i++) {
      var config = layerConfig[i]
      var layers = config.layers
      layers && this.init(config.layers)
    if (layerConfig) {
      for (var i = 0, l = layerConfig.length; i < l; 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)
        var checked = config.checked
        checked && this.load(config)
      }
    }
  }

  /**
   * 控制显示的级别
   * @param layerConfig
   */
  initEvent (layerConfig) {
    this.map.on('zoomend ', (e) => this.toggleByZoom(layerConfig))
  }

  toggleByZoom (layerConfig) {
    const zoom = this.map.getZoom()
    if (layerConfig) {
      for (var i = 0, l = layerConfig.length; i < l; i++) {
        var config = layerConfig[i]
        var layers = config.layers
        var checked = config.checked
        var childLayer = config.childLayer
        layers && this.toggleByZoom(layers)
        childLayer && this.toggleByZoom(childLayer)
        if (checked && config.minZoom) {
          if (zoom > config.minZoom) {
            this.show(config)
          } else {
            console.log(config.name)
            this.hide(config)
          }
        }
      }
    }
  }

@@ -72,17 +106,25 @@
  }

  /**
     * 设置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()
   * todo 这里无效，貌似是因为geojson加载到地图也是个layergroup
   *
   * 设置index,线在最下面，点在上面
   * @param layerGroup 图层组
   */
  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()
        }
      }
    }
  }