From e8bcc8ff69702b8c2ba123981a45e668cf95a01b Mon Sep 17 00:00:00 2001 From: wangrui <zephyrs0894@163.com> Date: 星期五, 25 十二月 2020 16:17:35 +0800 Subject: [PATCH] 图层控制 --- src/views/MapTemplate.vue | 36 ++++++++++++++++++++++++------------ 1 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index cfb1870..cbc4bcc 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -2,10 +2,11 @@ <div class="full-screen"> <div id="map" ref="rootmap"></div> <sgis-layer-controller :preset="'warningPreset'"> - <template v-slot:default> <lc-basemap></lc-basemap> - </template> + <div class="barline"></div> + <lc-service-layer></lc-service-layer> </sgis-layer-controller> + <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter> <monitor-panel></monitor-panel> </div> </template> @@ -13,21 +14,29 @@ <script> import 'leaflet/dist/leaflet.css' import Sgis from '@src/Sgis' -import mapConfig from '@/conf/MapConfig' +// import mapConfig from '@/conf/MapConfig' import SgisLayerController from '@components/LayerController/LayerController' import LcBasemap from '@components/LayerController/modules/LcBaseMap' +import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer' +import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter' import MonitorPanel from '@components/panel/MonitorPanel' -import { mapMutations } from 'vuex' +import { mapMutations, mapState } from 'vuex' export default { name: 'MapTemplate', - components: {SgisLayerController, MonitorPanel, LcBasemap}, + components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter}, data(){ return { basemapHelper: {}, serviceLayerHelper: {}, vectorLayerHelper: {} } + }, + computed:{ + ...mapState({ + showServiceLayerFilter: state => state.showServiceLayerFilter, + mapConfig: state => state.mapConfig + }) }, beforeMount(){ this.$nextTick(() => { @@ -39,27 +48,25 @@ setMapObj: 'setMapObj', setBasemapHelper: 'setBasemapHelper', setServiceLayerHelper: 'setServiceLayerHelper', - setVectorLayerHelper: 'setVectorLayerHelper', + setVectorLayerHelper: 'setVectorLayerHelper' }), init() { const mapcontainer = this.$refs.rootmap this.mapObj = Sgis.initMap(mapcontainer) - console.log('01姝ラ锛�', this.mapObj) this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜 - this.basemapHelper.initBasemap(mapConfig, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 + this.basemapHelper.initBasemap(this.mapConfig, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵� - this.serviceLayerHelper.initServiceLayers(mapConfig) + this.serviceLayerHelper.initServiceLayers(this.mapConfig) this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� - this.vectorLayerHelper.initVectorLayers(mapConfig) + this.vectorLayerHelper.initVectorLayers(this.mapConfig) - console.log('02姝ラ锛�', this.basemapHelper) + this.setMapObj(this.mapObj) this.setBasemapHelper(this.basemapHelper) this.setServiceLayerHelper(this.serviceLayerHelper) this.setVectorLayerHelper(this.vectorLayerHelper) - return this.map } } } @@ -77,5 +84,10 @@ height: 100%; width: 100%; } + .barline{ + width: 100%; + height: 1px; + background-color: #0661AE; + } } </style>> -- Gitblit v1.8.0