From 4120da64cb01731c1e11792aa2d1f5df6bd80871 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期二, 09 三月 2021 17:12:42 +0800 Subject: [PATCH] 修改问题 --- src/components/LayerController/modules/LcServiceLayer.vue | 184 ++++++++++++++++++--------------------------- 1 files changed, 74 insertions(+), 110 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index dcf9fcd..b86a7e6 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -1,57 +1,47 @@ <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><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> + <div class="inner-panel"> + <div class="wms-panel"> + <div v-for="item in 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> + </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(item.url,itm)"/>{{ + itm.name }} + </div> + </div> + </div> </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 }} - </div> - </div> - </div> + <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter> </div> - </div> </template> <script> -import WmsHelper from '../../helpers/WmsHelper' +import WfsHelper from '../../helpers/WfsHelper' +import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter' +import AjaxUtils from '../../../utils/AjaxUtils' 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 + serviceLayers () { + return this.$store.state.map.serviceLayers.LayerSewersLine } }, mounted () { // console.log('03姝ラ锛�', this.helper) + this.updateServiceLayerList() }, methods: { swAllLayers (item) { @@ -61,71 +51,43 @@ item.layers[i].checked = item.checked } this.updateWms() + }, + loadWfs () { + var wfsHelper = new WfsHelper() + wfsHelper.addTypeName('绠$嚎鐐�') + wfsHelper.addEquals('pipename', '鐮旂┒闄�01璺痀S000001') - console.log(this.mapConfig) + AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => { + console.log(res) + }) }, - swTileLayer () { - console.log('璇ILE鏂规硶鏈疄鐜帮紒') - }, - swWmtsLayer () { - console.log('璇MTS鏂规硶鏈疄鐜帮紒') - }, - swWmsLayer (itm) { - console.log('22222222') + swWmsLayer (url, itm) { itm.checked = !itm.checked - this.updateWms() + if (itm.checked) { + window.serviceLayerHelper.loadGeojsonLayer(url, itm) + } else { + window.serviceLayerHelper.removeLayer(itm) + } + // 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() + var wmsHelper = new WfsHelper() 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() } } } @@ -133,36 +95,38 @@ </script> <style scoped lang="less"> -.inner-panel { - display: flex; - justify-content: center; - align-items: center; - - .btn-filter { - cursor: pointer; - } - - .wms-panel { - display: flex; - flex-flow: column; - - .layerbox { - width: 100%; - display: flex; - flex-flow: column; - - .layerbox-item { + .inner-panel { display: flex; - flex-flow: row wrap; - margin-left: 15px; - margin-top: 5px; + justify-content: center; + align-items: center; - .basemap-layer-item { - width: 50%; + .btn-filter { + cursor: pointer; + color: #ffffff; } - } + + .wms-panel { + width: 250px; + display: flex; + flex-flow: column; + + .layerbox { + width: 100%; + display: flex; + flex-flow: column; + + .layerbox-item { + display: flex; + flex-flow: row wrap; + margin-left: 15px; + margin-top: 5px; + + .basemap-layer-item { + width: 50%; + } + } + } + } } - } -} </style> -- Gitblit v1.8.0