地图切换组件

src/components/map/BasemapChange.vue

@@ -4,21 +4,21 @@
       key="map-change"
       class="map-change"
       :style="{
-        right: `${right}px`,
-        bottom: `${bottom}px`,
+        right: `${rightPosition}%`,
+        bottom: `${bottomPostion}px`,
       }"
       @mouseover="mouseover"
       @mouseleave="mouseleave"
     >
       <!-- 注意key值不能使用数组索引 否则无变化 -->
       <img
-        v-for="(item, index) in images"
+        v-for="(item, index) in state.images"
         :key="item.type"
         :src="item.src"
         class="img__box"
         :class="{ active: index === 0 }"
         :style="{
-          right: `${index * rightPX}px`,
+          right: `${index * state.rightPX}px`,
           'z-index': 99 - index,
         }"
         @click="change(index, item.type)"
@@ -31,6 +31,8 @@ export default {
   name: "BasemapChange",
   data() {
     return {
+      rightPosition: 22,
+      bottomPostion: 30,
       imageGroup: {
         // 地形图
         DX: require("@/assets/map/02.png"),
@@ -49,22 +51,60 @@ export default {
       state: {
         // 图片数组
         images: [
-          { src: this.imageGroup.SEA, type: 1, active: "SEA", defalut: "SE" },
-          { src: this.imageGroup.DX, type: 0, active: "DXA", defalut: "DX" },
-          { src: this.imageGroup.JD, type: 2, active: "JDA", defalut: "JD" },
+          // { src: this.imageGroup.SEA, type: 1, active: "SEA", defalut: "SE" },
+          // { src: this.imageGroup.DX, type: 0, active: "DXA", defalut: "DX" },
+          // { src: this.imageGroup.JD, type: 2, active: "JDA", defalut: "JD" },
+          {
+            src: require("@/assets/map/03_.png"),
+            type: 1,
+            active: "SEA",
+            defalut: "SE",
+          },
+          {
+            src: require("@/assets/map/02.png"),
+            type: 0,
+            active: "DXA",
+            defalut: "DX",
+          },
+          {
+            src: require("@/assets/map/01.png"),
+            type: 2,
+            active: "JDA",
+            defalut: "JD",
+          },
         ],
         rightPX: 50, // 每张图片距离右侧的距离 * index
       },
     };
   },
-  props: {
-    right: {
-      type: Number,
-      default: 10,
+  computed: {
+    baseMapRight() {
+      return this.$store.state.baseMapRight;
     },
-    bottom: {
-      type: Number,
-      default: 10,
+    menuChange() {
+      return this.$store.state.navSelect.name;
+    },
+  },
+  watch: {
+    baseMapRight: {
+      handler(val) {
+        console.log(val, "position");
+        this.rightPosition = val;
+      },
+      immediate: true,
+    },
+    menuChange: {
+      handler(val) {
+        console.log(val, "切换底图组件 -- 监听当前菜单");
+        if (val === "镇域专题") {
+          this.$store.state.baseMapRight = 40;
+        } else if(val === "土地资源"){
+          this.$store.state.baseMapRight = 5
+        }else {
+          this.$store.state.baseMapRight = 22;
+        }
+      },
+      immediate: true,
     },
   },
   methods: {
@@ -93,7 +133,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .map-change-move {
-  transition: transform 1s;
+  transition: transform 0.3s;
 }
 
 .map-change {

src/components/map/MapHolder.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="map2DViewer">
     <CaseAuditPopup v-show="auditPopupShow" ref="auditPopup" />
+    <BasemapChange />
   </div>
 </template>
 <script>

src/store/index.js

@@ -6,7 +6,7 @@ Vue.use(Vuex);
 const menus = true;
 export default new Vuex.Store({
   state: {
-    baseMapType:1,  //当前的底图类型 0 - 影像图; 1 - 蓝黑图， 2-街道图
+    baseMapType: 1, //当前的底图类型 0 - 影像图; 1 - 蓝黑图， 2-街道图
     // 头部菜单选中菜单对象（主要用于元素判断是否显示）
     navSelect: window.localStorage.getItem("navSelect")
       ? JSON.parse(window.localStorage.getItem("navSelect"))
@@ -27,12 +27,17 @@ export default new Vuex.Store({
     // 自定义模型状态改变 -- 修改或创建
     modelStatus: "create",
     // 法律法规弹窗
-    lawPopupShow:false
+    lawPopupShow: false,
+    // 底图切换距离右侧的位置
+    baseMapRight: 22,
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
   },
   mutations: {
+    baseMapRight(state, position) {
+      state.baseMapRight = position;
+    },
     // 用户点击头部菜单，更新暂存对象
     changeNavSelect(state, navSelect) {
       state.navSelect = navSelect;