From 3eda2a49edc60f3961604223f557dcd6ab6db94f Mon Sep 17 00:00:00 2001
From: wangrui <zephyrs0894@163.com>
Date: 星期三, 23 十二月 2020 16:52:54 +0800
Subject: [PATCH] 底图切换组件开发完成
---
public/assets/images/map-pages/icon/road.png | 0
src/assets/images/map-pages/icon/road.png | 0
src/components/LayerController/modules/LcBaseMap.vue | 82 ++++++++++++++++++---------
src/conf/MapConfig.js | 16 ++--
src/views/MapTemplate.vue | 7 -
public/assets/images/map-pages/icon/terrain.png | 0
src/assets/images/map-pages/icon/img.png | 0
src/components/LayerController/LayerController.vue | 2
src/components/helpers/BasemapHelper.js | 19 +++---
public/assets/images/map-pages/icon/img.png | 0
src/assets/images/map-pages/icon/terrain.png | 0
11 files changed, 76 insertions(+), 50 deletions(-)
diff --git a/public/assets/images/map-pages/icon/img.png b/public/assets/images/map-pages/icon/img.png
new file mode 100644
index 0000000..aab5372
--- /dev/null
+++ b/public/assets/images/map-pages/icon/img.png
Binary files differ
diff --git a/public/assets/images/map-pages/icon/road.png b/public/assets/images/map-pages/icon/road.png
new file mode 100644
index 0000000..9de0a95
--- /dev/null
+++ b/public/assets/images/map-pages/icon/road.png
Binary files differ
diff --git a/public/assets/images/map-pages/icon/terrain.png b/public/assets/images/map-pages/icon/terrain.png
new file mode 100644
index 0000000..9da2e04
--- /dev/null
+++ b/public/assets/images/map-pages/icon/terrain.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/img.png b/src/assets/images/map-pages/icon/img.png
new file mode 100644
index 0000000..aab5372
--- /dev/null
+++ b/src/assets/images/map-pages/icon/img.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/road.png b/src/assets/images/map-pages/icon/road.png
new file mode 100644
index 0000000..9de0a95
--- /dev/null
+++ b/src/assets/images/map-pages/icon/road.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/terrain.png b/src/assets/images/map-pages/icon/terrain.png
new file mode 100644
index 0000000..9da2e04
--- /dev/null
+++ b/src/assets/images/map-pages/icon/terrain.png
Binary files differ
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index 616af98..61e0339 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -196,7 +196,7 @@
}
.bodyBox{
- background-color: rgba(0x04, 0x52, 0x7f, 0.6);
+ background-color: rgba(44,62,80, 0.6);
border: 1px solid #10488c;
margin-top: -1px;
height: auto;
diff --git a/src/components/LayerController/modules/LcBaseMap.vue b/src/components/LayerController/modules/LcBaseMap.vue
index e86d7c1..9fca7f7 100644
--- a/src/components/LayerController/modules/LcBaseMap.vue
+++ b/src/components/LayerController/modules/LcBaseMap.vue
@@ -1,46 +1,74 @@
<template>
-<div class="inner-panel">
+ <div class="inner-panel">
<div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
- <img src="" width="40" height="40" :title="item.name"/>
- <input type="checkbox" title="鏄剧ず鏍囨敞" />
+ <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name"/>
+ <input type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="鏄剧ず鏍囨敞" @change="changeBasemap"/>
</div>
-</div>
+ </div>
</template>
<script>
+import { mapState, mapMutations } from "vuex";
export default {
- name: 'LcBaseMap',
+ name: "LcBaseMap",
components: {},
- porps:['helper'],
data() {
return {
- basemapHelper:null,
- basemapList:[]
- }
+ basemapList: [],
+ selectedBasemap: "tianditu_img",
+ };
},
- mounted(){
+ computed: {
+ ...mapState({
+ basemapHelper: (state) => {
+ return state.basemapHelper;
+ },
+ }),
+ },
+ mounted() {
// console.log('03姝ラ锛�', this.helper)
},
- methods:{
-init(basemapHelper){
- console.log('03姝ラ锛�', this.helper)
- console.log(basemapHelper)
- this.basemapHelper =basemapHelper
-}
-
- }
-}
+ methods: {
+ ...mapMutations([]),
+ updateBasemapList() {
+ let list = this.basemapHelper.getBasemapList();
+ this.basemapList = list;
+ },
+ changeBasemap() {
+ this.basemapHelper.showBasemap(this.selectedBasemap, true)
+ },
+ },
+ watch: {
+ basemapHelper(newVal) {
+ if (newVal != null) {
+ this.updateBasemapList();
+ }
+ },
+ },
+};
</script>
<style scoped lang="less">
-.inner-panel{
- display: flex;
- justify-content: center;
- align-items: center;
+.inner-panel {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.basemap-layer-item{
- width: 40px;
- height: 40px;
- margin: 10px;
+.basemap-layer-item {
+ width: 50px;
+ height: 50px;
+ margin: 10px;
+ border: 2px solid white;
+
+ input {
+ position: relative;
+ left: 0px;
+ top: -53px;
+ }
+ .basemap-layer-item-name {
+ position: relative;
+ left: 0px;
+ top: -53px;
+ }
}
</style>
diff --git a/src/components/helpers/BasemapHelper.js b/src/components/helpers/BasemapHelper.js
index 498e54b..652c7e8 100644
--- a/src/components/helpers/BasemapHelper.js
+++ b/src/components/helpers/BasemapHelper.js
@@ -46,30 +46,31 @@
/**
* 鏄剧ず鏌愪釜鍥惧眰
- * @param map 鍦板浘瀵硅薄
* @param layer 寰呮樉绀哄浘灞傚紩鐢�
* @param isHideOthers 鏄惁鍏堝叧闂叾浠栧浘灞傦紝榛樿鏄痶rue
*/
- showBasemap = (map, code, isHideOthers = true) => {
+ showBasemap = (code, isHideOthers = true) => {
+ debugger
let basemap = this.basemapMap.get(code)
if(isHideOthers) {
for(let i = 0, len = this.basemapList.length; i < len; ++i){
- map.removeLayer(this.basemapList[i])
+ this.map.removeLayer(this.basemapList[i].layer)
+ this.map.removeLayer(this.basemapList[i].annotation)
}
}
- map.addLayer(basemap.layer)
- map.addLayer(basemap.annotation)
+ this.map.addLayer(basemap.layer)
+ this.map.addLayer(basemap.annotation)
}
/**
* 闅愯棌鏌愪釜鍥惧眰
- * @param map 鍦板浘瀵硅薄
* @param layer 寰呭叧闂浘灞傚紩鐢�
*/
- hideBasemap = (map, code) => {
+ hideBasemap = (code) => {
+ debugger
let basemap = this.basemapMap.get(code)
- map.removeLayer(basemap.layer)
- map.removeLayer(basemap.annotation)
+ this.map.removeLayer(basemap.layer)
+ this.map.removeLayer(basemap.annotation)
}
// 鍏綉鍒涘缓鍦板浘閮ㄥ垎
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index a12465e..2c47b97 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -36,8 +36,8 @@
{
code: 'sinopec_img',
name: '涓煶鍖栧ぉ鍦板浘褰卞儚',
- icon_actived: '',
- icon_deactived: '',
+ icon_actived: '/assets/images/map-pages/icon/img.png',
+ icon_deactived: '/assets/images/map-pages/icon/img.png',
isAddToMap: true,
map: {
layerName: '澶╁湴鍥惧奖鍍忓湴鍥�',
@@ -71,8 +71,8 @@
{
code: 'sinopec_vec',
name: '涓煶鍖栧ぉ鍦板浘鐭㈤噺',
- icon_actived: '',
- icon_deactived: '',
+ icon_actived: '/assets/images/map-pages/icon/road.png',
+ icon_deactived: '/assets/images/map-pages/icon/road.png',
isAddToMap: false,
map: {
layerName: '澶╁湴鍥剧煝閲忓湴鍥�',
@@ -108,8 +108,8 @@
{
code: 'tianditu_img',
name: '澶╁湴鍥惧奖鍍�',
- icon_actived: '',
- icon_deactived: '',
+ icon_actived: '/assets/images/map-pages/icon/img.png',
+ icon_deactived: '/assets/images/map-pages/icon/img.png',
isAddToMap: true,
map: {
layerName: '澶╁湴鍥惧奖鍍忓湴鍥�',
@@ -145,8 +145,8 @@
{
code: 'tianditu_vec',
name: '澶╁湴鍥惧奖鍍�',
- icon_actived: '',
- icon_deactived: '',
+ icon_actived: '/assets/images/map-pages/icon/road.png',
+ icon_deactived: '/assets/images/map-pages/icon/road.png',
isAddToMap: false,
map: {
layerName: '澶╁湴鍥剧煝閲忓湴鍥�',
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 18537fc..0d5cabd 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -2,7 +2,7 @@
<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>
</sgis-layer-controller>
<monitor-panel></monitor-panel>
</div>
@@ -42,7 +42,6 @@
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) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘
@@ -53,12 +52,10 @@
this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
this.vectorLayerHelper.initVectorLayers(mapConfig)
- console.log('02姝ラ锛�', this.basemapHelper)
- this.$refs.lcBasemap.init(this.basemapHelper)
+ this.setMapObj(this.mapObj)
this.setBasemapHelper(this.basemapHelper)
this.setServiceLayerHelper(this.serviceLayerHelper)
this.setVectorLayerHelper(this.vectorLayerHelper)
- return this.map
}
}
}
--
Gitblit v1.8.0