乡镇本地json数据添加，将乡镇边界描画入地图图层。

src/components/amap.vue

@@ -17,12 +17,14 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
+import axios from 'axios';
 import {
   smallClassMap,
   rightScrollData,
   forestSample,
   alarmDataApi,
-  financeBasePlant
+  financeBasePlant,
+  financeBaseDetail
 } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
@@ -55,7 +57,9 @@ export default {
       forestMarker: null,
       rightScrollMarker: null,
       markerData: {},
-      cityMarkerArr: []
+      cityMarkerArr: [],
+      putPolygonData: [],
+      townPolygons: []
     };
   },
 
@@ -84,13 +88,6 @@ export default {
     '$store.state.addr.page': {
       handler(val) {
         this.leftPage = val;
-        if (!this.smallClassMapArr) {
-          this.$store.dispatch('getSmallClassMap', {
-            cityId: this.$store.state.addr.selectCity.areaId,
-            countyId: this.$store.state.addr.selectDistrict.areaId,
-            townId: this.$store.state.addr.selectStreet.areaId
-          });
-        }
         if (this.parentId) {
           this.switch2AreaNode(
             this.parentId,
@@ -108,6 +105,7 @@ export default {
     '$store.state.addr.smallClassMapArr': {
       handler(val) {
         if (val.code == 200) {
+          this.smallClassMapArr = [];
           this.smallClassMapArr = val.rows;
           // smallClassPolygon
           // this.map.setLayers(this.smallClassPolygon);
@@ -129,7 +127,9 @@ export default {
   computed: {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
   },
-  created() {},
+  created() {
+    this.getrjx();
+  },
   methods: {
     ...mapMutations([
       'changeSelectCity',
@@ -235,7 +235,6 @@ 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({
@@ -337,11 +336,11 @@ export default {
           });
         }
 
-        this.$store.dispatch('getSmallClassMap', {
-          cityId: this.$store.state.addr.selectCity.areaId,
-          countyId: this.$store.state.addr.selectDistrict.areaId,
-          townId: this.$store.state.addr.selectStreet.areaId
-        });
+        // this.$store.dispatch('getSmallClassMap', {
+        //   cityId: this.$store.state.addr.selectCity.areaId,
+        //   countyId: this.$store.state.addr.selectDistrict.areaId,
+        //   townId: this.$store.state.addr.selectStreet.areaId
+        // });
       });
       that.getDistrict(adName, mapLevel);
       this.switch2AreaNode(adcode);
@@ -433,16 +432,19 @@ export default {
           this.setMarker();
         }
         if (mapLevel === 'district') {
-          if (page === 'forest') {
-            this.addForestPolygon();
-            this.getForestSample(page);
-          } else if (page === 'treeSpecies') {
-            this.addTreeSpeciesPolygon();
-            this.getRightScrollData(page);
-          } else if (page === 'event') {
-            this.getEven();
-          } else if (page === 'economics') {
-            this.getEconomics();
+          // if (page === 'forest') {
+          //   this.addForestPolygon();
+          //   this.getForestSample(page);
+          // } else if (page === 'treeSpecies') {
+          //   this.addTreeSpeciesPolygon();
+          //   this.getRightScrollData(page);
+          // } else if (page === 'event') {
+          //   this.getEven();
+          // } else if (page === 'economics') {
+          //   this.getEconomics();
+          // }
+          if (adcode == '522632') {
+            this.putPolygon();
           }
         }
         //设置当前使用的定位用节点
@@ -544,6 +546,7 @@ export default {
     },
     // 获取样地数据
     getForestSample(page) {
+      console.log('样地数据');
       forestSample({
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
@@ -830,6 +833,7 @@ export default {
     getEconomics() {
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
+        // console.log(polyData);
         let polygon = new AMap.Polygon({
           map: this.map,
           path: polyData.features[0].geometry.coordinates,
@@ -855,7 +859,7 @@ export default {
         });
         this.map.add(polygon);
       });
-      
+
       financeBasePlant({
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
@@ -863,17 +867,25 @@ export default {
       }).then((res) => {
         console.log(res);
         let economicsList = [];
+        let baseList = [];
         res.rows.forEach((element) => {
           economicsList.push({
             longitude: element.cateLongitude,
             latitude: element.cateLatitude,
             icon: element.image
           });
+          console.log(element.baseId);
+          baseList.push({
+            baseId: element.baseId,
+            baseName: element.baseName,
+            longitude: element.baseLongitude,
+            latitude: element.baseLatitude
+          });
         });
-         economicsList.forEach((item) => {
+        economicsList.forEach((item) => {
           let lanLatArr = [item.longitude, item.latitude];
           let beeIcon = item.icon;
-          let iconMeta = [82, 46];
+          let iconMeta = [82, 26];
           let sampleIcon = new AMap.Icon({
             size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
             image: beeIcon,
@@ -887,35 +899,71 @@ export default {
           });
           this.smallMarker.setMap(this.map);
         });
+        baseList.forEach((element) => {
+          let lanLatArr = [element.longitude, element.latitude];
+          let baseIcon = require('@/assets/img/postion.png');
+          let iconMeta = [20, 29];
+          let sampleIcon = new AMap.Icon({
+            size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
+            image: baseIcon,
+            imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
+          });
+          let baseMarker = new AMap.Marker({
+            position: lanLatArr,
+            icon: sampleIcon,
+            anchor: 'bottom-center',
+            offset: new AMap.Pixel(0, 0)
+          });
+          baseMarker.setLabel({
+            direction: 'right',
+            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+            content: `<div>${element.baseName}</div>` //设置文本标注内容
+          });
+          baseMarker.on('click', function (e) {
+            financeBaseDetail({ baseId: element.baseId }).then((res) => {
+              if (res.code == 200) {
+                let treeSmallLabel =
+                  "<div class='info-small'>" +
+                  "<h5 class='marker-title'>" +
+                  res.data.baseName +
+                  '</h5>' +
+                  "<div class='marker-content'>" +
+                  '<p>基地名称：' +
+                  res.data.baseName +
+                  '</p>' +
+                  '<p>种植/养殖/加工作物：' +
+                  res.data.cropName +
+                  '</p>' +
+                  '<p>占地面积：' +
+                  res.data.baseArea +
+                  '亩' +
+                  '</p>' +
+                  '<p>位置：' +
+                  res.data.cityName +
+                  res.data.countyName +
+                  res.data.townName +
+                  '</p>' +
+                  '</div>' +
+                  '</div>';
+                baseMarker.setLabel({
+                  direction: 'top',
+                  offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+                  content: treeSmallLabel //设置文本标注内容
+                });
+                console.log(res.data);
+              }
+            });
+          });
+          baseMarker.on('mouseout', function (e) {
+            baseMarker.setLabel({
+              direction: 'right',
+              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+              content: `<div>${element.baseName}</div>` //设置文本标注内容
+            });
+          });
+          this.map.add(baseMarker);
+        });
       });
-        
-      // 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 = [
@@ -951,6 +999,89 @@ export default {
         });
         marker.setMap(this.map);
       });
+    },
+    getrjx() {
+      axios
+        .get('http://127.0.0.1:8080/static/rongjangintown.json')
+        .then((res) => {
+          this.putPolygonData = res.data.features;
+        });
+    },
+    putPolygon() {
+      let that = this;
+      this.putPolygonData.forEach((element) => {
+        let polygon = new AMap.Polygon({
+          map: that.map,
+          path: element.geometry.coordinates,
+          strokeOpacity: 1,
+          fillOpacity: 0,
+          strokeColor: 'blue',
+          strokeWeight: 1,
+          zIndex: 999,
+          cursor: 'pointer'
+        });
+        that.townPolygons.push(polygon);
+        that.map.add(that.townPolygons);
+
+        polygon.on('click', (e) => {
+          this.smallClassMapArr = [];
+          console.log(e);
+          that.map.remove(that.townPolygons);
+          that.map.remove(that.polygon);
+          that.districtExplorer.clearFeaturePolygons();
+          console.log();
+          let valCode = element.properties.XIANG;
+          let areaId = '';
+          let label = element.properties.XIANG_NAME;
+          this.vuexStreetList.forEach((item) => {
+            if (valCode == item.areaCode) {
+              areaId = item.areaId;
+            }
+          });
+          this.changeSelectStreet({
+            value: valCode,
+            label: label,
+            areaId: areaId
+          });
+          var outer = [
+            new AMap.LngLat(-360, 90, true),
+            new AMap.LngLat(-360, -90, true),
+            new AMap.LngLat(360, -90, true),
+            new AMap.LngLat(360, 90, true)
+          ];
+          var holes = element.geometry.coordinates;
+          var pathArray = [outer];
+          pathArray.push.apply(pathArray, holes);
+          let townPolygon = new AMap.Polygon({
+            pathL: pathArray,
+            strokeColor: '#00eeff',
+            strokeWeight: 1,
+            fillColor: '#0c1b05', // 遮罩背景色
+            fillOpacity: 0.8
+          });
+          townPolygon.setPath(pathArray);
+          that.map.add(townPolygon);
+          that.zoom = 12;
+          that.lngLat = [e.lnglat.lng, e.lnglat.lat];
+          console.log(this.leftPage);
+          if (this.leftPage === 'forest') {
+            this.addForestPolygon();
+            this.getForestSample(this.leftPage);
+          } else if (this.leftPage === 'treeSpecies') {
+            this.addTreeSpeciesPolygon();
+            this.getRightScrollData(this.leftPage);
+          } else if (this.leftPage === 'event') {
+            this.getEven();
+          } else if (this.leftPage === 'economics') {
+            this.getEconomics();
+          }
+          this.$store.dispatch('getSmallClassMap', {
+            cityId: this.$store.state.addr.selectCity.areaId,
+            countyId: this.$store.state.addr.selectDistrict.areaId,
+            townId: this.$store.state.addr.selectStreet.areaId
+          });
+        });
+      });
     }
   }
 };

src/components/pickerAddr.vue

@@ -1,5 +1,5 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class="pickerAddr u-flex">
@@ -36,9 +36,9 @@
         ></el-option>
       </el-select>
     </div>
-    <div class="select-wrap" @change="cityChange($event,'street')">
+    <div class="select-wrap" >
       乡：
-      <el-select v-model="selectStreet" placeholder="请选择" >
+      <el-select v-model="selectStreet" placeholder="请选择" @change="cityChange($event,'street')">
         <el-option
           v-for="item in vuexStreetList"
           :key="item.areaCode"
@@ -102,7 +102,7 @@ export default {
       'changeSelectStreet'
     ]),
     cityChange(val, level) {
-      console.log('level',level);
+      console.log(val);
       if (level == 'city') {
         this.changeSelectCity({ value: val.value, label: val.label,areaId:val.areaId });
       } else if (level == 'district') {
@@ -110,7 +110,6 @@ export default {
       } else if (level == 'street') {
         this.changeSelectStreet({ value: val.value, label: val.label,areaId:val.areaId });
       }
-      console.log(val);
       this.parentId = val.value.substring(0, 6);
       this.name = level;
       this.$store.dispatch('searchArea', {