事件接口联调

src/components/amap.vue

@@ -1,6 +1,7 @@
 <template>
   <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 />
@@ -16,7 +17,12 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { smallClassMap,rightScrollData, forestSample } from '@/service/index.js';
+import {
+  smallClassMap,
+  rightScrollData,
+  forestSample,
+  alarmDataApi
+} from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
   name: 'amap',
@@ -35,7 +41,9 @@ export default {
       $tipMarkerContent: null,
       currentAreaNode: null,
       smallClassMapArr: [],
-      smallMarker: null
+      smallMarker: null,
+      treeCompData: {},
+      treeSmallLabel: null
     };
   },
 
@@ -47,11 +55,17 @@ export default {
     '$store.state.addr.parentId': {
       handler(val) {
         if (this.map) {
-          this.switch2AreaNode(val, this.$store.state.addr.mapLevel);
+          this.switch2AreaNode(
+            val,
+            this.$store.state.addr.mapLevel,
+            this.$store.state.addr.selectCity
+          );
           this.getDistrict(
             this.$store.state.addr.parentName,
             this.$store.state.addr.mapLevel
           );
+          console.log(this.$store.state.addr.parentName);
+          console.log(this.$store.state.addr.mapLevel);
           this.map.clearMap();
         }
       }
@@ -116,6 +130,8 @@ export default {
       });
     },
     getDistrict(adName, mapLevel) {
+      console.log(adName);
+      console.log(mapLevel);
       let that = this;
       AMap.plugin(['AMap.DistrictSearch'], function () {
         var district = new AMap.DistrictSearch({
@@ -285,6 +301,7 @@ export default {
         );
         polys.forEach((elemnt) => {
           elemnt.setOptions({
+            fillColor: '#0dbc79',
             fillOpacity: isHover ? 0.5 : 0
           });
         });
@@ -328,7 +345,7 @@ export default {
       this.renderAreaPolygons(areaNode);
     },
     //切换区域
-    switch2AreaNode(adcode, mapLevel, callback) {
+    switch2AreaNode(adcode, mapLevel, selectCity, callback) {
       if (
         this.currentAreaNode &&
         '' + this.currentAreaNode.getAdcode() === '' + adcode
@@ -344,6 +361,7 @@ export default {
         }
 
         this.currentAreaNode = areaNode;
+        console.log(selectCity);
         if (mapLevel == 'city' || mapLevel == undefined) {
           this.setMarker();
         }
@@ -353,6 +371,8 @@ export default {
             this.addForestPolygon();
           } else if (this.$store.state.addr.page === 'treeSpecies') {
             this.addTreeSpeciesPolygon();
+          }else if(this.$store.state.addr.page ==='event'){
+
           }
         }
         //设置当前使用的定位用节点
@@ -388,7 +408,6 @@ export default {
     addForestPolygon() {
       let that = this;
       this.smallClassMapArr.forEach((item) => {
-        
         let polyData = JSON.parse(item.mapInfo);
         let polygon = new AMap.Polygon({
           map: this.map,
@@ -497,25 +516,37 @@ export default {
         var lanLatArr = [];
         polygon.on('mouseover', (e) => {
           lanLatArr = [e.lnglat.lng, e.lnglat.lat];
-          let smallLabel =
+          rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
+            this.treeCompData = res.rows[0];
+          });
+          let treeCompData = this.treeCompData;
+          let treeSmallLabel =
             "<div class='info-small'>" +
-            "<h5 class='marker-title'>" +
-            item.countyName +
-            '-' +
-            item.smallNumber +
+            "<h5 class='marker-title'>小班" +
+            treeCompData.smallNumber +
             '</h5>' +
             "<div class='marker-content'>" +
-            '<p>小班号：' +
-            item.smallNumber +
+            '<p>树种组成：' +
+            treeCompData.treeComp +
             '</p>' +
-            '<p>样地数：' +
-            item.sampleCount +
+            '<p>树种结构：' +
+            treeCompData.treeStruct +
             '</p>' +
-            '<p>村（林班）：' +
-            polyData.features[0].properties.CUN +
+            '<p>优势树种：' +
+            treeCompData.superTree +
             '</p>' +
-            '<p>乡镇（林场）：' +
-            item.townName +
+            '<p>优势树种平均胸径：' +
+            treeCompData.superTreeDbh +
+            '厘米' +
+            '</p>' +
+            '<p>优势树种平均高：' +
+            treeCompData.superTreeHigh +
+            '米' +
+            '</p>' +
+            '<p>位置：' +
+            treeCompData.countyName +
+            treeCompData.townName +
+            treeCompData.villageName +
             '</p>' +
             '</div>' +
             '</div>';
@@ -526,9 +557,9 @@ export default {
             offset: new AMap.Pixel(0, 0)
           });
           this.smallMarker.setLabel({
-            direction: 'right',
-            offset: new AMap.Pixel(-150, -90), //设置文本标注偏移量
-            content: smallLabel //设置文本标注内容
+            direction: 'top',
+            offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+            content: treeSmallLabel //设置文本标注内容
           });
           this.smallMarker.setMap(this.map);
           polygon.setOptions({
@@ -548,6 +579,35 @@ export default {
         });
         this.map.add(polygon);
       });
+      rightScrollData().then((res) => {
+        let sampleMarker = require('@/assets/img/sanjiaod.png');
+        let iconMeta = [16, 10];
+        let sampleIcon = new AMap.Icon({
+          size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
+          image: sampleMarker,
+          imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+        });
+        res.rows.forEach((item) => {
+          let lngLat = [item.longitude, item.latitude];
+          if (item.longitude && item.latitude) {
+            var marker = new AMap.Marker({
+              position: lngLat,
+              icon: sampleIcon,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
+            });
+            marker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-2, 6), //设置文本标注偏移量
+              content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
+            });
+            marker.setMap(this.map);
+          }
+        });
+      });
+    },
+    getEven() {
+      
     },
     setMarker() {
       let forestFarm = [
@@ -645,8 +705,8 @@ export default {
   background-image: url('../assets/img/small-label.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  width: 16rem;
-  height: 10rem;
+  width: 18rem;
+  // height: 10rem;
   color: #fff;
   .marker-title {
     margin: 0 auto;
@@ -728,4 +788,32 @@ export default {
   animation-duration: 120s;
   animation-delay: 15s;
 }
+/deep/ .label-treecomp {
+  position: relative;
+  background-color: #05dfff;
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  text-align: center;
+  &::before {
+    position: absolute;
+    top: 26px;
+    left: 36%;
+    content: '';
+    width: 0px;
+    height: 0px;
+    border: 10px solid transparent;
+    border-top-color: #05dfff;
+  }
+  .smallH {
+    position: absolute;
+    top: 38px;
+    z-index: 99;
+    display: block;
+    color: #05dfff;
+    font-size: 14px;
+    left: 46%;
+  }
+}
 </style>