From a23a2c417afcf46da2f2626d4fdecddade205405 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期一, 11 一月 2021 16:39:06 +0800 Subject: [PATCH] 优化左下角业务看板展示动画 --- src/views/MapTemplate.vue | 84 +++++++++++++++++++++++++---------------- 1 files changed, 51 insertions(+), 33 deletions(-) diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index 18537fc..d628efa 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -2,64 +2,76 @@ <div class="full-screen"> <div id="map" ref="rootmap"></div> <sgis-layer-controller :preset="'warningPreset'"> - <lc-basemap ref="lcBasemap"></lc-basemap> + <lc-basemap></lc-basemap> +<!-- <div class="barline"></div>--> + <lc-service-layer class="barline"></lc-service-layer> </sgis-layer-controller> + <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter> <monitor-panel></monitor-panel> + <top-enterprise-panel></top-enterprise-panel> </div> </template> <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 TopEnterprisePanel from '@components/panel/TopEnterprisePanel' export default { name: 'MapTemplate', - components: {SgisLayerController, MonitorPanel, LcBasemap}, - data(){ + components: { TopEnterprisePanel, SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter }, + data () { return { basemapHelper: {}, serviceLayerHelper: {}, vectorLayerHelper: {} } }, - beforeMount(){ - this.$nextTick(() => { - this.init() - }) + computed: { + showServiceLayerFilter () { + return this.$store.state.map.showServiceLayerFilter + }, + mapConfig () { + return this.$store.state.map.mapConfig + } }, - methods:{ - ...mapMutations({ - setMapObj: 'setMapObj', - setBasemapHelper: 'setBasemapHelper', - setServiceLayerHelper: 'setServiceLayerHelper', - setVectorLayerHelper: 'setVectorLayerHelper', - }), - init() { - const mapcontainer = this.$refs.rootmap - this.mapObj = Sgis.initMap(mapcontainer) - console.log('01姝ラ锛�', this.mapObj) + beforeMount () { + this.$nextTick(() => { + this.init() + }) + }, + methods: { + saveMapStatus () { + this.$store.commit('setMapObj', this.mapObj) + this.$store.commit('setBasemapHelper', this.basemapHelper) + this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper) + this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper) + }, + init () { + const mapcontainer = this.$refs.rootmap + this.mapObj = Sgis.initMap(mapcontainer) - this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜 - this.basemapHelper.initBasemap(mapConfig, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 + this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜 + this.basemapHelper.initBasemap(this.mapConfig, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘 - this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵� - this.serviceLayerHelper.initServiceLayers(mapConfig) + this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵� + this.serviceLayerHelper.initServiceLayers(this.mapConfig) - this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� - this.vectorLayerHelper.initVectorLayers(mapConfig) + this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵� + this.vectorLayerHelper.initVectorLayers(this.mapConfig) - console.log('02姝ラ锛�', this.basemapHelper) - this.$refs.lcBasemap.init(this.basemapHelper) - this.setBasemapHelper(this.basemapHelper) - this.setServiceLayerHelper(this.serviceLayerHelper) - this.setVectorLayerHelper(this.vectorLayerHelper) - return this.map - } + this.saveMapStatus() + // this.setMapObj(this.mapObj) + // this.setBasemapHelper(this.basemapHelper) + // this.setServiceLayerHelper(this.serviceLayerHelper) + // this.setVectorLayerHelper(this.vectorLayerHelper) + } } } </script> @@ -76,5 +88,11 @@ height: 100%; width: 100%; } + .barline{ + //width: 100%; + //height: 1px; + //background-color: #0661AE; + border-top: 1px solid #0661AE; + } } </style>> -- Gitblit v1.8.0