From da21171cc9b248ad9c7f062e41f039eceb910c23 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期六, 09 一月 2021 14:08:19 +0800
Subject: [PATCH] 优化天地图矢量瓦片切换
---
src/components/LayerController/modules/LcBaseMap.vue | 112 +++++++++++++++++++-----------------
src/conf/MapConfig.js | 7 ++
src/components/helpers/BasemapHelper.js | 13 ++--
src/components/helpers/ServiceLayerHelper.js | 5 +
src/Sgis.js | 12 +--
5 files changed, 78 insertions(+), 71 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index cbda89c..79265e7 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -48,9 +48,7 @@
*/
const initBasemapsHelper = (map, L) => {
// todo 杩欓噷杩涜搴曞浘鍦板浘鐨勫垵濮嬪寲
- var basemapHelper = new BasemapHelper({ map, L })
- console.log(basemapHelper)
- return basemapHelper
+ return new BasemapHelper({ map, L })
}
/**
* 涓氬姟搴曞浘鍒濆鍖�
@@ -58,8 +56,7 @@
* @param L
*/
const initTileLayersHelper = (map, L) => {
- const serviceLayerHelper = new ServiceLayerHelper({ map, L })
- return serviceLayerHelper
+ return new ServiceLayerHelper({ map, L })
}
/**
@@ -69,9 +66,8 @@
*/
const initVectorLayersHelper = (map, L) => {
// todo 杩欓噷杩涜鍦板浘鐨勫垵濮嬪寲
- var vectorLayerHelper = new VectorLayerHelper({ map, L })
- window.vectorLayerHelper = vectorLayerHelper
- return vectorLayerHelper
+ window.vectorLayerHelper = new VectorLayerHelper({ map, L })
+ return window.vectorLayerHelper
}
export default {
diff --git a/src/components/LayerController/modules/LcBaseMap.vue b/src/components/LayerController/modules/LcBaseMap.vue
index 315c641..e5af6f2 100644
--- a/src/components/LayerController/modules/LcBaseMap.vue
+++ b/src/components/LayerController/modules/LcBaseMap.vue
@@ -1,85 +1,91 @@
<template>
- <div class="inner-panel" v-show="isShow">
- <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
- <div style="display: flex;">
- <el-checkbox :src="item.conf.icon_actived" style="display: flex;" name="basemap" v-model="selectedBasemap"
- :value="item.code" label="item.code" @change="changeBasemap">鏍囨敞
+ <div class="base-map-inner-panel" v-show="isShow">
+ <div style="display: flex;" v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
+ <img class="base-map-img" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
+ @click="changeBasemap(item)"/>
+ <el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
+ label="鏍囨敞" @change="changeBasemap(item)">
</el-checkbox>
- <img style="position: absolute;" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
- @click="changeBasemap"/>
- </div>
-
-
- <!-- <input style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="鏄剧ず鏍囨敞" @change="changeBasemap"/>鏍囨敞-->
-
</div>
</div>
</template>
-
<script>
export default {
- name: "LcBaseMap",
+ name: 'LcBaseMap',
components: {},
- data() {
+ data () {
return {
isShow: true,
- basemapList: [],
- selectedBasemap: "tianditu_img",
- };
+ basemapList: []
+ }
},
computed: {
- basemapHelper() {
+ basemapHelper () {
return this.$store.state.map.basemapHelper
}
},
- mounted() {
+ mounted () {
},
methods: {
- toggleShow() {
- this.isShow = !this.isShow
+ updateBasemapList () {
+ this.basemapList = this.basemapHelper.getBasemapList()
},
- updateBasemapList() {
- let list = this.basemapHelper.getBasemapList();
- this.basemapList = list;
- },
- changeBasemap() {
- this.basemapHelper.showBasemap(this.selectedBasemap, true)
- },
+ changeBasemap (itm) {
+ const code = itm.code
+ this.basemapList.forEach((item) => {
+ if (item.code === code) {
+ this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
+ this.basemapHelper.getBasemapList().forEach((item) => {
+ item.layer.bringToBack()
+ })
+ }
+ })
+ }
},
watch: {
- basemapHelper(newVal) {
+ basemapHelper (newVal) {
if (newVal != null) {
- this.updateBasemapList();
+ this.updateBasemapList()
}
- },
- },
-};
+ }
+ }
+}
</script>
-<style scoped lang="less">
-.inner-panel {
+<style lang="less">
+.base-map-inner-panel {
display: flex;
justify-content: center;
align-items: center;
-}
-.basemap-layer-item {
- display: flex;
- width: 50px;
- height: 50px;
- margin: 10px;
- border: 2px solid white;
-
- input {
- position: relative;
- left: 0px;
- top: -53px;
+ .base-map-img{
+ position: absolute;
}
-
- .basemap-layer-item-name {
- position: relative;
- left: 0px;
- top: -53px;
+ .base-map-img:hover{
+ cursor:pointer;
+ }
+ .base-map-anno{
+ position: absolute;margin-left: 2px;background-color: rgba(0,0,0,.5);color: white;
+ .el-checkbox__label{
+ padding-left: 5px !important;
+ }
+ }
+ .basemap-layer-item {
+ display: flex;
+ width: 50px;
+ height: 50px;
+ margin: 10px;
+ border: 2px solid white;
+ input {
+ position: relative;
+ left: 0;
+ top: -53px;
+ }
+ .basemap-layer-item-name {
+ position: relative;
+ left: 0;
+ top: -53px;
+ }
}
}
</style>
diff --git a/src/components/helpers/BasemapHelper.js b/src/components/helpers/BasemapHelper.js
index d9a0801..60fc9e8 100644
--- a/src/components/helpers/BasemapHelper.js
+++ b/src/components/helpers/BasemapHelper.js
@@ -50,16 +50,15 @@
* @param layer 寰呮樉绀哄浘灞傚紩鐢�
* @param isHideOthers 鏄惁鍏堝叧闂叾浠栧浘灞傦紝榛樿鏄痶rue
*/
- showBasemap = (code, isHideOthers = true) => {
+ showBasemap = (code, showAnnotation, isHideOthers = true) => {
const basemap = this.basemapMap.get(code)
if (isHideOthers) {
- for (let i = 0, len = this.basemapList.length; i < len; ++i) {
- this.map.removeLayer(this.basemapList[i].layer)
- this.map.removeLayer(this.basemapList[i].annotation)
- }
+ this.basemapLayerGroup.clearLayers()
}
- this.map.addLayer(basemap.layer)
- this.map.addLayer(basemap.annotation)
+ this.basemapLayerGroup.addLayer(basemap.layer)
+ if (showAnnotation) {
+ this.basemapLayerGroup.addLayer(basemap.annotation)
+ }
}
/**
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 7175040..21d9aca 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -10,6 +10,7 @@
this.L = options.L
this.tileLayersMap = new Map()
this.tileLayersWMSArray = []
+ this.tileLayerWmslayerGroup = L.layerGroup().addTo(this.map)
this.tileLayersWMTSArray = []
this.tileLayersTileArray = []
this.mapConfig = {}
@@ -72,7 +73,7 @@
layer.config = config
if (isAddToMap) {
- layer.addTo(this.map)
+ layer.addTo(this.tileLayerWmslayerGroup)
}
this.tileLayersMap.set(options.code, layer)
this.tileLayersWMSArray.push(layer)
@@ -152,7 +153,7 @@
getWMSConfig (code) {
const mc = this.mapConfig
for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
- if (code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
+ if (code === mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
return mc.mapConfig.ServiceLayers[i]
}
}
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index c0880fc..08b9b3e 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -45,6 +45,7 @@
icon_actived: '/assets/images/map-pages/icon/img.png',
icon_deactived: '/assets/images/map-pages/icon/img.png',
isAddToMap: true,
+ annotationCheck: true,
map: {
layerName: '澶╁湴鍥惧奖鍍忓湴鍥�',
type: 'wmts',
@@ -80,6 +81,7 @@
icon_actived: '/assets/images/map-pages/icon/road.png',
icon_deactived: '/assets/images/map-pages/icon/road.png',
isAddToMap: false,
+ annotationCheck: true,
map: {
layerName: '澶╁湴鍥剧煝閲忓湴鍥�',
type: 'wmts',
@@ -117,6 +119,7 @@
icon_actived: '/assets/images/map-pages/icon/img.png',
icon_deactived: '/assets/images/map-pages/icon/img.png',
isAddToMap: true,
+ annotationCheck: true,
map: {
layerName: '澶╁湴鍥惧奖鍍忓湴鍥�',
type: 'wmts',
@@ -150,16 +153,18 @@
},
{
code: 'tianditu_vec',
- name: '澶╁湴鍥惧奖鍍�',
+ name: '澶╁湴鍥剧煝閲�',
icon_actived: '/assets/images/map-pages/icon/road.png',
icon_deactived: '/assets/images/map-pages/icon/road.png',
isAddToMap: false,
+ annotationCheck: true,
map: {
layerName: '澶╁湴鍥剧煝閲忓湴鍥�',
type: 'wmts',
visible: false,
layerType: 'vec_c',
isLoadMapByToken: true,
+ annotationCheck: true,
url: TIANDITU_GIS_HOST + '/vec_c/wmts?layer=vec&style=default&tilematrixset=c' +
'&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
'&tk=' + TIANDITU_GIS_TOKEN,
--
Gitblit v1.8.0