From b89ad0355f2d466304ecc2dad86407e26aa69db4 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期一, 22 二月 2021 18:37:47 +0800 Subject: [PATCH] 修改图层控制 --- src/components/LayerController/modules/LcServiceLayerFilter.vue | 214 ++++++++++++++++++++++++++--------------------------- 1 files changed, 106 insertions(+), 108 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue index 4fe2af2..cb36875 100644 --- a/src/components/LayerController/modules/LcServiceLayerFilter.vue +++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue @@ -1,136 +1,134 @@ <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 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> - </div> - </div> - </div> - </div> - </div> + <div class="inner-panel"> + <div class="filter-group"> + <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> + </div> + </div> + </div> + </div> + </div> </template> <script> -import { mapState, mapMutations } from "vuex"; -import WmsHelper from "../../helpers/WmsHelper"; +import { mapMutations } from 'vuex' +import WmsHelper from '../../helpers/WmsHelper' export default { - name: "LcServiceLayerFilter", + name: 'LcServiceLayerFilter', components: {}, - data() { + data () { return { - filterConfig: [], // 闄勫睘瑕佺礌 - }; + visible: {}, + filterConfig: [] // 闄勫睘瑕佺礌 + } }, computed: { - ...mapState({ - serviceLayerHelper: (state) => { - return state.serviceLayerHelper - }, - selectedServiceLayer: (state) => { - return state.selectedServiceLayer - }, - serviceLayerFilters: (state) => { - return state.serviceLayerFilters - }, - mapConfig: (state) => { - return state.mapConfig - } - }), + config () { + return this.$store.state.map.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++) { + var checkedLayer = checkedLayers[i] + if (checkedLayer.childLayer.indexOf(code) >= 0) { + return checkedLayer + } + } + }) + } }, - mounted() { - + 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) - if (tileLayer) { - tileLayer.setParams({layers: layers.join(',')}, true) - tileLayer.setUrl(tileLayer.config.url,false) - } - } - } - }, - watch: { - selectedServiceLayer(newVal){ - this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup + swAllSubFilter (item) { + item.checked = !item.checked + for (let i = 0, len = item.filters.length; i < len; ++i) { + item.filters[i].checked = item.checked } + var mapConfig = this.mapConfig + var wmsHelper = new WmsHelper() + wmsHelper.initMapConfig(mapConfig) + var wmsLayersMap = wmsHelper.getWmsLayersMap() + 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) + } + } + } } -}; +} </script> <style scoped lang="less"> -.inner-panel { - color:#90c8e0; - font-size: 13px; + .inner-panel { + color: #90c8e0; + font-size: 13px; - position: absolute; - left: 250px; - bottom: 10px; - z-index: 1000; - height: 220px; - width: 500px; + position: absolute; + left: 250px; + bottom: 10px; + z-index: 1000; + height: 220px; - .filter-group{ - display: flex; - flex-flow: row; + .filter-group { + display: flex; + flex-flow: row; - .filter-item{ - width: 120px; - height: 100%; - margin-right: 5px; + .filter-item { + width: 120px; + height: 100%; + margin-right: 5px; - .title{ - height: '25px'; - background-color: #091331; - border: 1px solid #10488c; - } - .content{ - background-color: rgba(44,62,80, 0.6); - border: 1px solid #10488c; - max-height: 200px; - overflow-y: auto; - } + .title { + height: '25px'; + background-color: #091331; + border: 1px solid #10488c; + } - ::-webkit-scrollbar{ - width: 7px; - height: 5px !important; - } - ::-webkit-scrollbar-thumb { - /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ - border-radius: 10px; - box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); - background : #0661AE; - border: 1px solid transparent; - } - ::-webkit-scrollbar-track { - /*婊氬姩鏉¢噷闈㈣建閬�*/ - // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); - border-radius: 0px; - background : #0E3565; + .content { + background-color: rgba(44, 62, 80, 0.6); + border: 1px solid #10488c; + max-height: 200px; + overflow-y: auto; + } + + ::-webkit-scrollbar { + width: 7px; + height: 5px !important; + } + + ::-webkit-scrollbar-thumb { + /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ + border-radius: 10px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); + background: #0661AE; + border: 1px solid transparent; + } + + ::-webkit-scrollbar-track { + /*婊氬姩鏉¢噷闈㈣建閬�*/ + // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); + border-radius: 0px; + background: #0E3565; + } } } } -} </style> -- Gitblit v1.8.0