地图动画加载，切换镇

src/components/amap.vue

@@ -64,7 +64,11 @@ export default {
       putPolygonData: [],
       townPolygons: [],
       treeCompMarkers: [],
-      forestFarmData: []
+      forestFarmData: [],
+      districtList: [],
+      selectData: {},
+      districtData: {},
+      streetData: {}
     };
   },
 
@@ -75,9 +79,9 @@ export default {
   watch: {
     '$store.state.addr.parentId': {
       handler(val) {
-        if (this.$store.state.addr.smallClassSearch) {
-          
-        }
+        this.selectData = this.$store.state.addr.selectCity;
+        this.districtData = this.$store.state.addr.selectDistrict;
+        this.streetData = this.$store.state.addr.selectStreet;
         if (this.map) {
           this.parentId = val;
           this.switch2AreaNode(
@@ -96,13 +100,13 @@ export default {
     '$store.state.addr.page': {
       handler(val) {
         this.leftPage = val;
-        console.log(this.parentId);
+        console.losmallClassMapArr(this.parentId);
         if (this.parentId) {
           // this.getrjx()
           this.switch2AreaNode(
             this.parentId,
             this.$store.state.addr.mapLevel,
-            this.$store.state.addr.selectCity,
+            this.$store.state.addr.selectStreet,
             this.leftPage
           );
           this.getDistrict(
@@ -112,79 +116,31 @@ export default {
         }
       }
     },
-    '$store.state.addr.smallClassMapArr'(val) {
-      console.log(val);
-      if (this.map) {
-        if (val.code == 200) {
-          // this.smallClassMapArr = [];
-          this.smallClassMapArr = val.rows;
-          console.log(val.rows);
-          // smallClassPolygon
-          // this.map.setLayers(this.smallClassPolygon);
+    '$store.state.addr.smallClassMapArr': {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        console.log(val);
+        this.smallClassMapArr = val.rows;
+        if (this.smallClassMapArr) {
           if (this.$store.state.addr.mapLevel === 'district') {
             if (this.leftPage === 'forest') {
-              this.addForestPolygon();
+              this.addForestPolygon(this.smallClassMapArr);
             } else if (this.leftPage === 'treeSpecies') {
-              this.addTreeSpeciesPolygon();
+              this.addTreeSpeciesPolygon(this.smallClassMapArr);
             } else if (this.leftPage === 'event') {
-              this.getEven();
+              this.getEven(this.smallClassMapArr);
             } else if (this.leftPage === 'economics') {
-              this.getEconomics();
+              this.getEconomics(this.smallClassMapArr);
             }
           }
         }
       }
-    },
-    // '$store.state.addr.smallClassSearch': {
-    //   handler(val) {
-    //     console.log(val);
-    //     this.areaData = val;
-    //     let valCode = '';
-    //     let level = '';
-    //     if (val.cityId && val.cityName) {
-    //       this.vuexCityList.forEach((item) => {
-    //         if (val.cityId == item.areaId) {
-    //           valCode = item.areaCode;
-    //         }
-    //       });
-    //       this.vuexDistrictList.forEach((item) => {
-    //         if (val.countyId == item.areaId) {
-    //           valCode = item.areaCode;
-    //         }
-    //       });
-    //       this.vuexStreetList.forEach((item) => {
-    //         if (val.townId == item.areaId) {
-    //           valCode = item.areaCode;
-    //         }
-    //       });
-    //       this.selectCity = {
-    //         areaId: val.cityId,
-    //         label: val.cityName,
-    //         value: valCode
-    //       };
-    //       this.selectDistrict = {
-    //         areaId: val.countyId,
-    //         label: val.countyName,
-    //         value: valCode
-    //       };
-    //       this.selectStreet = {
-    //         areaId: val.townId,
-    //         label: val.townName,
-    //         value: valCode
-    //       };
-    //       level = 'city';
-    //       // this.cityChange(this.selectCity, level);
-    //       this.$store.dispatch('searchArea', {
-    //         parentId: valCode,
-    //         name: val.cityName,
-    //         mapLevel: level
-    //       });
-    //     }
-    //   }
-    // }
+    }
   },
   computed: {
-    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
+    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList']),
+    ...mapState(['selectCity', 'selectDistrict', 'selectStreet'])
   },
   created() {},
   methods: {
@@ -221,6 +177,7 @@ export default {
           // ],
           features: ['road', 'bg', 'building'] //地图要素
         });
+
         AMapUI.load(
           ['ui/geo/DistrictExplorer', 'lib/$'],
           function (DistrictExplorer) {
@@ -294,6 +251,7 @@ export default {
             that.polygon.setPath(pathArray);
             // that.map.add(that.polygon);
             var cityArr = result.districtList[0].districtList;
+            that.districtList = cityArr;
             for (let i = 0; i < cityArr.length; i++) {
               that.cityMarker = new AMap.Text({
                 //c城市指示标
@@ -393,6 +351,22 @@ export default {
           }
         }
       });
+      console.log(this.$store.state.addr.selectCity);
+      this.map.on('mousewheel', (e) => {
+        console.log(e.lnglat.lng, e.lnglat.lat);
+        var zoom = this.map.getZoom(); //获取当前地图级别
+        console.log(zoom);
+        if (zoom > '11.8' && zoom < '12.1') {
+          console.log('开始检测');
+          console.log(this.districtData);
+          let districtCode = this.districtData.value.substring(0, 6);
+          this.$store.dispatch('searchArea', {
+            parentId: districtCode,
+            name: this.districtData.label,
+            mapLevel: 'district'
+          });
+        }
+      });
       that.getDistrict(adName, mapLevel);
       this.switch2AreaNode(adcode);
     },
@@ -425,7 +399,7 @@ export default {
     //绘制某个区域的边界
     renderAreaPolygons(areaNode) {
       //更新地图视野
-      this.map.setBounds(areaNode.getBounds(), null, null, true);
+      this.map.setBounds(areaNode.getBounds(), null, null, false);
       //清除已有的绘制内容
       this.districtExplorer.clearFeaturePolygons();
       //绘制子区域
@@ -456,7 +430,7 @@ export default {
       this.renderAreaPolygons(areaNode);
     },
     //切换区域
-    switch2AreaNode(adcode, mapLevel, selectCity, page, callback) {
+    switch2AreaNode(adcode, mapLevel, selectStreet, page, callback) {
       // if (
       //   this.currentAreaNode &&'' + this.currentAreaNode.getAdcode() === '' + adcode
       // ) {
@@ -478,7 +452,7 @@ export default {
           this.setMarker();
         }
         if (mapLevel === 'district') {
-          this.getrjx(adcode);
+          this.getrjx(adcode, selectStreet);
           if (page === 'event') {
             this.getEven();
           }
@@ -511,76 +485,78 @@ export default {
     //   let that = this;
     //     this.smallClassMapArr = this.$store.state.addr.smallClassMapArr;
     // },
-    addForestPolygon() {
+    addForestPolygon(smallClassMapArr) {
       let that = this;
-      this.smallClassMapArr.forEach((item) => {
-        let polyData = JSON.parse(item.mapInfo);
-        that.smallClassPolygon = 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 = [];
-        that.smallClassPolygon.on('click', (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)
+      if (smallClassMapArr) {
+        smallClassMapArr.forEach((item) => {
+          let polyData = JSON.parse(item.mapInfo);
+          that.smallClassPolygon = new AMap.Polygon({
+            map: this.map,
+            path: polyData.features[0].geometry.coordinates,
+            strokeOpacity: 1,
+            fillOpacity: 0,
+            strokeColor: 'red',
+            strokeWeight: 2,
+            zIndex: 999,
+            cursor: 'pointer'
           });
-          this.smallMarker.setLabel({
-            direction: 'right',
-            offset: new AMap.Pixel(-150, -90), //设置文本标注偏移量
-            content: smallLabel //设置文本标注内容
+          var lanLatArr = [];
+          that.smallClassPolygon.on('click', (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);
           });
-          this.smallMarker.setMap(this.map);
-        });
-        that.smallClassPolygon.on('mouseover', () => {
-          that.smallClassPolygon.setOptions({
-            fillOpacity: 0.7,
-            fillColor: 'yellow'
+          that.smallClassPolygon.on('mouseover', () => {
+            that.smallClassPolygon.setOptions({
+              fillOpacity: 0.7,
+              fillColor: 'yellow'
+            });
           });
-        });
-        that.smallClassPolygon.on('mouseout', () => {
-          if (this.smallMarker) {
-            this.smallMarker.setMap(null);
-            this.smallMarker = null;
-          }
-          that.smallClassPolygon.setOptions({
-            fillOpacity: 0,
-            fillColor: '#ccebc5'
+          that.smallClassPolygon.on('mouseout', () => {
+            if (this.smallMarker) {
+              this.smallMarker.setMap(null);
+              this.smallMarker = null;
+            }
+            that.smallClassPolygon.setOptions({
+              fillOpacity: 0,
+              fillColor: '#ccebc5'
+            });
           });
+          this.map.add(that.smallClassPolygon);
         });
-        this.map.add(that.smallClassPolygon);
-      });
+      }
     },
     // 获取样地数据
     getForestSample(page) {
@@ -995,8 +971,20 @@ export default {
         this.forestFarmData = res.rows;
         let parentMarker = require('@/assets/img/pre-marker.png');
         this.forestFarmData.forEach((item) => {
+          let selectCity = this.$store.state.addr.selectCity.label;
+          switch (this.$store.state.addr.selectCity.label) {
+            case '黔西南州':
+              selectCity = '黔西南布依族苗族自治州';
+              break;
+            case '黔东南州':
+              selectCity = '黔东南苗族侗族自治州';
+              break;
+            case '黔南州':
+              selectCity = '黔南布依族苗族自治州';
+              break;
+          }
           if (this.$store.state.addr.selectCity.label) {
-            if (this.$store.state.addr.selectCity.label == item.cityName) {
+            if (selectCity == item.cityName) {
               let lngLat = [item.longitude, item.latitude];
               var marker = new AMap.Marker({
                 position: lngLat,
@@ -1029,22 +1017,22 @@ export default {
         });
       });
     },
-    getrjx(adcode) {
+    getrjx(adcode, selectStreet) {
       if (adcode == '522632') {
         axios.get('/static/rongjangintown.json').then((res) => {
           let putPolygonData = [];
           putPolygonData = res.data.features;
-          this.putPolygon(putPolygonData);
+          this.putPolygon(putPolygonData, selectStreet);
         });
       } else if (adcode == '520181') {
         axios.get('/static/qingzhenzhen.json').then((res) => {
           let qingzhenputPolygonData = [];
           qingzhenputPolygonData = res.data.features;
-          this.putPolygon(qingzhenputPolygonData);
+          this.putPolygon(qingzhenputPolygonData, selectStreet);
         });
       }
     },
-    putPolygon(putPolygonData) {
+    putPolygon(putPolygonData, selectStreet) {
       let that = this;
       putPolygonData.forEach((element) => {
         this.boundaryPolygon = new AMap.Polygon({
@@ -1080,6 +1068,7 @@ export default {
             label: label,
             areaId: areaId
           });
+          console.log(this.streetData);
           var outer = [
             new AMap.LngLat(-360, 90, true),
             new AMap.LngLat(-360, -90, true),
@@ -1100,8 +1089,13 @@ export default {
           townPolygon.setPath(holes);
           // that.map.add(townPolygon);
           that.map.setZoomAndCenter(13, centerLanLatArr, false, 12);
-
+          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.map.setBounds(townPolygon.getBounds(), null, null, true);
+          console.log(this.leftPage);
           if (this.leftPage === 'forest') {
             this.addForestPolygon();
             this.getForestSample(this.leftPage);
@@ -1111,11 +1105,6 @@ export default {
           } 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/amapnow.vue

@@ -67,16 +67,16 @@ export default {
       handler(val) {
         if (this.map) {
           this.parentId = val;
-          this.switch2AreaNode(
-            val,
-            this.$store.state.addr.mapLevel,
-            this.$store.state.addr.selectCity,
-            this.leftPage
-          );
-          // this.getDistrict(
-          //   this.$store.state.addr.parentName,
-          //   this.$store.state.addr.mapLevel
+          // this.switch2AreaNode(
+          //   val,
+          //   this.$store.state.addr.mapLevel,
+          //   this.$store.state.addr.selectCity,
+          //   this.leftPage
           // );
+          this.getDistrict(
+            this.$store.state.addr.parentName,
+            this.$store.state.addr.mapLevel
+          );
         }
       }
     },
@@ -162,7 +162,7 @@ export default {
           //   new AMap.TileLayer.Satellite(),
           //   new AMap.TileLayer.RoadNet()
           // ],
-          features: ['road', 'bg', 'building'] //地图要素
+          features: ['road', 'bg'] //地图要素
         });
         AMapUI.load(
           ['ui/geo/DistrictExplorer', 'lib/$'],
@@ -185,9 +185,8 @@ export default {
           }
         });
         wms.setMap(_this.map);
-
         // this.$nextTick(() => {
-        //   // this.getDistrict()
+        //   this.getDistrict(_this.adcode,_this.mapLevel)
         // });
       });
     },
@@ -204,7 +203,7 @@ export default {
           break;
       }
       let that = this;
-      this.map.clearMap();
+      // this.map.clearMap();
       AMap.plugin(['AMap.DistrictSearch'], function () {
         var district = new AMap.DistrictSearch({
           // 返回行政区边界坐标等具体信息
@@ -295,15 +294,43 @@ export default {
       var adName = that.adcode; //贵州省
       var mapLevel = that.mapLevel;
       var adcode = '520000';
+      this.map.on('mousewheel', (e) => {
+        console.log(e.lnglat.lng, e.lnglat.lat);
+        var zoom = this.map.getZoom(); //获取当前地图级别
+        // console.log(this.map.getCity());
+        console.log(zoom);
+        if (zoom > '8' && zoom < '8.1') {
+          console.log('开始检测');
+          AMap.plugin('AMap.Geocoder', function () {
+            let geocoder = new AMap.Geocoder({
+              radius: 1000,
+              extensions: 'base'
+            });
+            geocoder.getAddress(
+              [e.lnglat.lng, e.lnglat.lat],
+              function (status, result) {
+                if (status === 'complete' && result.info === 'OK') {
+                  if (result && result.regeocode) {
+                    console.log(result);
+                    
+                    // that.switch2AreaNode(result.regeocode.addressComponent.adcode);
+                  }
+                }
+              }
+            );
+          });
+        }
+      });
+
       //feature被点击
       this.districtExplorer.on('featureClick', (e, feature) => {
         // that.map.clearMap();
+        console.log(feature);
         const props = feature.properties;
         mapLevel = props.level;
         adName = props.name;
-
         // that.getDistrict(adName, mapLevel);
-        this.switch2AreaNode(props.adcode);
+        // this.switch2AreaNode(props.adcode);
 
         // this.$store.dispatch('searchArea', {
         //   parentId: props.adcode,
@@ -342,7 +369,7 @@ export default {
         //   townId: this.$store.state.addr.selectStreet.areaId
         // });
       });
-      // that.getDistrict(adName, mapLevel);
+      that.getDistrict(adName, mapLevel);
       this.switch2AreaNode(adcode);
     },
     //根据Hover状态设置相关样式
@@ -374,7 +401,7 @@ export default {
     //绘制某个区域的边界
     renderAreaPolygons(areaNode) {
       //更新地图视野
-      this.map.setBounds(areaNode.getBounds(), null, null, true);
+      this.map.setBounds(areaNode.getBounds(), null, null, false);
       //清除已有的绘制内容
       this.districtExplorer.clearFeaturePolygons();
       //绘制子区域
@@ -389,7 +416,7 @@ export default {
         };
       });
       //绘制父区域
-      this.districtExplorer.renderParentFeature(areaNode,{
+      this.districtExplorer.renderParentFeature(areaNode, {
         cursor: 'default',
         bubble: true,
         strokeColor: '#00eeff', //线颜色
@@ -406,6 +433,7 @@ export default {
     },
     //切换区域
     switch2AreaNode(adcode, mapLevel, selectCity, page, callback) {
+      console.log(adcode);
       if (
         this.currentAreaNode &&
         '' + this.currentAreaNode.getAdcode() === '' + adcode

src/components/pickerAddr.vue

@@ -82,30 +82,30 @@ export default {
     },
     '$store.state.addr.selectStreet'(val) {
       this.selectStreet = val;
-    },
-    '$store.state.addr.smallClassSearch': {
-      handler(val) {
-        console.log(val);
-        this.areaData = val;
-        this.getCityChange();
-        this.getDistrictChange();
-        // this.vuexStreetList.forEach((item) => {
-        //   if (val.townId == item.areaId) {
-        //     valCode = item.areaCode;
-        //   }
-        // });
-
-        // this.selectStreet = {
-        //   areaId: val.townId,
-        //   label: val.townName,
-        //   value: valCode
-        // };
-        // if (val.countyId && val.countyName) {
-        //   console.log(this.selectDistrict);
-        //   this.setcity();
-        // }
-      }
     }
+    // '$store.state.addr.smallClassSearch': {
+    //   handler(val) {
+    //     console.log(val);
+    //     this.areaData = val;
+    //     this.getCityChange();
+    //     this.getDistrictChange();
+    //     // this.vuexStreetList.forEach((item) => {
+    //     //   if (val.townId == item.areaId) {
+    //     //     valCode = item.areaCode;
+    //     //   }
+    //     // });
+
+    //     // this.selectStreet = {
+    //     //   areaId: val.townId,
+    //     //   label: val.townName,
+    //     //   value: valCode
+    //     // };
+    //     // if (val.countyId && val.countyName) {
+    //     //   console.log(this.selectDistrict);
+    //     //   this.setcity();
+    //     // }
+    //   }
+    // }
   },
   computed: {
     // 引入getters中的计算属性，需要在 computed 中引入
@@ -114,7 +114,8 @@ export default {
   created() {
     this.$store.dispatch('searchArea', {
       parentId: this.parentId,
-      name: this.name
+      name: this.name,
+      mapLevel: 'province'
     });
   },
   mounted() {},
@@ -124,46 +125,46 @@ export default {
       'changeSelectDistrict',
       'changeSelectStreet'
     ]),
-    getCityChange() {
-      if (this.areaData.cityId && this.areaData.cityName) {
-        let valCode = '';
-        this.vuexCityList.forEach((item) => {
-          if (this.areaData.cityId == item.areaId) {
-            valCode = item.areaCode.substring(0, 6);
-          }
-        });
+    // getCityChange() {
+    //   if (this.areaData.cityId && this.areaData.cityName) {
+    //     let valCode = '';
+    //     this.vuexCityList.forEach((item) => {
+    //       if (this.areaData.cityId == item.areaId) {
+    //         valCode = item.areaCode.substring(0, 6);
+    //       }
+    //     });
 
-        this.selectCity = {
-          areaId: this.areaData.cityId,
-          label: this.areaData.cityName,
-          value: valCode
-        };
-        this.$store.dispatch('searchArea', {
-          parentId: valCode,
-          name: this.areaData.cityName,
-          mapLevel: 'city'
-        });
-      }
-    },
-    getDistrictChange() {
-      let valCode = '';
-      this.vuexDistrictList.forEach((item) => {
-        if (this.areaData.countyId == item.areaId) {
-          valCode = item.areaCode.substring(0, 6);
-        }
-      });
-      this.selectDistrict = {
-        areaId: this.areaData.countyId,
-        label: this.areaData.countyName,
-        value: valCode
-      };
-      
-      this.$store.dispatch('searchArea', {
-        parentId: valCode,
-        name: this.areaData.countyName,
-        mapLevel: 'district'
-      });
-    },
+    //     this.selectCity = {
+    //       areaId: this.areaData.cityId,
+    //       label: this.areaData.cityName,
+    //       value: valCode
+    //     };
+    //     this.$store.dispatch('searchArea', {
+    //       parentId: valCode,
+    //       name: this.areaData.cityName,
+    //       mapLevel: 'city'
+    //     });
+    //   }
+    // },
+    // getDistrictChange() {
+    //   let valCode = '';
+    //   this.vuexDistrictList.forEach((item) => {
+    //     if (this.areaData.countyId == item.areaId) {
+    //       valCode = item.areaCode.substring(0, 6);
+    //     }
+    //   });
+    //   this.selectDistrict = {
+    //     areaId: this.areaData.countyId,
+    //     label: this.areaData.countyName,
+    //     value: valCode
+    //   };
+
+    //   this.$store.dispatch('searchArea', {
+    //     parentId: valCode,
+    //     name: this.areaData.countyName,
+    //     mapLevel: 'district'
+    //   });
+    // },
     cityChange(val, level) {
       console.log(val);
       if (level == 'city') {
@@ -184,15 +185,17 @@ export default {
           label: val.label,
           areaId: val.areaId
         });
+        
+      }
+      if (level != 'street') {
+        this.parentId = val.value.substring(0, 6);
+        this.name = level;
+        this.$store.dispatch('searchArea', {
+          parentId: this.parentId,
+          name: val.label,
+          mapLevel: level
+        });
       }
-      console.log(val.value.substring(0, 6));
-      this.parentId = val.value.substring(0, 6);
-      this.name = level;
-      this.$store.dispatch('searchArea', {
-        parentId: this.parentId,
-        name: val.label,
-        mapLevel: level
-      });
     },
     provinceClick() {
       // console.log('provinceClick','provinceClick');

src/store/addr/index.js

@@ -1,13 +1,13 @@
 /*
  * @LastEditors: gcz
  */
-import { searchApi,smallClassMap } from "@/service/index.js";
+import { searchApi, smallClassMap } from "@/service/index.js";
 const addr = {
   state: {
     page: "forest",
     parentId: "520000",
-    parentName: '',
-    mapLevel: 'province',
+    parentName: "",
+    mapLevel: "province",
     vuexSelectCity: "",
     vuexSelectDistrict: "",
     vuexSelectStreet: "",
@@ -20,11 +20,11 @@ const addr = {
     selectCity: {},
     selectDistrict: {},
     selectStreet: {},
-    selectAddr: '贵州省',
+    selectAddr: "贵州省",
     // 获取小班边界地图
-    smallClassMapArr: [],
+    smallClassMapArr: {},
     // 根据小班号查询搜索小班
-    smallClassSearch: [],
+    smallClassSearch: []
   },
   mutations: {
     // 更改页面标识
@@ -56,25 +56,25 @@ const addr = {
       state.selectStreet = streetData;
     },
     changeSelectAddr(state, mapLevel) {
-      console.log('mapLevelmapLevel', mapLevel);
+      console.log("mapLevelmapLevel", mapLevel);
       switch (mapLevel) {
-        case 'province':
-          state.selectAddr = '贵州省';
+        case "province":
+          state.selectAddr = "贵州省";
           break;
-        case 'city':
+        case "city":
           state.selectAddr = `贵州省 · ${state.selectCity.label}`;
           break;
 
-        case 'district':
+        case "district":
           state.selectAddr = `贵州省 · ${state.selectCity.label} · ${state.selectDistrict.label}`;
           break;
 
-        case 'treet':
+        case "treet":
           state.selectAddr = `贵州省 · ${state.selectCity.label} · ${state.selectDistrict.label} · ${state.selectStreet.label}`;
           break;
 
         default:
-          state.selectAddr = '贵州省';
+          state.selectAddr = "贵州省";
           break;
       }
       // state.selectAddr = streetData;
@@ -84,30 +84,28 @@ const addr = {
     },
     // 改变省市县级联选择获取数据
     changeParentId(state, n) {
-        state.parentId = n.parentId;
-        state.parentName = n.name;
-        state.mapLevel = n.mapLevel;
+      state.parentId = n.parentId;
+      state.parentName = n.name;
+      state.mapLevel = n.mapLevel;
     },
     // 获取小班边界
-    getSmallClassMapArr(state,calssmap) {
-      state.smallClassMapArr = calssmap
+    getSmallClassMapArr(state, calssmap) {
+      state.smallClassMapArr = calssmap;
     }
   },
   actions: {
     // 获取省市县
     searchArea({ commit }, params = {}) {
-      console.log('searchArea', params)
+      console.log("searchArea", params);
       searchApi({ parentId: params.parentId }).then(res => {
         if (params.mapLevel == "city") {
           commit("changeDistrictList", res.data);
-
           commit("changeSelectDistrict", {});
           commit("changeSelectStreet", {});
-
         } else if (params.mapLevel == "district") {
           commit("changeStreetList", res.data);
           commit("changeSelectStreet", {});
-        } else {
+        } else if (params.mapLevel == "province") {
           commit("changeCityList", res.data);
           commit("changeSelectCity", {});
           commit("changeSelectDistrict", {});
@@ -119,8 +117,9 @@ const addr = {
     },
     // 获取小班边界
     getSmallClassMap({ commit }, params = {}) {
-      smallClassMap(params).then((res) => {
-        commit("getSmallClassMapArr",res)
+      smallClassMap(params).then(res => {
+        console.log(res);
+        commit("getSmallClassMapArr", res);
       });
     }
   }

src/views/index.vue

@@ -891,9 +891,9 @@ export default {
       console.log(e.row[0]);
       let param = {
         smallNumber: e.row[0],
-        cityId: this.$store.state.addr.selectCity.areaId,
-        countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        // cityId: this.$store.state.addr.selectCity.areaId,
+        // countyId: this.$store.state.addr.selectDistrict.areaId,
+        // townId: this.$store.state.addr.selectStreet.areaId
       };
       console.log(param);
       rightScrollData(param).then((res) => {