修改图层控制

徐旺旺

2021-02-22 a6da1ff6d9b294f46955da5d5cff30919467fa8b

修改图层控制

 src/Sgis.js

@@ -34,7 +34,7 @@
  })

  window.map = map

  initTileLayersHelper(map)
  return map
}

@@ -53,7 +53,8 @@
 * @param L
 */
const initTileLayersHelper = (map) => {
  return new ServiceLayerHelper({ map })
  var serviceLayerHelper = new ServiceLayerHelper({ map })
  return serviceLayerHelper
}

/**

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,15 +1,7 @@
<template>
  <div class="inner-panel">
    <div class="tile-panel">
      <div v-for="item in serviceTileLayerList" :key="item.code"><input type="checkbox" :value="item.name"
                                                                        @change="swTileLayer"/></div>
    </div>
    <div class="wmts-panel">
      <div v-for="item in serviceWmtsLayerList" :key="item.code"><input type="checkbox" :value="item.name"
                                                                        @change="swWmtsLayer"/></div>
    </div>
    <div class="wms-panel">
      <div v-for="item in serviceWmsLayerList" :key="item.code" class="layerbox">
            <div v-for="item in mapConfig.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>
@@ -24,34 +16,31 @@
        </div>
      </div>
    </div>
        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>
  </div>
</template>

<script>
import WmsHelper from '../../helpers/WmsHelper'
import AjaxUtils from '@/utils/AjaxUtils'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'

export default {
  name: 'LcServiceLayer',
  components: {},
  components: { LcServiceLayerFilter },
  data () {
    return {
      selectedLineLayer: [], // 选中的管线图层
      selectedSubsidiaryLayer: [], // 选中的附属要素
      serviceTileLayerList: [], // Tile图层列表
      serviceWmtsLayerList: [], // Wmts图层列表
      serviceWmsLayerList: [] // 图层列表
      layerFilterVisible: false
    }
  },
  computed: {
    serviceLayerHelper () {
      return this.$store.state.map.serviceLayerHelper
    },
    mapConfig () {
      return this.$store.state.map.mapConfig
      return this.$store.state.map.mapConfig.mapConfig
    }
  },
  mounted () {
    // console.log('03步骤：', this.helper)
    this.updateServiceLayerList()
  },
  methods: {
    swAllLayers (item) {
@@ -61,71 +50,34 @@
        item.layers[i].checked = item.checked
      }
      this.updateWms()

      console.log(this.mapConfig)
    },
    swTileLayer () {
      console.log('该TILE方法未实现！')
    },
    swWmtsLayer () {
      console.log('该WMTS方法未实现！')
    loadWfs () {
      AjaxUtils.GetDataAsynByUrl('http://xearth.cn:6289/server/ogcserver/PipeLineTest/wfs?version=1.0.0&TYPENAME=pipeline&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000', {}, (res) => {
        window.L.geoJSON(res).addTo(window.map)
      })
    },
    swWmsLayer (itm) {
      console.log('22222222')
      itm.checked = !itm.checked
      this.updateWms()
    },
    swFilter (item) {
      this.$store.commit('setSelectedServiceLayer', item.code)
      this.$store.commit('toggleServiceLayerFilter')
      this.layerFilterVisible = !this.layerFilterVisible
    },
    updateServiceLayerList () {
      // eslint-disable-next-line no-debugger
      // debugger
      const tileCfg = this.serviceLayerHelper.getTileLayers()
      this.serviceTileLayerList = []
      for (let i = 0, len = tileCfg.length; i < len; ++i) {
        if (tileCfg[i].config.inLegend) {
          console.log(tileCfg[i])
        }
      }
      const wmtsCfg = this.serviceLayerHelper.getWmtsLayers()
      this.serviceWmtsLayerList = []
      for (let i = 0, len = wmtsCfg.length; i < len; ++i) {
        if (wmtsCfg[i].config.inLegend) {
          console.log(wmtsCfg[i])
        }
      }
      const wmsCfg = this.serviceLayerHelper.getWmsLayers()
      this.serviceWmsLayerList = []
      for (let i = 0, len = wmsCfg.length; i < len; ++i) {
        if (wmsCfg[i].config.inLegend) {
          this.serviceWmsLayerList.push(wmsCfg[i].config)
        }
      }

    },
    updateWms () {
      console.log('------')
      var mapConfig = this.mapConfig
      var wmsHelper = new WmsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      // var filterURL = wmsHelper.getFilterURL()
      console.log(wmsLayersMap)
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = this.serviceLayerHelper.getTileLayer(k)
        var tileLayer = window.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, false)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  },
  watch: {
    serviceLayerHelper (newVal) {
      if (newVal != null) {
        this.updateServiceLayerList()
      }
    }
  }
@@ -140,6 +92,7 @@

  .btn-filter {
    cursor: pointer;
            color: #ffffff;
  }

  .wms-panel {

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -1,11 +1,14 @@
<template>
  <div class="inner-panel">
      <div class="filter-group">
          <div v-for="item in filterConfig" :key="item.code" class="filter-item">
              <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" @change="swAllSubFilter(item)">{{item.name}}</div>
            <div v-for="item in pointLayers" :key="item.code" class="filter-item">
                <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked"
                                          @change="swAllSubFilter(item)">{{item.name}}
                </div>
              <div class="content">
                  <div v-for="filter in item.filters" :key="filter.code">
                    <input type="checkbox" :value="filter.code" :checked="filter.checked"><label :title="filter.name">{{filter.sname}}</label>
                        <input type="checkbox" :value="filter.code" :checked="filter.checked"><label
                            :title="filter.name">{{filter.sname}}</label>
                  </div>
              </div>
          </div>
@@ -14,7 +17,7 @@
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { mapMutations } from 'vuex'
import WmsHelper from '../../helpers/WmsHelper'

export default {
@@ -22,46 +25,44 @@
  components: {},
  data () {
    return {
      visible: {},
      filterConfig: [] // 附属要素
    }
  },
  computed: {
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper
    mapConfig () {
      return this.$store.state.map.mapConfig.mapConfig
      },
      selectedServiceLayer: (state) => {
        return state.selectedServiceLayer
      },
      serviceLayerFilters: (state) => {
        return state.serviceLayerFilters
      },
      mapConfig: (state) => {
        return state.mapConfig
    pointLayers () {
      // 根据线图层选中情况，显示或隐藏点图层面板
      var config = this.mapConfig
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(config)
      var pointLayers = config.PointLayers
      return pointLayers.filter(function (layer) {
        var code = layer.code
        for (var i = 0; i < checkedLayers.length; i++) {
          var checkedLayer = checkedLayers[i]
          if (checkedLayer.childLayer.indexOf(code) >= 0) {
            return checkedLayer
          }
      }
    })
    }
  },
  mounted () {

    // this.filterConfig = window.serviceLayerHelper.getWMSConfig().filtersGroup
  },
  methods: {
    ...mapMutations([]),
    getFilterConfig () {
      return this.filterConfig
    },
    swAllSubFilter (item) {
      item.checked = !item.checked
      for (let i = 0, len = item.filters.length; i < len; ++i) {
        item.filters[i].checked = item.checked
      }

      console.log('------')
      var mapConfig = this.mapConfig
      var wmsHelper = new WmsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      // var filterURL = wmsHelper.getFilterURL()
      console.log(wmsLayersMap)
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = this.serviceLayerHelper.getTileLayer(k)
@@ -70,11 +71,6 @@
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  },
  watch: {
    selectedServiceLayer (newVal) {
      this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
    }
  }
}
@@ -90,7 +86,6 @@
    bottom: 10px;
    z-index: 1000;
    height: 220px;
    width: 500px;

    .filter-group{
        display: flex;
@@ -106,6 +101,7 @@
                background-color: #091331;
                border: 1px solid #10488c;
            }

            .content{
                background-color: rgba(44,62,80, 0.6);
                border: 1px solid #10488c;
@@ -117,6 +113,7 @@
                width: 7px;
                height: 5px !important;
            }

            ::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
@@ -124,6 +121,7 @@
                background   : #0661AE;
                border: 1px solid transparent;
            }

            ::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);

 src/components/helpers/ServiceLayerHelper.js

@@ -7,16 +7,16 @@
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.tileLayersMap = new Map()
    this.tileLayersWMSArray = []
    this.loadedLayersMap = new Map()
    this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
    this.tileLayersWMTSArray = []
    this.tileLayersTileArray = []
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.mapConfig = {}
  }

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

  /**
@@ -36,13 +36,25 @@
    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') {
        this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'wms') {
        this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'tile') {
        this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      }
    }
  }

  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)
    }
  }

@@ -58,8 +70,7 @@
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMTSArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -74,8 +85,7 @@
    if (isAddToMap) {
      layer.addTo(this.tileLayerWmslayerGroup)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMSArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -98,8 +108,7 @@
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersTileArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -107,8 +116,8 @@
     * @param {*} name
     */
  hideTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.removeLayer(tileLayer)
    }
  }
