图层控制

徐旺旺

2020-12-29 cd66cc40d94e0f0845334fd15690cb93c7d50ad1

图层控制

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -30,7 +30,7 @@
    import {mapState, mapMutations} from "vuex";
    import WmsHelper from "../../helpers/WmsHelper";

    var wmsHelper = new WmsHelper()

    export default {
        name: "LcServiceLayer",
        components: {},
@@ -75,6 +75,7 @@
                console.log('该WMTS方法未实现！')
            },
            swWmsLayer(itm) {
                console.log('22222222')
                itm.checked = !itm.checked
                this.updateWms()
            },
@@ -108,7 +109,9 @@
                }
            },
            updateWms() {
                console.log('------')
                var mapConfig = this.mapConfig
                var wmsHelper = new WmsHelper()
                wmsHelper.initMapConfig(mapConfig)
                var wmsLayersMap = wmsHelper.getWmsLayersMap()
                //var filterURL = wmsHelper.getFilterURL()
@@ -117,7 +120,8 @@
                    var layers = wmsLayersMap[k]
                    var tileLayer = this.serviceLayerHelper.getTileLayer(k)
                    if (tileLayer) {
                        tileLayer.setParams({layers: layers}, true)
                        tileLayer.setParams({layers: layers.join(',')}, false)
                        tileLayer.setUrl(tileLayer.config.url,false)
                    }
                }
            }

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -15,6 +15,8 @@

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

export default {
  name: "LcServiceLayerFilter",
  components: {},
@@ -33,11 +35,14 @@
      },
      serviceLayerFilters: (state) => {
        return state.serviceLayerFilters
      },
      mapConfig: (state) => {
        return state.mapConfig
      }
    }),
  },
  mounted() {
    

  },
  methods: {
    ...mapMutations([]),
@@ -49,6 +54,22 @@
        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)
            if (tileLayer) {
                tileLayer.setParams({layers: layers.join(',')}, true)
                tileLayer.setUrl(tileLayer.config.url,false)
            }
        }
    }
  },
  watch: {

 src/components/helpers/WmsHelper.js

@@ -24,8 +24,11 @@
            var filters = layersGroup[i].filters
            for (var j = 0; j < filters.length; j++) {
                var layer = filters[j]
                var checked = layer.checked
                var code = layer.code
                this.addLayer(wms, code)
                if (checked) {
                    this.addLayer(wms, code)
                }
            }
        }
    }

 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:6288'

// 自定义主机配置
const BLUEMAP_HOST = APP_GIS_HOST // 公司发布的地图服务，用于测试的地址
@@ -218,7 +218,7 @@
            icon_actived: '',
            icon_deactived: '',
            type:'wms',
            url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLine/wms?version=1.1.1',
            url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
            inLegend: true,
            checked: true,
            option:{

 src/main.js

@@ -1,5 +1,5 @@
import Vue from 'vue'
import App from './App2.vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import registerDirectives from './directive'