优化gis地图样式

gassafety-web/src/utils/gaodeMap.js

@@ -447,7 +447,7 @@ class gaodeMap {
       case DEVICE_TYPE.REGEULATORBOX: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/tiaoyaxiang.png")
+          image: require("../assets/oldImages/tiaoyaxiang.png")
         });
         marker.setIcon(icon);
         break;
@@ -455,7 +455,7 @@ class gaodeMap {
       case DEVICE_TYPE.VALUEWELL: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/famenjing.png")
+          image: require("../assets/oldImages/famenjing.png")
         });
         marker.setIcon(icon);
         break;
@@ -463,7 +463,7 @@ class gaodeMap {
       case DEVICE_TYPE.FLOWMETER: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/liuliangji.png")
+          image: require("../assets/oldImages/liuliangji.png")
         });
         marker.setIcon(icon);
         break;
@@ -487,7 +487,7 @@ class gaodeMap {
       case DEVICE_TYPE.PRESSUREGAGE: {
         let icon = new AMap.Icon({
           //size: new AMap.Size(51, 23),
-          image: require("../assets/images/yalibiao.png")
+          image: require("../assets/oldImages/yalibiao.png")
         });
         marker.setIcon(icon);
         break;

gassafety-web/src/utils/gaodeMapView.js

@@ -71,7 +71,7 @@ class gaodeMap {
       pitch: 8,
       zoom: 9,
       //mapStyle: 'amap://styles/darkblue',
-      mapStyle: 'amap://styles/1c84d2203793b0f622df2cda53db1afd',
+      mapStyle: "amap://styles/1c84d2203793b0f622df2cda53db1afd"
     });
     this.myMap = map;
     this.myMap.on("mousedown", e => {
@@ -135,6 +135,20 @@ class gaodeMap {
     });
     this.districtBoundaries();
   }
+  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;
+      }
+    }
+  }
   // 地图移动结束
 
   /**
@@ -1020,14 +1034,14 @@ class gaodeMap {
       dom = e.target.dom;
       disX = e.originEvent.clientX - dom.offsetLeft;
       disY = e.originEvent.clientY - dom.offsetTop;
-      console.log(disX,disY);
+      console.log(disX, disY);
       window.addEventListener("mousemove", windowMove);
     });
     const windowMove = e => {
       const mouseX = e.clientX;
-      const mouseY = e.clientY
-      const domTop = mouseY -disY;
-      const domLeft = mouseX- disX;
+      const mouseY = e.clientY;
+      const domTop = mouseY - disY;
+      const domLeft = mouseX - disX;
       // console.log(domTop,domLeft)
       dom.style.top = domTop + "px";
       dom.style.left = domLeft + "px";

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -96,6 +96,10 @@
       :class="{ back: backFlag, opacity: drawerOpacity }"
       @click.stop="drawerClick"
     >
+      <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="" />
@@ -261,7 +265,7 @@
                 </template>
                 <!-- 无数据 -->
                 <template v-else>
-                  <div style="padding-left: 5px">暂无数据</div>
+                  <div style="padding-left: 5px;color:#fff;">暂无数据</div>
                 </template>
               </div>
             </el-collapse-transition>
@@ -399,6 +403,7 @@ export default {
       drawerOpacity: false,
       //抽屉是否收回
       backFlag: true,
+      mapStyle: true,
     };
   },
   created() {
@@ -425,7 +430,7 @@ export default {
   },
   methods: {
     onResize() {
-      this.boxHeight = document.body.clientHeight - 81;
+      this.boxHeight = document.body.clientHeight - 80;
       this.boxWidth = document.body.clientWidth;
       console.log("挂在");
     },
@@ -444,6 +449,15 @@ export default {
       this.rightBottomData();
       // this.backFlag = false;
     },
+    // 更改卫星图
+    mapChange(num) {
+      if (num == 1) {
+        this.mapStyle = false;
+      } else {
+        this.mapStyle = true;
+      }
+      this.gaoMap.changeMap(this.mapStyle);
+    },
 
     // 获取地图上的资源
     getResource() {
@@ -1613,16 +1627,34 @@ input[type="radio"] {
   transition: 0.2s linear;
   // background: #fff;
   // background: #061d3380;
-  background: rgba(6,29,51,0.8);
+  background: rgba(6, 29, 51, 0.8);
   // background: red;
   opacity: 0;
   // 优化抽屉出来回去
-  &.opacity { 
+  &.opacity {
     opacity: 1;
   }
   &.back {
     left: -348px;
   }
+  .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;