地图添加小班边界样地号，添加树种分布色块

src/components/amap.vue

@@ -26,7 +26,8 @@ import {
   financeBasePlant,
   financeBaseDetail,
   farmInfo,
-  smallClassDetail
+  smallClassDetail,
+  treePlant
 } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 import { Message } from 'element-ui';
@@ -73,7 +74,8 @@ export default {
       districtData: {},
       streetData: {},
       smallMarkers: [],
-      eventMarkers: []
+      eventMarkers: [],
+      treePlant: []
     };
   },
 
@@ -163,17 +165,22 @@ export default {
     //   deep: true,
     //   immediate: true,
     //   handler: function (val, oldVal) {
-    //     this.smallClassMapArr = val;
-    //     if (this.smallClassMapArr) {
-    //       if (this.$store.state.addr.mapLevel === 'district') {
-    //         if (this.leftPage === 'forest') {
-    //           this.addForestPolygon(this.smallClassMapArr);
-    //         } else if (this.leftPage === 'treeSpecies') {
-    //           this.addTreeSpeciesPolygon(this.smallClassMapArr);
-    //         } else if (this.leftPage === 'event') {
-    //           this.getEven(this.smallClassMapArr);
-    //         } else if (this.leftPage === 'economics') {
-    //           this.getEconomics(this.smallClassMapArr);
+    //     console.log();
+    //     if (this.$store.state.addr.mapLevel == 'province') {
+
+    //     } else {
+    //       this.smallClassMapArr = val;
+    //       if (this.smallClassMapArr) {
+    //         if (this.$store.state.addr.mapLevel === 'district') {
+    //           if (this.leftPage === 'forest') {
+    //             this.addForestPolygon(this.smallClassMapArr);
+    //           } else if (this.leftPage === 'treeSpecies') {
+    //             this.addTreeSpeciesPolygon(this.smallClassMapArr);
+    //           } else if (this.leftPage === 'event') {
+    //             this.getEven(this.smallClassMapArr);
+    //           } else if (this.leftPage === 'economics') {
+    //             this.getEconomics(this.smallClassMapArr);
+    //           }
     //         }
     //       }
     //     }
@@ -317,7 +324,9 @@ export default {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList']),
     ...mapState(['selectCity', 'selectDistrict', 'selectStreet'])
   },
-  created() {},
+  created() {
+    this.getTreePlant();
+  },
   methods: {
     ...mapMutations([
       'changeSelectCity',
@@ -695,8 +704,9 @@ export default {
       let params = {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        // townId: this.$store.state.addr.selectStreet.areaId
       };
+      console.log(params);
       smallClassMap(params).then((res) => {
         if (res.code == 200) {
           this.smallClassMapArr = res.rows;
@@ -711,13 +721,18 @@ export default {
       });
     },
     mapPolygon() {
+      console.log(this.$store.state.addr.mapLevel);
       if (this.smallClassMapArr) {
         if (this.leftPage === 'forest') {
           this.addForestPolygon(this.smallClassMapArr);
-          this.getForestSample(this.leftPage);
+          if (this.$store.state.addr.mapLevel == 'district') {
+            this.getForestSample(this.leftPage);
+          }
         } else if (this.leftPage === 'treeSpecies') {
           this.addTreeSpeciesPolygon();
-          this.getRightScrollData(this.leftPage);
+          if (this.$store.state.addr.mapLevel == 'district') {
+            this.getRightScrollData(this.leftPage);
+          }
         } else if (this.leftPage === 'economics') {
           this.getEconomics(this.smallClassMapArr);
         } else if (this.leftPage === 'event') {
@@ -731,7 +746,7 @@ export default {
         smallClassMapArr.forEach((item) => {
           let polyData = JSON.parse(item.mapInfo);
           for (let elementLs in polyData.features) {
-           let smallClassPolygon = new AMap.Polygon({
+            let smallClassPolygon = new AMap.Polygon({
               map: that.map,
               path: polyData.features[elementLs].geometry.coordinates,
               strokeOpacity: 1,
@@ -742,9 +757,23 @@ export default {
               cursor: 'pointer'
             });
             var lanLatArr = [];
+            lanLatArr = [item.longitude, item.latitude];
+            if (this.$store.state.addr.mapLevel == 'district') {
+              let smallClassN = new AMap.Text({
+                map: this.map,
+                position: lanLatArr,
+                text: item.smallNumber,
+                anchor: 'bottom-center',
+                offset: new AMap.Pixel(0, 8),
+                style: {
+                  'background-color': 'transparent',
+                  border: 'none',
+                  color: '#05dfff',
+                  fontSize: '12px'
+                }
+              });
+            }
             smallClassPolygon.on('click', (e) => {
-              console.log(e.lnglat.lng, e.lnglat.lat);
-              lanLatArr = [item.longitude, item.latitude];
               let smallLabel =
                 "<div class='info-small'>" +
                 "<h5 class='marker-title'>" +
@@ -876,7 +905,7 @@ export default {
               position: lngLat,
               icon: sampleIcon,
               anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
+              offset: new AMap.Pixel(0, -18)
             });
             lastMarker.setLabel({
               zIndex: 120,
@@ -903,35 +932,46 @@ export default {
     },
     addTreeSpeciesPolygon() {
       let that = this;
-      console.log(that.smallClassMapArr);
       that.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
         for (let elementLs in polyData.features) {
           console.log(item.superTree);
-          if (item.eventType == 1) {
-            item.eventContLabel = '火灾';
-            baseIcon = fireIcon;
-          } else if (item.eventType == 2) {
-            item.eventContLabel = '砍伐';
-            baseIcon = cutTreeIcon;
-          } else if (item.eventType == 3) {
-            item.eventContLabel = '病虫害';
-            baseIcon = insectpestIcon;
-          }
+          let polygonColor = '';
+          this.treePlant.forEach((tree) => {
+            if (tree.plantName == item.superTree && item.superTree == '硬阔') {
+              polygonColor = '#00da85';
+            } else if (
+              tree.plantName == item.superTree &&
+              item.superTree == '软阔'
+            ) {
+              polygonColor = '#009bfd';
+            } else if (
+              tree.plantName == item.superTree &&
+              item.superTree == '杉木'
+            ) {
+              polygonColor = '#eca62d';
+            } else if (
+              tree.plantName == item.superTree &&
+              item.superTree == '马尾松'
+            ) {
+              polygonColor = '#b82dec';
+            }
+          });
+
           let polygon = new AMap.Polygon({
             map: that.map,
             path: polyData.features[elementLs].geometry.coordinates,
             strokeOpacity: 1,
-            fillOpacity: 0,
+            fillOpacity: 0.6,
             strokeColor: 'red',
             strokeWeight: 2,
             zIndex: 999,
-            cursor: 'pointer'
+            cursor: 'pointer',
+            fillColor: polygonColor
           });
-          
+
           var lanLatArr = [];
           polygon.on('click', (e) => {
-            
             lanLatArr = [item.longitude, item.latitude];
             let treeSmallLabel =
               "<div class='info-small'>" +
@@ -1277,7 +1317,6 @@ export default {
     },
     putPolygon(selectStreet) {
       let that = this;
-      console.log(selectStreet);
       this.putPolygonData.forEach((element) => {
         this.boundaryPolygon = new AMap.Polygon({
           map: that.map,
@@ -1312,7 +1351,7 @@ export default {
             label: label,
             areaId: areaId
           });
-          this.changeSelectAddr('street');
+          // this.changeSelectAddr('street');
           // this.$store.dispatch('searchArea', {
           //   parentId: valCode,
           //   name: label,
@@ -1362,6 +1401,12 @@ export default {
           }
         });
       });
+    },
+    getTreePlant() {
+      treePlant().then((res) => {
+        this.treePlant = res.rows;
+        console.log(this.treePlant);
+      });
     }
   }
 };

src/service/index.js

@@ -37,6 +37,13 @@ export const smallClassDetail = data =>
     prefixUrl: "api2"
   });
 
+  // 查询树种列表
+export const treePlant = data =>
+callApi({
+  url: "smallClass/treePlant",
+  data,
+  prefixUrl: "api2"
+});
 // 查询省市县
 export const searchApi = data =>
   callApi({

src/store/addr/index.js

@@ -129,7 +129,7 @@ const addr = {
         commit("changeSelectAddr", params.mapLevel);
       });
     },
-    // 获取小班边界
+    // // 获取小班边界
     // getSmallClassMap({ commit }, params = {}) {
     //   smallClassMap(params).then(res => {
     //     commit("getSmallClassMapArr", res.rows);