新增林下经济接口，调整林下经济显示

src/components/amap.vue

@@ -21,7 +21,8 @@ import {
   smallClassMap,
   rightScrollData,
   forestSample,
-  alarmDataApi
+  alarmDataApi,
+  financeBasePlant
 } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
@@ -53,7 +54,8 @@ export default {
       smallClassPolygon: null,
       forestMarker: null,
       rightScrollMarker: null,
-      markerData: {}
+      markerData: {},
+      cityMarkerArr: []
     };
   },
 
@@ -76,26 +78,12 @@ export default {
             this.$store.state.addr.parentName,
             this.$store.state.addr.mapLevel
           );
-          // this.map.clearMap();
-          // this.map.remove(this.polygon);
         }
       }
     },
     '$store.state.addr.page': {
       handler(val) {
-        console.log(val);
         this.leftPage = val;
-        // if (this.$store.state.addr.mapLevel === 'district') {
-        //   if (this.leftPage === 'forest') {
-        //     this.getForestSample(val);
-        //   } else if (this.leftPage === 'treeSpecies') {
-        //     this.getRightScrollData(val);
-        //   } else if (this.leftPage === 'event') {
-        //     this.getEven();
-        //   } else if (this.leftPage === 'economics') {
-        //     this.getEconomics();
-        //   }
-        // }
         if (!this.smallClassMapArr) {
           this.$store.dispatch('getSmallClassMap', {
             cityId: this.$store.state.addr.selectCity.areaId,
@@ -247,12 +235,13 @@ export default {
             });
             that.polygon.setPath(pathArray);
             that.map.add(that.polygon);
+            // that.map.setFitView(that.polygons);
             var cityArr = result.districtList[0].districtList;
             for (let i = 0; i < cityArr.length; i++) {
               that.cityMarker = new AMap.Text({
                 //c城市指示标
                 text: cityArr[i].name,
-                zIndex: 120,
+                zIndex: 1,
                 anchor: 'center', // 设置文本标记锚点
                 cursor: 'pointer',
                 style: {
@@ -264,6 +253,7 @@ export default {
                 },
                 position: [cityArr[i].center.lng, cityArr[i].center.lat]
               });
+              // that.cityMarkerArr.push(that.cityMarker)
               that.map.add(that.cityMarker);
             }
           } else {
@@ -277,6 +267,7 @@ export default {
       //创建一个实例
       that.districtExplorer = window.districtExplorer = new DistrictExplorer({
         eventSupport: true, //打开事件支持
+        bubble: true,
         map: that.map
       });
       //当前聚焦的区域
@@ -384,12 +375,12 @@ export default {
     //绘制某个区域的边界
     renderAreaPolygons(areaNode) {
       //更新地图视野
-      if (!this.aReContry) {
-        this.map.setBounds(areaNode.getBounds(), null, null, true);
-      } else {
-        this.map.setZoom(4);
-        this.map.setCenter(new AMap.LngLat(103.714129, 38.150339));
-      }
+      // if (!this.aReContry) {
+      this.map.setBounds(areaNode.getBounds(), null, null, true);
+      // } else {
+      //   this.map.setZoom(4);
+      //   this.map.setCenter(new AMap.LngLat(103.714129, 38.150339));
+      // }
       //清除已有的绘制内容
       this.districtExplorer.clearFeaturePolygons();
       //绘制子区域
@@ -403,6 +394,7 @@ export default {
           fillOpacity: 0 //填充透明度
         };
       });
+
       //绘制父区域
       this.districtExplorer.renderParentFeature(areaNode, {
         cursor: 'default',
@@ -455,6 +447,7 @@ export default {
         }
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
+
         this.refreshAreaNode(areaNode);
         if (callback) {
           callback(null, areaNode);
@@ -563,6 +556,7 @@ export default {
     },
     // 添加地图标注（样地、树种）
     setMarkers(res, sampleMarker, iconMeta, page) {
+      let _this = this;
       if (this.forestMarker) {
         this.forestMarker.setMap(null);
         this.forestMarker = null;
@@ -590,6 +584,46 @@ export default {
               offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
               content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
             });
+            let clickLabel =
+              "<div class='info-small'>" +
+              "<h5 class='marker-title'>" +
+              item.smallNumber +
+              '-' +
+              item.sampleNumber +
+              '</h5>' +
+              "<div class='marker-content'>" +
+              '<p>样地号：' +
+              item.sampleNumber +
+              '</p>' +
+              '<p>所属小班：' +
+              item.smallNumber +
+              '</p>' +
+              '<p>样地蓄积：' +
+              item.landStock +
+              '</p>' +
+              '<p>样地株数：' +
+              item.landNumber +
+              '</p>' +
+              '</div>' +
+              '</div>';
+            let lastMarker = new AMap.Marker({
+              position: lngLat,
+              icon: sampleIcon,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
+            });
+            lastMarker.setLabel({
+              zIndex: 120,
+              direction: 'top',
+              offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
+              content: clickLabel //设置文本标注内容
+            });
+            this.forestMarker.on('click', function (e) {
+              _this.map.add(lastMarker);
+            });
+            this.forestMarker.on('mouseout', function (e) {
+              _this.map.remove(lastMarker);
+            });
           } else if (page === 'treeSpecies') {
             this.forestMarker.setLabel({
               direction: 'top',
@@ -600,7 +634,17 @@ export default {
           this.map.add(this.forestMarker);
         }
       });
+      // console.log(page);
+      // if (page === 'forest') {
+      //   this.map.on('click', function (e) {
+      //     _this.map.remove(_this.forestMarker);
+      //   });
+      // }
     },
+    // markerClick(e, item) {
+    //   console.log(e);
+    //   console.log(item);
+    // },
     addTreeSpeciesPolygon() {
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
@@ -811,98 +855,67 @@ export default {
         });
         this.map.add(polygon);
       });
-      let economicsList = [
-        {
-          longitude: '108.568423',
-          latitude: '26.2042',
-          eventType: 1,
-          titleName: '投入点1',
-          eventContLabel: '蜜蜂',
-          measure: '15',
-          num: '109',
-          cityName: '1号养蜂基地'
-        }
-      ];
-      economicsList.forEach((item) => {
-        let lanLatArr = [item.longitude, item.latitude];
-        let beeIcon = require('@/assets/img/bee.png');
-        let cutTreeIcon = require('@/assets/img/cutTree.png');
-        let insectpestIcon = require('@/assets/img/insectpest.png');
-        let iconMeta = [82, 46];
-        let sampleIcon = new AMap.Icon({
-          size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
-          image: beeIcon,
-          imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+      
+      financeBasePlant({
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      }).then((res) => {
+        console.log(res);
+        let economicsList = [];
+        res.rows.forEach((element) => {
+          economicsList.push({
+            longitude: element.cateLongitude,
+            latitude: element.cateLatitude,
+            icon: element.image
+          });
+        });
+         economicsList.forEach((item) => {
+          let lanLatArr = [item.longitude, item.latitude];
+          let beeIcon = item.icon;
+          let iconMeta = [82, 46];
+          let sampleIcon = new AMap.Icon({
+            size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
+            image: beeIcon,
+            imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+          });
+          this.smallMarker = new AMap.Marker({
+            position: lanLatArr,
+            icon: sampleIcon,
+            anchor: 'bottom-center',
+            offset: new AMap.Pixel(0, 0)
+          });
+          this.smallMarker.setMap(this.map);
         });
-        let treeSmallLabel =
-          "<div class='info-small'>" +
-          "<h5 class='marker-title'>" +
-          item.titleName +
-          '</h5>' +
-          "<div class='marker-content'>" +
-          '<p>种植/养殖/加工作物：' +
-          item.eventContLabel +
-          '</p>' +
-          '<p>占地面积：' +
-          item.measure +
-          '亩' +
-          '</p>' +
-          '<p>当前数量：' +
-          item.num +
-          '箱' +
-          '</p>' +
-          '<p>位置：' +
-          item.cityName +
-          '</p>' +
-          '</div>' +
-          '</div>';
-
-        switch (item.eventType) {
-          case 1:
-            this.smallMarker = new AMap.Marker({
-              position: lanLatArr,
-              icon: sampleIcon,
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
-            });
-            this.smallMarker.setLabel({
-              direction: 'top',
-              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
-              content: treeSmallLabel //设置文本标注内容
-            });
-            break;
-          case 2:
-            this.smallMarker = new AMap.Marker({
-              position: lanLatArr,
-              icon: cutTreeIcon,
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
-            });
-            this.smallMarker.setLabel({
-              direction: 'top',
-              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
-              content: treeSmallLabel //设置文本标注内容
-            });
-            break;
-          case 3:
-            this.smallMarker = new AMap.Marker({
-              position: lanLatArr,
-              icon: insectpestIcon,
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
-            });
-            this.smallMarker.setLabel({
-              direction: 'top',
-              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
-              content: treeSmallLabel //设置文本标注内容
-            });
-
-            break;
-          default:
-            break;
-        }
-        this.smallMarker.setMap(this.map);
       });
+        
+      // let treeSmallLabel =
+      //   "<div class='info-small'>" +
+      //   "<h5 class='marker-title'>" +
+      //   item.titleName +
+      //   '</h5>' +
+      //   "<div class='marker-content'>" +
+      //   '<p>种植/养殖/加工作物：' +
+      //   item.eventContLabel +
+      //   '</p>' +
+      //   '<p>占地面积：' +
+      //   item.measure +
+      //   '亩' +
+      //   '</p>' +
+      //   '<p>当前数量：' +
+      //   item.num +
+      //   '箱' +
+      //   '</p>' +
+      //   '<p>位置：' +
+      //   item.cityName +
+      //   '</p>' +
+      //   '</div>' +
+      //   '</div>';
+      // this.smallMarker.setLabel({
+      //   direction: 'top',
+      //   offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+      //   content: treeSmallLabel //设置文本标注内容
+      // });
     },
     setMarker() {
       let forestFarm = [