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/LcServiceLayer.vue | 177 +++++++++++++++++++++------------------------------------- 1 files changed, 65 insertions(+), 112 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 621be78..cb9a7e8 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -1,135 +1,87 @@ <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> + @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)" + class="btn-filter">杩囨护</span> </div> <div class="layerbox-item"> <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" :name="'wmsSublayers_'+item.code+'_'+itm.code" :checked="itm.checked" :value="itm.code" - @change="swWmsLayer(itm)"/>{{itm.sname}} + @change="swWmsLayer(itm)"/>{{ itm.sname }} </div> </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 WmsHelper from '../../helpers/WmsHelper' +import AjaxUtils from '@/utils/AjaxUtils' +import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter' +export default { + name: 'LcServiceLayer', + components: { LcServiceLayerFilter }, + data () { + return { + layerFilterVisible: false + } + }, + computed: { + mapConfig () { + return this.$store.state.map.mapConfig.mapConfig + } + }, + mounted () { + // console.log('03姝ラ锛�', this.helper) + this.updateServiceLayerList() + }, + methods: { + swAllLayers (item) { + // eslint-disable-next-line no-debugger + item.checked = !item.checked + for (let i = 0, len = item.layers.length; i < len; ++i) { + item.layers[i].checked = item.checked + } + this.updateWms() + }, + 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) { + itm.checked = !itm.checked + this.updateWms() + }, + swFilter (item) { + this.layerFilterVisible = !this.layerFilterVisible + }, + updateServiceLayerList () { - export default { - name: "LcServiceLayer", - components: {}, - data() { - return { - selectedLineLayer: [], // 閫変腑鐨勭绾垮浘灞� - selectedSubsidiaryLayer: [], // 閫変腑鐨勯檮灞炶绱� - serviceTileLayerList: [], // Tile鍥惧眰鍒楄〃 - serviceWmtsLayerList: [], // Wmts鍥惧眰鍒楄〃 - serviceWmsLayerList: [] // 鍥惧眰鍒楄〃 - }; - }, - computed: { - serviceLayerHelper(){ - return this.$store.state.map.serviceLayerHelper - }, - mapConfig(){ - return this.$store.state.map.mapConfig - } - }, - mounted() { - // console.log('03姝ラ锛�', this.helper) - }, - methods: { - swAllLayers(item) { - // eslint-disable-next-line no-debugger - item.checked = !item.checked - for (let i = 0, len = item.layers.length; i < len; ++i) { - item.layers[i].checked = item.checked - } - this.updateWms() - - console.log(this.mapConfig) - }, - swTileLayer() { - console.log('璇ILE鏂规硶鏈疄鐜帮紒') - }, - swWmtsLayer() { - console.log('璇MTS鏂规硶鏈疄鐜帮紒') - }, - swWmsLayer(itm) { - console.log('22222222') - itm.checked = !itm.checked - this.updateWms() - }, - swFilter(item) { - this.$store.commit('setSelectedServiceLayer', item.code) - this.$store.commit('toggleServiceLayerFilter') - }, - updateServiceLayerList() { - // eslint-disable-next-line no-debugger - // debugger - let 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]) - } - } - let 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]) - } - } - let 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) - if (tileLayer) { - tileLayer.setParams({layers: layers.join(',')}, false) - tileLayer.setUrl(tileLayer.config.url,false) - } - } - } - }, - watch: { - serviceLayerHelper(newVal) { - if (newVal != null) { - this.updateServiceLayerList(); - } - }, - }, - }; + }, + updateWms () { + 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 = window.serviceLayerHelper.getTileLayer(k) + if (tileLayer) { + tileLayer.setParams({ layers: layers.join(',') }, false) + tileLayer.setUrl(tileLayer.config.url, false) + } + } + } + } +} </script> <style scoped lang="less"> @@ -140,6 +92,7 @@ .btn-filter { cursor: pointer; + color: #ffffff; } .wms-panel { -- Gitblit v1.8.0