@@ -118,10 +127,32 @@
     * @param {*} name
     */
  showTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.addLayer(tileLayer)
    }
  }

  /**
   * 得到选中的图层列表
   * @param mapConfig
   * @returns {[]}
   */
  getCheckedLayers (mapConfig) {
    var checkedLayers = []
    var serviceLayers = mapConfig.ServiceLayers
    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
  }

  /**
@@ -146,13 +177,20 @@
  }

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

 src/components/helpers/WmsHelper.js

@@ -6,7 +6,7 @@
  this.wmsLayersMap = {}

  this.initMapConfig = (mapConfig) => {
    var serviceLayers = mapConfig.mapConfig.ServiceLayers
    var serviceLayers = mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var service = serviceLayers[i]
      var checked = service.checked

 src/components/panel/RightSearchPanel.vue

@@ -85,7 +85,8 @@
                    <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
                  </div>
                  <div><span>收货企业：</span> <span
                      id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
                                            id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>
                                    </div>
                </div>
                <div class="B-TMD-table-list-bottom">
                  <div class="B-TMD-table-list-bottom-name">
@@ -135,6 +136,7 @@
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',
      list: [],
      total: 0,
      title: '管道信息查询',
      pipelineTypeOptions: [{
        value: '1',
@@ -212,6 +214,9 @@
    handleClose (done) {
      console.log(done)
    },
    handleSearch () {

    },
    handlePipelineType (item) {
      console.log(item)
      if (item === '2') {

 src/conf/MapConfig.js

@@ -12,7 +12,7 @@

// service主机配置
const APP_GIS_HOST = 'http://xearth.cn:6299'
const APP_GIS_HOST_PIPELINE = 'http://xearth.cn:6289'
// const APP_GIS_HOST_PIPELINE = 'http://xearth.cn:6289'

// 自定义主机配置
const BLUEMAP_HOST = APP_GIS_HOST // 公司发布的地图服务，用于测试的地址
@@ -35,7 +35,6 @@
  attributionControl: false,
  editable: true
}

const mapConfig = {
  IsLoadMapByToken: true, // 是否通过token加载地图
  showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
@@ -202,8 +201,7 @@
      url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-map-image-globe/MapServer'
    }
  ],

  ServiceLayers: [
  InitLoad: [
    {
      code: 'guojie',
      name: '国界',
@@ -216,7 +214,9 @@
      option: {
        zoomOffset: 1
      }
    },
    }
  ],
  ServiceLayers: [
    {
      code: 'pipeline',
      name: '管网数据',
@@ -224,7 +224,8 @@
      icon_deactived: '',
      type: 'wms',
      // url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
      url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLine/wms?version=1.1.1',
      url: 'http://localhost:8080/wms?version=1.1.1',
      // url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLine/wms?version=1.1.1',
      inLegend: true,
      checked: true,
      option: {
@@ -243,73 +244,85 @@
          name: '雨水线',
          sname: '雨水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'oilline',
          name: '含油污水线',
          sname: '含油污水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'saltline',
          name: '含盐污水线',
          sname: '含盐污水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'alkaliline',
          name: '含碱污水线',
          sname: '含碱污水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'outlet',
          name: '排口',
          sname: '排口',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'pk' // 关联PointLayers
        },
        {
          code: 'accidentline',
          name: '事故水线',
          sname: '事故水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'loopline',
          name: '循环水线',
          sname: '循环水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'purifyline',
          name: '净化水线',
          sname: '净化水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'lifeline',
          name: '生活污水',
          sname: '生活污水',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'fsss,hbss' // 关联PointLayers
        },
        {
          code: 'areainfo',
          name: '区域信息',
          sname: '区域信息',
          checked: true, // 默认选中状态
          filter: {}
          filter: {},
          childLayer: 'qyxx' // 关联PointLayers
        }
      ]
        }
      ],
      filtersGroup: [
  PointLayers: [
        {
          code: 'fsss',
          name: '附属设施',
@@ -594,8 +607,6 @@
              sname: '管段',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            }
          ]
        }
      ]
    }

 src/store/modules/map.js

@@ -13,6 +13,7 @@
  showServiceLayerFilter: false, // Service图层过滤器
  selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
  serviceLayerFilters: {}, // 服务图层控制过滤配置
  checkedLayers: {}, // 选中图层对象
  mapConfig: mapConfig
}
const mutations = {
@@ -22,6 +23,9 @@
  setBasemapHelper (state, layerHelper) {
    state.basemapHelper = layerHelper
  },
  setCheckedLayers (state, checkedLayers) {
    state.checkedLayers = checkedLayers
  },
  setServiceLayerHelper (state, layerHelper) {
    state.serviceLayerHelper = layerHelper
  },

 src/views/MapTemplate.vue

@@ -6,9 +6,8 @@
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <!--            <div class="barline"></div>-->
      <lc-service-layer class="barline"></lc-service-layer>
            <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
    </sgis-layer-controller>
    <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
    <monitor-panel></monitor-panel>
    <top-enterprise-panel></top-enterprise-panel>
    <tool-box-panel></tool-box-panel>
@@ -22,11 +21,11 @@
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'

export default {
  name: 'MapTemplate',
  components: {
@@ -36,21 +35,18 @@
    MonitorPanel,
    LcBasemap,
    LcServiceLayer,
    LcServiceLayerFilter,
    Popup
  },
  data () {
    return {
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  computed: {
    showServiceLayerFilter () {
      return this.$store.state.map.showServiceLayerFilter
    },
    mapConfig () {
      return this.$store.state.map.mapConfig
    }
@@ -62,10 +58,13 @@
  },
  methods: {
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
      this.$store.commit('setBasemapHelper', this.basemapHelper)
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      // this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)

      this.lcServiceLayerVisible = true
    },
    init () {
      const mapcontainer = this.$refs.rootmap
@@ -100,7 +99,12 @@
      var marker = L.marker([32.2221, 118.7843], {
        icon: icon
      }).addTo(this.map)
        .bindPopup(() => this.$refs.popup.$el, { className: 's-map-popup', minWidth: 300, closeButton: false, autoClose: false })
        .bindPopup(() => this.$refs.popup.$el, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
        .bindTooltip('字体光晕效果t.', {
          // permanent : true,
          offset: [0, 0], // 偏移