卫星地图跟全景地图的切换

gassafety-web/src/utils/gaodeMap.js

@@ -125,6 +125,21 @@ class gaodeMap {
   panTo(lnglat) {
     this.myMap.panTo(lnglat);
   }
+
+  changeMap(bool) {
+    // 卫星图
+
+    if (!bool) {
+      if (this.satellite) return;
+      this.satellite = new AMap.TileLayer.Satellite();
+      this.myMap.addLayer(this.satellite);
+    } else {
+      if (this.satellite) {
+        this.myMap.removeLayer(this.satellite);
+        this.satellite = null;
+      }
+    }
+  }
   /**
    * 获取map
    * @returns {AMap.Map}

gassafety-web/src/views/device/map/index.vue

@@ -103,6 +103,11 @@
       :class="{ back: backFlag, opacity: drawerOpacity }"
       @click.stop="drawerdrawer"
     >
+      <div class="mapChange">
+        <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
+        <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
+      </div>
+
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
         <img v-else src="@/assets/images/r.png" alt="" />
@@ -240,6 +245,8 @@ export default {
       targetNum: 0,
 
       backFlag: true,
+      // 卫星与全景地图的切换
+      mapStyle: true,
       // 抽屉内的滚动条的高需要赋值赋值
       boxHeight: "",
       boxWidth: "",
@@ -371,6 +378,15 @@ export default {
         this.gaoMap.markerShow(4, false);
       }
     },
+    // 卫星地图与全景地图的切换
+    mapChange(num) {
+      if (num == 1) {
+        this.mapStyle = false;
+      } else {
+        this.mapStyle = true;
+      }
+      this.gaoMap.changeMap(this.mapStyle);
+    },
     addDevice() {
       if (this.iconClass == "icon-create") {
         this.targetNum = this.targetNum != 1 ? 1 : 0;
@@ -1127,6 +1143,24 @@ input[type="radio"] {
   &.back {
     left: -248px;
   }
+  .mapChange {
+    right: -178px;
+    top: 10px;
+    color: #fff;
+    position: absolute;
+    display: flex;
+    div {
+      padding: 4px 8px;
+      border: 1px solid #fff;
+      margin-left: 8px;
+      cursor: pointer;
+      &.active,
+      &:hover {
+        background-color: #053b6a;
+        color: #31eaea;
+      }
+    }
+  }
   .scroll {
     // height: 100%;
     position: relative;
@@ -1382,7 +1416,7 @@ input[type="radio"] {
     }
   }
   // 开关
-   .switch {
+  .switch {
     position: absolute;
     font-size: 30px;
     right: -30px;