From d6157c06771caadcaa09a11d25ddfa144d7fe9f5 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期二, 05 一月 2021 16:56:28 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 src/components/LayerController/modules/LcBaseMap.vue |   93 +++++++++++++++++++++++++++++++++-------------
 1 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/src/components/LayerController/modules/LcBaseMap.vue b/src/components/LayerController/modules/LcBaseMap.vue
index e86d7c1..315c641 100644
--- a/src/components/LayerController/modules/LcBaseMap.vue
+++ b/src/components/LayerController/modules/LcBaseMap.vue
@@ -1,46 +1,85 @@
 <template>
-<div class="inner-panel">
+  <div class="inner-panel" v-show="isShow">
     <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="鏄剧ず鏍囨敞" />
+      <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">鏍囨敞
+        </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>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'LcBaseMap',
+  name: "LcBaseMap",
   components: {},
-  porps:['helper'],
   data() {
     return {
-      basemapHelper:null,
-        basemapList:[]
+      isShow: true,
+      basemapList: [],
+      selectedBasemap: "tianditu_img",
+    };
+  },
+  computed: {
+    basemapHelper() {
+      return this.$store.state.map.basemapHelper
     }
   },
-  mounted(){
-    // console.log('03姝ラ锛�', this.helper)
+  mounted() {
   },
-  methods:{
-init(basemapHelper){
-  console.log('03姝ラ锛�', this.helper)
-  console.log(basemapHelper)
-  this.basemapHelper =basemapHelper
-}
-
-  }
-}
+  methods: {
+    toggleShow() {
+      this.isShow = !this.isShow
+    },
+    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 {
+  display: flex;
+  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>

--
Gitblit v1.8.0