From a6da1ff6d9b294f46955da5d5cff30919467fa8b Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期一, 22 二月 2021 12:40:40 +0800 Subject: [PATCH] 修改图层控制 --- src/components/LayerController/modules/LcServiceLayerFilter.vue | 166 +++++++++++++++++++++++++++---------------------------- 1 files changed, 82 insertions(+), 84 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue index a185123..cd5fb45 100644 --- a/src/components/LayerController/modules/LcServiceLayerFilter.vue +++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue @@ -1,20 +1,23 @@ <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 { 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 - }, - selectedServiceLayer: (state) => { - return state.selectedServiceLayer - }, - serviceLayerFilters: (state) => { - return state.serviceLayerFilters - }, - mapConfig: (state) => { - return state.mapConfig - } - }) + mapConfig () { + return this.$store.state.map.mapConfig.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) @@ -71,66 +72,63 @@ } } } - }, - watch: { - selectedServiceLayer (newVal) { - this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup - } } } </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