修改图层控制

徐旺旺

2021-02-22 b89ad0355f2d466304ecc2dad86407e26aa69db4

修改图层控制

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,7 +1,7 @@
<template>
    <div class="inner-panel">
        <div class="wms-panel">
            <div v-for="item in mapConfig.ServiceLayers" :key="item.code" class="layerbox">
            <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                            @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"
                                                                               class="btn-filter">过滤</span>
@@ -11,7 +11,7 @@
                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                      :checked="itm.checked"
                                                                                                      :value="itm.code"
                                                                                                      @change="swWmsLayer(itm)"/>{{ itm.sname }}
                                                                                                      @change="swWmsLayer(itm)"/>{{ itm.name }}
                    </div>
                </div>
            </div>
@@ -34,8 +34,8 @@
    }
  },
  computed: {
    mapConfig () {
      return this.$store.state.map.mapConfig.mapConfig
    serviceLayers () {
      return this.$store.state.map.serviceLayers.LayerSewersLine
    }
  },
  mounted () {

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -30,14 +30,14 @@
    }
  },
  computed: {
    mapConfig () {
      return this.$store.state.map.mapConfig.mapConfig
    config () {
      return this.$store.state.map.config
    },
    pointLayers () {
      // 根据线图层选中情况，显示或隐藏点图层面板
      var config = this.mapConfig
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(config)
      var pointLayers = config.PointLayers
      var serviceLayers = this.config.mapConfig.Layers.LayerSewersLine // 一级图层
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(serviceLayers)
      var pointLayers = this.config.mapConfig.Layers.layerSewersPoint // 二级图层
      return pointLayers.filter(function (layer) {
        var code = layer.code
        for (var i = 0; i < checkedLayers.length; i++) {

 src/components/helpers/BasemapHelper.js

@@ -18,11 +18,11 @@
     * @param map
     * @param defBasemapName 初始化完成后，默认显示的图层
     */
    initBasemap = (mapConfig, isIntranet) => {
    initBasemap = (config, isIntranet) => {
      if (isIntranet) { // 内网
        this._getToken(mapConfig) // 获取token后，并按配置加载地图
        this._getToken(config) // 获取token后，并按配置加载地图
      } else { // 外网
        this._createBasemapByConfig(mapConfig)
        this._createBasemapByConfig(config)
      }

      return this.basemapMap
@@ -72,8 +72,8 @@
    }

    // 公网创建地图部分
    _createBasemapByConfig (mapConfig) {
      const internetBasemaps = mapConfig.mapConfig.InternetBaseMaps
    _createBasemapByConfig (config) {
      const internetBasemaps = config.mapConfig.InternetBaseMaps
      for (let i = 0, len = internetBasemaps.length; i < len; ++i) {
        const basemapConfig = internetBasemaps[i]
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
@@ -98,16 +98,16 @@

    // 内网地图创建部分
    // 获取内网地图token，并加载到地图中
    _getToken = (mapConfig) => {
      const params = mapConfig.TokenConfig
    _getToken = (config) => {
      const params = config.TokenConfig
      AjaxUtils.GetDataAsynByUrl(params.url, params.option, (token) => {
        this._showTDT(token, mapConfig)
        this._showTDT(token, config)
      })
    }

    // 内网地图加载，并加载到地图
    _showTDT = (token, mapConfig) => {
      const intranetBasemaps = mapConfig.mapConfig.IntranetBaseMaps
    _showTDT = (token, config) => {
      const intranetBasemaps = config.mapConfig.IntranetBaseMaps
      for (let i = 0, len = intranetBasemaps.length; i < len; ++i) {
        const basemapConfig = intranetBasemaps[i]
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)

 src/components/helpers/ServiceLayerHelper.js

@@ -2,6 +2,7 @@
/**
 * 创建图层相关的类
 */
import AjaxUtils from '@/utils/AjaxUtils'

class ServiceLayerHelper {
  constructor (options) {
@@ -12,7 +13,9 @@
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.mapConfig = {}
    this.geojsonArray = [] // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
  }

  getTileLayer (code) {
@@ -22,9 +25,9 @@
  /**
     * 根据配置文件初始化业务底图
     */
  initServiceLayers (mapConfig) {
    this.mapConfig = mapConfig
    this._loadLayers(mapConfig)
  initServiceLayers (layerConfig) {
    this.layerConfig = layerConfig
    this._loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
  }

  /**
@@ -32,29 +35,60 @@
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
  _loadLayers (mapConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', mapConfig)
    for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
      const opt = mapConfig.mapConfig.ServiceLayers[i]
      this.setArray(opt)
      if (opt.type === 'wmts') {
        opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'wms') {
        opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'tile') {
        opt.checked && 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)
        }
      }
    }
  }

  setArray (opt) {
    var type = opt.type
    if (type === 'wmts') {
      this.tileLayersWMTSArray.push(opt)
    } else if (type === 'wms') {
      this.tileLayersWMSArray.push(opt)
    } else if (type === 'tile') {
      this.tileLayersTileArray.push(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)
      })
    }
  }

@@ -63,9 +97,9 @@
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadWmtsLayer (options, isAddToMap = true, config) {
  loadWmtsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, options.option)
    layer.config = config
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.map)
@@ -78,9 +112,9 @@
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadWmsLayer (options, isAddToMap = true, config) {
  loadWmsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer.wms(options.url, options.option)
    layer.config = config
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.tileLayerWmslayerGroup)
@@ -93,7 +127,7 @@
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadTileLayer (options, isAddToMap = true, config) {
  loadTileLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, {
      layers: options.layers || 'all', // country
      format: options.format || 'image/png',
@@ -103,7 +137,7 @@
      minZoom: options.minZoom || 1,
      zoomOffset: options.zoomOffset || 0
    })
    layer.config = config
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.map)
@@ -134,13 +168,12 @@
  }

  /**
   * 得到选中的图层列表
   * @param mapConfig
   * @returns {[]}
   */
  getCheckedLayers (mapConfig) {
     * 得到选中的图层列表
     * @param mapConfig
     * @returns {[]}
     */
  getCheckedLayers (serviceLayers) {
    var checkedLayers = []
    var serviceLayers = mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var serviceLayer = serviceLayers[i]
      var layers = serviceLayer.layers
@@ -177,8 +210,8 @@
  }

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

  }

 src/conf/LayerSewers.js

@@ -2,14 +2,14 @@

const APP_GIS_HOST_2 = 'http://xearth.cn:6230'
const myRenderer = L.canvas()// 需要使用画布渲染的使用 renderer: myRenderer 作为参数
export const LayerSewers = {
export const LayerSewersLine = {
  code: 'pipeline',
  name: '管网数据',
  icon_actived: '',
  icon_deactived: '',
  type: 'geojson',
  // url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
  url: APP_GIS_HOST_2 + '/layer/findLayer?layerName=pipeline',
  url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
  inLegend: true,
  checked: true,
  option: {
@@ -30,7 +30,7 @@
    {
      code: 'rainline',
      name: '雨水线',
      sname: '雨水',
      sname: 'pipeline', // 表名
      checked: true, // 默认选中状态
      filter: {},
      childLayer: 'fsss,hbss' // 关联PointLayers
@@ -109,3 +109,256 @@
    }
  ]
}

export const LayerSewersPoint = [
  {
    code: 'fsss',
    name: '附属设施',
    checked: true, // 默认选中状态
    filters: [
      {
        code: 'fourlink',
        name: '四通',
        sname: 'FourLink',
        checked: false
      },
      {
        code: 'tee',
        name: '三通',
        sname: 'Tee',
        checked: false
      },
      {
        code: 'piperack',
        name: '管架(墩)',
        sname: 'PipeRack',
        checked: false
      },
      {
        code: 'pipegallery',
        name: '管廊(带)',
        sname: 'PipeGallery',
        checked: false
      },
      {
        code: 'pipesegment',
        name: '流向',
        sname: 'ywslx',
        checked: false
      },
      {
        code: 'pipeline',
        name: '管网',
        sname: 'pipeline',
        checked: false
      },
      {
        code: 'valve',
        name: '阀门',
        sname: 'valve',
        checked: false
      },
      {
        code: 'elbow',
        name: '弯头',
        sname: 'Elbow',
        checked: false
      }
    ]
  },
  {
    code: 'hbss',
    name: '环保设施',
    checked: false, // 默认选中状态
    filters: [
      {
        code: 'manhole',
        name: '窨井',
        sname: '窨井',
        checked: false
      },
      {
        code: 'firedike',
        name: '防火堤',
        sname: '防火堤',
        checked: false
      },
      {
        code: 'raingate',
        name: '雨篦子',
        sname: '雨篦子',
        checked: false
      },
      {
        code: 'overflowweir',
        name: '溢流堰',
        sname: '溢流堰',
        checked: false
      },
      {
        code: 'chokevalve',
        name: '截流闸',
        sname: '截流闸',
        checked: false
      },
      {
        code: 'collectingbasin',
        name: '集水池(罐)',
        sname: '集水池',
        checked: false
      },
      {
        code: 'oilseparator',
        name: '隔油池',
        sname: '隔油池',
        checked: false
      }
    ]
  },
  {
    code: 'pk',
    name: '排口',
    checked: false, // 默认选中状态
    filters: [
      {
        code: 'dischargeport',
        name: '排放口',
        sname: '排放口',
        checked: false
      }
    ]
  },
  {
    code: 'qyxx',
    name: '区域信息',
    checked: false, // 默认选中状态
    filters: [
      {
        code: 'thirdpartypipe',
        name: '第三方管道',
        sname: '第三方管道',
        checked: false
      },
      {
        code: 'firefightingunit',
        name: '消防单位',
        sname: '消防单位',
        checked: false
      },
      {
        code: 'emergencyesources',
        name: '应急物资',
        sname: '应急物资',
        checked: false
      },
      {
        code: 'emergencyres',
        name: '社会专业应急救援队伍',
        sname: '专业应急救援',
        checked: false
      },
      {
        code: 'maintenanceteam',
        name: '维抢修队伍',
        sname: '维抢修队伍',
        checked: false
      },
      {
        code: 'hospital',
        name: '医院',
        sname: '医院',
        checked: false
      },
      {
        code: 'pointpreservationzone',
        name: '自然保护区',
        sname: '自然保护区',
        checked: false
      },
      {
        code: 'pointhydrology',
        name: '水体',
        sname: '水体',
        checked: false
      },
      {
        code: 'sensitivetarget',
        name: '敏感目标',
        sname: '敏感目标',
        checked: false
      },
      {
        code: 'envmonunit',
        name: '环境监测单位',
        sname: '环境监测单位',
        checked: false
      },
      {
        code: 'pointcontaminants',
        name: '监测点污染物指标信息',
        sname: '污染物指标',
        checked: false
      },
      {
        code: 'dischargeportaround',
        name: '排放口周边环境敏感信息',
        sname: '排放口周边环境',
        checked: false
      },
      {
        code: 'pump',
        name: '泵',
        sname: '泵',
        checked: false
      },
      {
        code: 'liquidlevelmeter',
        name: '液位计',
        sname: '液位计',
        checked: false
      },
      {
        code: 'flowmeter',
        name: '流量计',
        sname: '流量计',
        checked: false
      },
      {
        code: 'video',
        name: '视频监控配置',
        sname: '视频监控',
        checked: false
      },
      {
        code: 'onlinemonitoring',
        name: '在线监测设备配置',
        sname: '在线监测',
        checked: false
      },
      {
        code: 'combustiblegas',
        name: '可燃气体报警设备配置',
        sname: '可燃气体报警',
        checked: false
      },
      {
        code: 'hydrogensulfide',
        name: 'H2S浓度报警设备配置',
        sname: 'H2S浓度报警',
        checked: false
      },
      {
        code: 'controlpoint',
        name: '管线点',
        sname: '管线点',
        checked: false
      },
      {
        code: 'pipesegment',
        name: '管段',
        sname: '管段',
        checked: false
      }
    ]
  }
]

 src/conf/Layers.js

@@ -1,9 +1,8 @@
// import * as L from 'leaflet'
import { LayerSewers } from './LayerSewers'
import { LayerSewers, PointLayers } from './LayerSewers'
// const APP_GIS_HOST = 'http://xearth.cn:6299'

// 几何类型常量
const GEOM_POINT = 'POINT'

export const ServiceLayers = [
  /*    {
@@ -27,296 +26,5 @@
          uppercase: false,
          WMSTILE: 1
        }, */
  LayerSewers

]

export const PointLayers = [
  {
    code: 'fsss',
    name: '附属设施',
    checked: true, // 默认选中状态
    filters: [
      {
        code: 'fourlink',
        name: '四通',
        sname: '四通',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'tee',
        name: '三通',
        sname: '三通',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'piperack',
        name: '管架(墩)',
        sname: '管架',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pipegallery',
        name: '管廊(带)',
        sname: '管廊',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pipesegment',
        name: '流向',
        sname: '流向',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pipeline',
        name: '管网',
        sname: '管网',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'valve',
        name: '阀门',
        sname: '阀门',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'elbow',
        name: '弯头',
        sname: '弯头',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      }
    ]
  },
  {
    code: 'hbss',
    name: '环保设施',
    checked: true, // 默认选中状态
    filters: [
      {
        code: 'manhole',
        name: '窨井',
        sname: '窨井',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'firedike',
        name: '防火堤',
        sname: '防火堤',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'raingate',
        name: '雨篦子',
        sname: '雨篦子',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'overflowweir',
        name: '溢流堰',
        sname: '溢流堰',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'chokevalve',
        name: '截流闸',
        sname: '截流闸',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'collectingbasin',
        name: '集水池(罐)',
        sname: '集水池',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'oilseparator',
        name: '隔油池',
        sname: '隔油池',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      }
    ]
  },
  {
    code: 'pk',
    name: '排口',
    checked: true, // 默认选中状态
    filters: [
      {
        code: 'dischargeport',
        name: '排放口',
        sname: '排放口',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      }
    ]
  },
  {
    code: 'qyxx',
    name: '区域信息',
    checked: true, // 默认选中状态
    filters: [
      {
        code: 'thirdpartypipe',
        name: '第三方管道',
        sname: '第三方管道',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'firefightingunit',
        name: '消防单位',
        sname: '消防单位',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'emergencyesources',
        name: '应急物资',
        sname: '应急物资',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'emergencyres',
        name: '社会专业应急救援队伍',
        sname: '专业应急救援',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'maintenanceteam',
        name: '维抢修队伍',
        sname: '维抢修队伍',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'hospital',
        name: '医院',
        sname: '医院',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pointpreservationzone',
        name: '自然保护区',
        sname: '自然保护区',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pointhydrology',
        name: '水体',
        sname: '水体',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'sensitivetarget',
        name: '敏感目标',
        sname: '敏感目标',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'envmonunit',
        name: '环境监测单位',
        sname: '环境监测单位',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pointcontaminants',
        name: '监测点污染物指标信息',
        sname: '污染物指标',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'dischargeportaround',
        name: '排放口周边环境敏感信息',
        sname: '排放口周边环境',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pump',
        name: '泵',
        sname: '泵',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'liquidlevelmeter',
        name: '液位计',
        sname: '液位计',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'flowmeter',
        name: '流量计',
        sname: '流量计',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'video',
        name: '视频监控配置',
        sname: '视频监控',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'onlinemonitoring',
        name: '在线监测设备配置',
        sname: '在线监测',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'combustiblegas',
        name: '可燃气体报警设备配置',
        sname: '可燃气体报警',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'hydrogensulfide',
        name: 'H2S浓度报警设备配置',
        sname: 'H2S浓度报警',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'controlpoint',
        name: '管线点',
        sname: '管线点',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      },
      {
        code: 'pipesegment',
        name: '管段',
        sname: '管段',
        checked: true, // 默认选中状态
        geom: GEOM_POINT
      }
    ]
  }
  LayerSewers, PointLayers
]

 src/conf/MapConfig.js

@@ -1,6 +1,6 @@
import * as L from 'leaflet'
import TDT from './TDT'
import { ServiceLayers, PointLayers } from './Layers'
import { LayerSewersLine, LayerSewersPoint } from './LayerSewers'
const curWwwPath = window.document.location.href
const pathname = window.document.location.pathname
const pos = curWwwPath.indexOf(pathname)
@@ -35,8 +35,7 @@
  showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  ServiceLayers: ServiceLayers,
  PointLayers: PointLayers
  Layers: { LayerSewersLine: [LayerSewersLine], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置
}

/**
@@ -57,6 +56,5 @@
  mapOptions,
  mapConfig,
  TokenConfig,

  BLUEMAP_HOST
}

 src/store/modules/map.js

@@ -1,4 +1,4 @@
import mapConfig from '../../conf/MapConfig'
import config from '../../conf/MapConfig'

const state = {
  currentCorp: null,
@@ -14,7 +14,8 @@
  selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
  serviceLayerFilters: {}, // 服务图层控制过滤配置
  checkedLayers: {}, // 选中图层对象
  mapConfig: mapConfig
  config: config,
  serviceLayers: config.mapConfig.Layers
}
const mutations = {
  setMapObj (state, map) {

 src/views/MapTemplate.vue

@@ -47,8 +47,8 @@
    }
  },
  computed: {
    mapConfig () {
      return this.$store.state.map.mapConfig
    config () {
      return this.$store.state.map.config
    }
  },
  beforeMount () {
@@ -71,13 +71,13 @@
      this.map = Sgis.initMap(mapcontainer)

      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.mapConfig, false) // 第二个参数，表示是否内网底图
      this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图

      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
      this.serviceLayerHelper.initServiceLayers(this.mapConfig)
      this.serviceLayerHelper.initServiceLayers(this.config)

      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.mapConfig)
      this.vectorLayerHelper.initVectorLayers(this.config)

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)