From 2364c314288f26a4d29b7d22e9baa1e45f43aaeb Mon Sep 17 00:00:00 2001
From: 584911253@qq.com <584911253@qq.com>
Date: 星期日, 26 二月 2023 17:44:45 +0800
Subject: [PATCH] 综合展示样式修改

---
 src/components/mapol.vue |   89 +++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index a23bc3d..093ac52 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -1,16 +1,32 @@
 <template>
   <div id="mapol">
-    <div
-      @click="changeMenulayer"
-      class="center CenDiv"
-      :class="{ center1: centerFlag }"
-    >
+    <div style="display: flex">
       <div
-        id="cenBg"
-        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
-      ></div>
+          @click="changeMenulayer"
+          class="center CenDiv"
+          :class="{ center1: centerFlag }"
+      >
+        <div
+            id="cenBg"
+            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+        ></div>
 
+      </div>
+      <div @click="changeMapType" class="changeMapType">
+        <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
+      </div>
     </div>
+<!--    <div-->
+<!--      @click="changeMenulayer"-->
+<!--      class="center CenDiv"-->
+<!--      :class="{ center1: centerFlag }"-->
+<!--    >-->
+<!--      <div-->
+<!--        id="cenBg"-->
+<!--        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
+<!--      ></div>-->
+
+<!--    </div>-->
     <div v-show="$store.state.isNaviget"  class="sindagis-map-compass">
       <span
         class="left"
@@ -57,11 +73,15 @@
       isActive: true,
       isMenuLayer: false,
       rotate: 0,
-      currentDir: ''
+      currentDir: '',
+      show2DMap:false,
     }
   },
   mounted() {
-    this.init2DMap()
+    this.init2DMap();
+    this.$bus.$on('changemapType', (e) => {
+      this.show2DMap = e;
+    });
   },
   methods: {
     init2DMap() {
@@ -85,7 +105,7 @@
         }),
         controls: defaultControls().extend([
           new FullScreen(),
-          
+
         ]),
         interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
       })
@@ -99,6 +119,21 @@
         // $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px");
       });
 
+    },
+
+    //浜岀淮/涓夌淮鍦板浘鍒囨崲
+    changeMapType(){
+      // debugger
+      this.show2DMap = !this.show2DMap;
+      //浜岀淮
+      if (this.show2DMap){
+        this.$bus.$emit("changemap", 2);
+      }
+      //涓夌淮
+      else {
+        this.$bus.$emit("changemap", 3);
+      }
+      this.$bus.$emit("changemapType", this.show2DMap);
     },
 
     changeMenulayer() {
@@ -281,4 +316,36 @@
   background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
 }
 
+.changeMapType{
+  position: absolute;
+  bottom: 1%;
+  left: calc(1% + 75px);
+  height: 40px;
+  width: 60px;
+  z-index: 101;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 3px 3px 6px #666;
+  border-radius: 5px;
+  background: #fff;
+  cursor: pointer;
+}
+.mapTypeTwo{
+  width: 100%;
+  height: 100%;
+  margin-left: 10px;
+  background-image: url("../assets/img/3dmap.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.mapTypeThree{
+  width: 100%;
+  height: 100%;
+  margin-left: 10px;
+  background-image: url("../assets/img/2dmap.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
 </style>

--
Gitblit v1.9.3