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

徐旺旺

2021-04-13 ea446a1a9cdaf333a062ea471a3bde02b6eda655

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

 src/components/LayerController/service/LayerFactory.js

@@ -25,6 +25,36 @@
    }
  }

  /**
   * 控制显示的级别
   * @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)
          }
        }
      }
    }
  }

  load (config) {
    var code = config.code
    var wfs = config.wfs
@@ -91,9 +121,9 @@
        this.setZIndex(layer.getLayers())
      } else {
        if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
          layer.bringToBack()
          layer.bringToBack && layer.bringToBack()
        } else {
          layer.bringToFront()
          layer.bringToFront && layer.bringToFront()
        }
      }
    }

 src/conf/layers/LayerArea.js

@@ -13,24 +13,21 @@
      name: '公司',
      sname: '公司', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
      code: 'sewersAreaMt',
      name: '码头',
      sname: '码头',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
      code: 'sewersAreaZz',
      name: '装置区',
      sname: '装置区',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]
}

 src/conf/layers/LayerBasin.js

@@ -14,32 +14,28 @@
      name: '长江流域',
      sname: '长江流域', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
      code: 'basinHh',
      name: '黄河流域',
      sname: '黄河流域',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
      code: 'basinBh',
      name: '渤海流域',
      sname: '渤海流域',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=装置区'
    },
    {
      code: 'basinQt',
      name: '其他',
      sname: '其他',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]
}

 src/conf/layers/LayerFsss.js

@@ -2,18 +2,26 @@
 * 区域
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine2/wfs'
export const LayerFsss = {
  code: 'sewersFsss',
  name: '附属设施',
  checked: false, // 默认选中状态
  layers: [
    {
      code: 'pipeSection',
      name: '管段',
      sname: '管段',
      checked: false,
      minZoom: 15,
      wfs: WFS_URL + '?TYPENAME=管段'
    },
    {
      code: 'fourlink',
      name: '四通',
      sname: '四通',
      checked: true,
      minZoom: 10,
      minZoom: 15,
      wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
    },
@@ -22,7 +30,7 @@
      name: '三通',
      sname: '三通',
      checked: false,
      minZoom: 10,
      minZoom: 15,
      wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
    },

 src/conf/layers/LayerHbss.js

@@ -2,7 +2,7 @@
 * 区域
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine2/wfs'
export const LayerHbss = {
  code: 'sewersHbss',
  name: '环保设施',

 src/conf/layers/LayerPipeLines.js

@@ -5,7 +5,7 @@
import { LayerFsss } from './LayerFsss'

const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine2/wfs'

export const LayerPipeLines = {
  code: 'sewersPipeLines',

 src/conf/layers/LayerSewers.js

@@ -1,3 +1,8 @@
/**
 * todo 准备删除此文件！！！！
 * @type {string}
 */

const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
export const LayerSewersPoint = [
  {

 src/views/MapTemplate.vue

@@ -91,7 +91,7 @@
        map: this.map
      })
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.init(this.$store.state.map.serviceLayers.layerSewersPoint)
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory

      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手