地图整体样式蒙版

src/components/amap.vue

@@ -1,12 +1,22 @@
 <template>
-  <div>
+  <div class="map-wrap">
     <div id="container" tabindex="0"></div>
+    <div id="mask"></div>
+    <div class="yun-wrap">
+      <img class="yun yun1" src="../assets/img/云1.png" alt />
+    </div>
+    <div class="yun-wrap">
+      <img class="yun yun2" src="../assets/img/云2.png" alt />
+    </div>
+    <div class="yun-wrap">
+      <img class="yun yun3" src="../assets/img/云3.png" alt />
+    </div>
   </div>
 </template>
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { smallClassMap, forestSample } from '@/service/index.js';
+import { smallClassMap,rightScrollData, forestSample } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
   name: 'amap',
@@ -45,7 +55,7 @@ export default {
           this.map.clearMap();
         }
       }
-    },
+    }
     // '$store.state.addr.page':{
     //   handler(val) {
     //     console.log(val);
@@ -254,7 +264,6 @@ export default {
       });
       this.switch2AreaNode(adcode);
       that.getDistrict(adName, mapLevel);
-      
     },
     //根据Hover状态设置相关样式
     toggleHoverFeature(feature, isHover, position) {
@@ -338,9 +347,12 @@ export default {
         if (mapLevel == 'city' || mapLevel == undefined) {
           this.setMarker();
         }
+        console.log(this.$store.state.addr.page);
         if (mapLevel === 'district') {
           if (this.$store.state.addr.page === 'forest') {
-             this.addPolygon();
+            this.addForestPolygon();
+          } else if (this.$store.state.addr.page === 'treeSpecies') {
+            this.addTreeSpeciesPolygon();
           }
         }
         //设置当前使用的定位用节点
@@ -373,9 +385,10 @@ export default {
         this.smallClassMapArr = res.rows;
       });
     },
-    addPolygon() {
+    addForestPolygon() {
       let that = this;
       this.smallClassMapArr.forEach((item) => {
+        
         let polyData = JSON.parse(item.mapInfo);
         let polygon = new AMap.Polygon({
           map: this.map,
@@ -391,7 +404,6 @@ export default {
 
         polygon.on('mouseover', (e) => {
           lanLatArr = [e.lnglat.lng, e.lnglat.lat];
-          console.log(lanLatArr);
           let smallLabel =
             "<div class='info-small'>" +
             "<h5 class='marker-title'>" +
@@ -469,6 +481,74 @@ export default {
         });
       });
     },
+    addTreeSpeciesPolygon() {
+      this.smallClassMapArr.forEach((item) => {
+        let polyData = JSON.parse(item.mapInfo);
+        let polygon = new AMap.Polygon({
+          map: this.map,
+          path: polyData.features[0].geometry.coordinates,
+          strokeOpacity: 1,
+          fillOpacity: 0,
+          strokeColor: 'red',
+          strokeWeight: 2,
+          zIndex: 999,
+          cursor: 'pointer'
+        });
+        var lanLatArr = [];
+        polygon.on('mouseover', (e) => {
+          lanLatArr = [e.lnglat.lng, e.lnglat.lat];
+          let smallLabel =
+            "<div class='info-small'>" +
+            "<h5 class='marker-title'>" +
+            item.countyName +
+            '-' +
+            item.smallNumber +
+            '</h5>' +
+            "<div class='marker-content'>" +
+            '<p>小班号：' +
+            item.smallNumber +
+            '</p>' +
+            '<p>样地数：' +
+            item.sampleCount +
+            '</p>' +
+            '<p>村（林班）：' +
+            polyData.features[0].properties.CUN +
+            '</p>' +
+            '<p>乡镇（林场）：' +
+            item.townName +
+            '</p>' +
+            '</div>' +
+            '</div>';
+          this.smallMarker = new AMap.Marker({
+            position: lanLatArr,
+            icon: require('@/assets/img/small-marker.png'),
+            anchor: 'bottom-center',
+            offset: new AMap.Pixel(0, 0)
+          });
+          this.smallMarker.setLabel({
+            direction: 'right',
+            offset: new AMap.Pixel(-150, -90), //设置文本标注偏移量
+            content: smallLabel //设置文本标注内容
+          });
+          this.smallMarker.setMap(this.map);
+          polygon.setOptions({
+            fillOpacity: 0.7,
+            fillColor: 'yellow'
+          });
+        });
+        polygon.on('mouseout', () => {
+          if (this.smallMarker) {
+            this.smallMarker.setMap(null);
+            this.smallMarker = null;
+          }
+          polygon.setOptions({
+            fillOpacity: 0,
+            fillColor: '#ccebc5'
+          });
+        });
+        this.map.add(polygon);
+      });
+    },
     setMarker() {
       let forestFarm = [
         {
@@ -586,4 +666,66 @@ export default {
   border: 0;
   background-color: transparent;
 }
+
+#mask {
+  width: 100%;
+  height: 100vh;
+  box-shadow: inset 0px 0px 10vw 8vw rgba(38, 80, 179, 0.54);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+@keyframes imageAnimation_32630606 {
+  0% {
+    // opacity: 0;
+    transform: none;
+  }
+  34% {
+    // opacity: 1;
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
+      translate3d(34vw, 0px, 0px);
+  }
+  67% {
+    // opacity: 1;
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
+      translate3d(67vw, 0px, 0px);
+  }
+  100% {
+    // opacity: 0;
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
+      translate3d(160vw, 0px, 0px);
+  }
+}
+
+.yun-wrap {
+  position: fixed;
+  left: 0;
+  top: 350px;
+  width: 100vw;
+  pointer-events: none;
+}
+.yun {
+  position: fixed;
+  left: -500px;
+  animation-name: imageAnimation_32630606;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-duration: 110s;
+  animation-delay: 0s;
+  -webkit-user-drag: none;
+  filter: none;
+  pointer-events: none;
+}
+.yun2 {
+  bottom: 20px;
+  animation-duration: 90s;
+  animation-delay: 10s;
+}
+.yun3 {
+  top: 100px;
+  animation-duration: 120s;
+  animation-delay: 15s;
+}
 </style>