小班边界使用递归分页请求，事件处理bug修复

config/index.js

@@ -23,6 +23,7 @@ module.exports = {
       },
       '/api2': {
         target: "http://castgroupadmin.hw.hongweisoft.com/admin/screen",
+        // target: "http://172.16.90.131:5010/admin/screen",
         changeOrigin: true,
         pathRewrite: {
           "/api2": ""

src/components/amapnow.vue

@@ -22,6 +22,7 @@ import AMapLoader from '@amap/amap-jsapi-loader';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 import {
   smallClassMap,
+  smallClassMapFile,
   rightScrollData,
   forestSample,
   alarmDataApi,
@@ -53,6 +54,7 @@ export default {
       currentAreaNode: null,
       cityMarkerArr: [],
       eventMarker: null,
+      baseMarker: null,
       streetMarkerArr: [],
       leftPage: 'forest',
       putPolygonData: [],
@@ -82,6 +84,7 @@ export default {
       smallClassPolygonArr: [],
       // 林木结构小班边界
       treesPolygonArr: [],
+      treeCompMarkers: [],
       townPolygonArr: [],
       economicsArr: [],
       selectData: {},
@@ -143,17 +146,6 @@ export default {
         this.map.remove(this.polygon);
         let labelTown = val.label;
         this.map.setCity(labelTown);
-        if (this.leftPage === 'forest') {
-          this.addForestPolygon(this.smallClassMapArr);
-          this.getForestSample(this.leftPage);
-        } else if (this.leftPage === 'treeSpecies') {
-          this.addTreeSpeciesPolygon(this.smallClassMapArr);
-          this.getRightScrollData(this.leftPage);
-        } else if (this.leftPage === 'economics') {
-          this.getEconomics(this.smallClassMapArr);
-        } else if (this.leftPage === 'event') {
-          this.getEven();
-        }
       }
     },
     '$store.state.addr.page': {
@@ -164,7 +156,7 @@ export default {
           this.$store.state.addr.parentName = '贵州省';
         }
         if (this.parentId) {
-          // this.getSmallClass();
+          this.getSmallClass(val);
           this.mapPolygon();
         }
         if (val != 'forest') {
@@ -421,7 +413,7 @@ export default {
               content: treeSmallLabel //设置文本标注内容
             });
             this.baseMarkers.push(_this.baseMarker);
-          } else if (val.name == false && this.baseMarker) {
+          } else if (val.name == false && _this.baseMarker) {
             this.map.on('rightclick', function (e) {
               _this.map.remove(_this.baseMarkers);
             });
@@ -489,6 +481,14 @@ export default {
             _this.loadMapData(DistrictExplorer, $);
           }
         );
+        _this.map.on('rightclick', function (e) {
+          if (_this.smallMarkers.length > 0) {
+            _this.map.remove(_this.smallMarkers);
+          }
+          // if (_this.treeCompMarkers.length > 0) {
+          //   _this.map.remove(_this.treeCompMarkers);
+          // }
+        });
         let wms = new AMap.TileLayer.WMTS({
           url: 'http://t4.tianditu.gov.cn/img_w/wmts',
           blend: false,
@@ -963,39 +963,57 @@ export default {
         });
       });
     },
-    getSmallClass() {
-      this.smallClassMapArr = [];
+    async getSmallClass() {
+      let that = this;
+      that.smallClassMapArr = [];
       let params = {
-        cityId: this.$store.state.addr.selectCity.areaId,
-        countyId: this.$store.state.addr.selectDistrict.areaId
+        cityId: that.$store.state.addr.selectCity.areaId,
+        countyId: that.$store.state.addr.selectDistrict.areaId
         // townId: this.$store.state.addr.selectStreet.areaId
       };
-      if (this.smallClassPolygonArr.length > 0) {
-        this.map.remove(this.smallClassPolygonArr);
+      if (that.smallClassPolygonArr.length > 0) {
+        that.map.remove(that.smallClassPolygonArr);
       }
-      if (this.treesPolygonArr.length > 0) {
-        this.map.remove(this.treesPolygonArr);
+      if (that.treesPolygonArr.length > 0) {
+        that.map.remove(that.treesPolygonArr);
       }
-      if (this.economicsArr.length > 0) {
-        this.map.remove(this.economicsArr);
+      let pageData = {
+        pageNum: 0,
+        pageSize: 25
+      };
+      let mapLevel = that.$store.state.addr.mapLevel;
+      let res = await smallClassMap({ ...params, ...pageData });
+      if (res.code == 200) {
+        const total = res.total;
+        const totalPage = Math.ceil(total / pageData.pageSize);
+        const render = (page, mapLevel) => {
+          if (page >= totalPage) return;
+          requestAnimationFrame(() => {
+            render(page + 1, mapLevel);
+            pageData.pageNum = page;
+            smallClassMap({ ...params, ...pageData }).then((response) => {
+              if (response.code == 200) {
+                response.rows.forEach((item) => {
+                  if (item.smallId != null) {
+                  }
+                  // this.smallClassMapArr.push(item);
+                  if (that.leftPage === 'forest') {
+                    this.addForestPolygon(item);
+                  } else if (this.leftPage === 'treeSpecies') {
+                    this.addTreeSpeciesPolygon(item);
+                  }
+                });
+              }
+            });
+          });
+        };
+        render(pageData.pageNum, mapLevel);
       }
-      smallClassMap(params).then((res) => {
-        if (res.code == 200) {
-          this.smallClassMapArr = res.rows;
-          if (this.leftPage === 'forest') {
-            this.addForestPolygon(this.smallClassMapArr);
-          } else if (this.leftPage === 'treeSpecies') {
-            this.addTreeSpeciesPolygon();
-          } else if (this.leftPage === 'economics') {
-            this.getEconomics(this.smallClassMapArr);
-          }
-        }
-      });
     },
     mapPolygon() {
       if (this.smallClassMapArr) {
         if (this.leftPage === 'forest') {
-          this.addForestPolygon(this.smallClassMapArr);
+          // this.addForestPolygon(this.smallClassMapArr);
           if (
             this.$store.state.addr.mapLevel == 'district' ||
             this.$store.state.addr.mapLevel == 'street'
@@ -1003,7 +1021,7 @@ export default {
             this.getForestSample(this.leftPage);
           }
         } else if (this.leftPage === 'treeSpecies') {
-          this.addTreeSpeciesPolygon();
+          // this.addTreeSpeciesPolygon();
           if (
             this.$store.state.addr.mapLevel == 'district' ||
             this.$store.state.addr.mapLevel == 'street'
@@ -1011,184 +1029,176 @@ export default {
             this.getRightScrollData(this.leftPage);
           }
         } else if (this.leftPage === 'economics') {
-          this.getEconomics(this.smallClassMapArr);
+          this.getEconomics();
         } else if (this.leftPage === 'event') {
           this.getEven();
         }
       }
     },
-    addForestPolygon(smallClassMapArr) {
+    addForestPolygon(item) {
       let that = this;
-      if (smallClassMapArr) {
-        smallClassMapArr.forEach((item) => {
-          let polyData = JSON.parse(item.mapInfo);
-          for (let elementLs in polyData.features) {
-            let smallClassPolygon = new AMap.Polygon({
+      if (item) {
+        // smallClassMapArr.forEach((item) => {
+        let polyData = JSON.parse(item.mapInfo);
+        for (let elementLs in polyData.features) {
+          let smallClassPolygon = new AMap.Polygon({
+            map: that.map,
+            path: polyData.features[elementLs].geometry.coordinates,
+            strokeOpacity: 1,
+            fillOpacity: 0,
+            strokeColor: 'red',
+            strokeWeight: 2,
+            zIndex: 999,
+            cursor: 'pointer',
+            fillColor: ''
+          });
+          this.smallClassPolygonArr.push(smallClassPolygon);
+          smallClassPolygon.on('click', (e) => {
+            let imgList = [];
+            if (item.imageList.length > 0) {
+              item.imageList.forEach((element) => {
+                imgList.push(`<img id="markerLabel" src="${element.image}"/>`);
+              });
+            } else {
+              imgList.push('暂无图片');
+            }
+
+            this.imgClick();
+            let smallLabel =
+              "<div class='info-details'>" +
+              "<h5 class='marker-title'>" +
+              item.countyName +
+              '-' +
+              item.smallNumber +
+              '</h5>' +
+              "<div class='marker-content'>" +
+              '<div>' +
+              '<p>小班号：' +
+              item.smallNumber +
+              '</p>' +
+              '<p>样地数：' +
+              item.sampleCount +
+              '</p>' +
+              '<p>小班蓄积量：' +
+              item.smallClassStock +
+              '(立方米)' +
+              '</p>' +
+              '<p>小班占地面积：' +
+              item.landArea +
+              '(亩)' +
+              '</p>' +
+              '<p>小班树种组成：' +
+              item.treeComp +
+              '</p>' +
+              '<p>地类：' +
+              item.landType +
+              '</p>' +
+              '<p>林地权属：' +
+              item.landOwner +
+              '</p>' +
+              '<p>林木权属：' +
+              item.forestOwner +
+              '</p>' +
+              '<p>林种：' +
+              item.forestClass +
+              '</p>' +
+              '<p>树种结构：' +
+              item.treeStruct +
+              '</p>' +
+              '</div>' +
+              '<div>' +
+              '<p>起源：' +
+              item.origin +
+              '</p>' +
+              '<p>优势树种：' +
+              item.superTree +
+              '</p>' +
+              '<p>主要灌木名称：' +
+              item.shrubName +
+              '</p>' +
+              '<p>地貌：' +
+              item.landForm +
+              '</p>' +
+              '<p>海拔：' +
+              item.altitude +
+              '</p>' +
+              '<p>坡位：' +
+              item.slopePosit +
+              '</p>' +
+              '<p>坡向：' +
+              item.slopeDirect +
+              '</p>' +
+              '<p>坡形：' +
+              item.slopeForm +
+              '</p>' +
+              '<p>坡度：' +
+              item.slope +
+              '</p>' +
+              '<p>森林健康度：' +
+              item.forestHealth +
+              '</p>' +
+              '</div>' +
+              '</div>' +
+              '<div class="imgList">' +
+              "<span class='marker-span'>图片：</span>" +
+              '<div class="marker-imgs">' +
+              imgList +
+              '</div>' +
+              '</div>' +
+              '</div>';
+            that.smallMarker = new AMap.Marker({
               map: that.map,
-              path: polyData.features[elementLs].geometry.coordinates,
-              strokeOpacity: 1,
+              position: lanLatArr,
+              icon: require('@/assets/img/small-marker.png'),
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(-5, -6)
+            });
+            that.smallMarker.setLabel({
+              direction: 'right',
+              offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
+              content: smallLabel //设置文本标注内容
+            });
+            // that.smallMarker.setMap(that.map);
+            that.smallMarkers.push(that.smallMarker);
+            smallClassPolygon.setOptions({
+              fillOpacity: 0.7,
+              fillColor: 'yellow'
+            });
+          });
+
+          smallClassPolygon.on('mouseout', () => {
+            smallClassPolygon.setOptions({
               fillOpacity: 0,
-              strokeColor: 'red',
-              strokeWeight: 2,
-              zIndex: 999,
-              cursor: 'pointer',
-              fillColor: ''
+              fillColor: '#ccebc5'
             });
-            this.smallClassPolygonArr.push(smallClassPolygon);
-            if (item.longitude && item.latitude) {
-              var lanLatArr = [];
-              lanLatArr = [item.longitude, item.latitude];
-              if (
-                this.$store.state.addr.mapLevel == 'district' ||
-                this.$store.state.addr.mapLevel == 'street'
-              ) {
-                this.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'
-                  }
-                });
-                this.smallClassNArr.push(this.smallClassN);
+          });
+        }
+        if (item.longitude && item.latitude) {
+          var lanLatArr = [];
+          lanLatArr = [item.longitude, item.latitude];
+          if (
+            this.$store.state.addr.mapLevel == 'district' ||
+            this.$store.state.addr.mapLevel == 'street'
+          ) {
+            this.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) => {
-                let imgList = [];
-                if (item.imageList.length > 0) {
-                  item.imageList.forEach((element) => {
-                    imgList.push(
-                      `<img id="markerLabel" src="${element.image}"/>`
-                    );
-                  });
-                } else {
-                  imgList.push('暂无图片');
-                }
-
-                this.imgClick();
-                let smallLabel =
-                  "<div class='info-details'>" +
-                  "<h5 class='marker-title'>" +
-                  item.countyName +
-                  '-' +
-                  item.smallNumber +
-                  '</h5>' +
-                  "<div class='marker-content'>" +
-                  '<div>' +
-                  '<p>小班号：' +
-                  item.smallNumber +
-                  '</p>' +
-                  '<p>样地数：' +
-                  item.sampleCount +
-                  '</p>' +
-                  '<p>小班蓄积量：' +
-                  item.smallClassStock +
-                  '(立方米)' +
-                  '</p>' +
-                  '<p>小班占地面积：' +
-                  item.landArea +
-                  '(亩)' +
-                  '</p>' +
-                  '<p>小班树种组成：' +
-                  item.treeComp +
-                  '</p>' +
-                  '<p>地类：' +
-                  item.landType +
-                  '</p>' +
-                  '<p>林地权属：' +
-                  item.landOwner +
-                  '</p>' +
-                  '<p>林木权属：' +
-                  item.forestOwner +
-                  '</p>' +
-                  '<p>林种：' +
-                  item.forestClass +
-                  '</p>' +
-                  '<p>树种结构：' +
-                  item.treeStruct +
-                  '</p>' +
-                  '</div>' +
-                  '<div>' +
-                  '<p>起源：' +
-                  item.origin +
-                  '</p>' +
-                  '<p>优势树种：' +
-                  item.superTree +
-                  '</p>' +
-                  '<p>主要灌木名称：' +
-                  item.shrubName +
-                  '</p>' +
-                  '<p>地貌：' +
-                  item.landForm +
-                  '</p>' +
-                  '<p>海拔：' +
-                  item.altitude +
-                  '</p>' +
-                  '<p>坡位：' +
-                  item.slopePosit +
-                  '</p>' +
-                  '<p>坡向：' +
-                  item.slopeDirect +
-                  '</p>' +
-                  '<p>坡形：' +
-                  item.slopeForm +
-                  '</p>' +
-                  '<p>坡度：' +
-                  item.slope +
-                  '</p>' +
-                  '<p>森林健康度：' +
-                  item.forestHealth +
-                  '</p>' +
-                  '</div>' +
-                  '</div>' +
-                  '<div class="imgList">' +
-                  "<span class='marker-span'>图片：</span>" +
-                  '<div class="marker-imgs">' +
-                  imgList +
-                  '</div>' +
-                  '</div>' +
-                  '</div>';
-                that.smallMarker = new AMap.Marker({
-                  map: that.map,
-                  position: lanLatArr,
-                  icon: require('@/assets/img/small-marker.png'),
-                  anchor: 'bottom-center',
-                  offset: new AMap.Pixel(-5, -6)
-                });
-                that.smallMarker.setLabel({
-                  direction: 'right',
-                  offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
-                  content: smallLabel //设置文本标注内容
-                });
-                // that.smallMarker.setMap(that.map);
-                that.smallMarkers.push(that.smallMarker);
-                smallClassPolygon.setOptions({
-                  fillOpacity: 0.7,
-                  fillColor: 'yellow'
-                });
-              });
-
-              smallClassPolygon.on('mouseout', () => {
-                // if (that.smallMarker) {
-                //   that.smallMarker.setMap(null);
-                //   that.smallMarker = null;
-                // }
-                smallClassPolygon.setOptions({
-                  fillOpacity: 0,
-                  fillColor: '#ccebc5'
-                });
-              });
-            }
+            });
+            this.smallClassNArr.push(this.smallClassN);
           }
-          // this.map.add(that.smallClassPolygon);
-          this.map.on('rightclick', function (e) {
-            that.map.remove(that.smallMarkers);
-          });
-        });
+        }
+        // this.map.add(that.smallClassPolygon);
+
+        // });
       }
     },
     imgClick() {
@@ -1295,99 +1305,100 @@ export default {
         }
       });
     },
-    addTreeSpeciesPolygon() {
+    addTreeSpeciesPolygon(item) {
       let that = this;
-      that.smallClassMapArr.forEach((item) => {
-        let polyData = JSON.parse(item.mapInfo);
-        for (let elementLs in polyData.features) {
-          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.6,
-            strokeColor: 'red',
-            strokeWeight: 2,
-            zIndex: 999,
-            cursor: 'pointer',
-            fillColor: polygonColor
-          });
-          this.treesPolygonArr.push(polygon);
-          if (item.longitude && item.latitude) {
-            var lanLatArr = [];
-            polygon.on('click', (e) => {
-              lanLatArr = [item.longitude, item.latitude];
-              let treeSmallLabel =
-                "<div class='info-small'>" +
-                "<h5 class='marker-title'>小班" +
-                item.smallNumber +
-                '</h5>' +
-                "<div class='marker-content'>" +
-                '<p>树种组成：' +
-                item.treeComp +
-                '</p>' +
-                '<p>树种结构：' +
-                item.treeStruct +
-                '</p>' +
-                '<p>优势树种：' +
-                item.superTree +
-                '</p>' +
-                '<p>优势树种平均胸径：' +
-                item.superTreeDbh +
-                '厘米' +
-                '</p>' +
-                '<p>优势树种平均高：' +
-                item.superTreeHigh +
-                '米' +
-                '</p>' +
-                '<p>位置：' +
-                item.countyName +
-                item.townName +
-                item.villageName +
-                '</p>' +
-                '</div>' +
-                '</div>';
-              that.smallMarker = new AMap.Marker({
-                map: that.map,
-                position: lanLatArr,
-                icon: require('@/assets/img/small-marker.png'),
-                anchor: 'bottom-center',
-                offset: new AMap.Pixel(0, 0)
-              });
-              that.smallMarker.setLabel({
-                direction: 'top',
-                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
-                content: treeSmallLabel //设置文本标注内容
-              });
-              that.treeCompMarkers.push(that.smallMarker);
+      // that.smallClassMapArr.forEach((item) => {
+      let polyData = JSON.parse(item.mapInfo);
+      for (let elementLs in polyData.features) {
+        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.6,
+          strokeColor: 'red',
+          strokeWeight: 2,
+          zIndex: 999,
+          cursor: 'pointer',
+          fillColor: polygonColor
+        });
+        this.treesPolygonArr.push(polygon);
+        if (item.longitude && item.latitude) {
+          var lanLatArr = [];
+          polygon.on('click', (e) => {
+            lanLatArr = [item.longitude, item.latitude];
+            let treeSmallLabel =
+              "<div class='info-small'>" +
+              "<h5 class='marker-title'>小班" +
+              item.smallNumber +
+              '</h5>' +
+              "<div class='marker-content'>" +
+              '<p>树种组成：' +
+              item.treeComp +
+              '</p>' +
+              '<p>树种结构：' +
+              item.treeStruct +
+              '</p>' +
+              '<p>优势树种：' +
+              item.superTree +
+              '</p>' +
+              '<p>优势树种平均胸径：' +
+              item.superTreeDbh +
+              '厘米' +
+              '</p>' +
+              '<p>优势树种平均高：' +
+              item.superTreeHigh +
+              '米' +
+              '</p>' +
+              '<p>位置：' +
+              item.countyName +
+              item.townName +
+              item.villageName +
+              '</p>' +
+              '</div>' +
+              '</div>';
+            that.smallMarker = new AMap.Marker({
+              map: that.map,
+              position: lanLatArr,
+              icon: require('@/assets/img/small-marker.png'),
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
             });
-            polygon.on('mouseout', () => {
-              that.map.remove(that.treeCompMarkers);
+            that.smallMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+              content: treeSmallLabel //设置文本标注内容
             });
-          }
+            that.treeCompMarkers.push(that.smallMarker);
+          });
+          that.map.on('rightclick', function (e) {
+            if (that.treeCompMarkers.length > 0) {
+              that.map.remove(that.treeCompMarkers);
+            }
+          });
         }
-      });
+      }
+      // });
     },
     // 获取小班列表
     getRightScrollData(page) {
@@ -1420,6 +1431,9 @@ export default {
           } else if (item.eventType == 3) {
             item.eventContLabel = '病虫害';
             baseIcon = insectpestIcon;
+          }else if (item.eventType == 4) {
+            item.eventContLabel = '偷盗林木';
+            baseIcon = cutTreeIcon;
           }
           _this.smallMarker = new AMap.Marker({
             map: _this.map,
@@ -1479,34 +1493,7 @@ export default {
     },
     // 林业经济
     getEconomics() {
-      this.smallClassMapArr.forEach((item) => {
-        let polyData = JSON.parse(item.mapInfo);
-        for (let elementLs in polyData.features) {
-          let polygon = new AMap.Polygon({
-            map: this.map,
-            path: polyData.features[elementLs].geometry.coordinates,
-            strokeOpacity: 1,
-            fillOpacity: 0,
-            strokeColor: 'red',
-            strokeWeight: 2,
-            zIndex: 999,
-            cursor: 'pointer'
-          });
-          this.economicsArr.push(polygon);
-          polygon.on('mouseover', (e) => {
-            polygon.setOptions({
-              fillOpacity: 0.7,
-              fillColor: 'yellow'
-            });
-          });
-          polygon.on('mouseout', () => {
-            polygon.setOptions({
-              fillOpacity: 0,
-              fillColor: '#ccebc5'
-            });
-          });
-        }
-      });
+      let _this = this;
       financeBasePlant({
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId
@@ -1537,7 +1524,7 @@ export default {
             imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
           });
           this.smallMarker = new AMap.Marker({
-            map: this.map,
+            map: _this.map,
             position: lanLatArr,
             icon: sampleIcon,
             anchor: 'bottom-center',
@@ -1594,7 +1581,7 @@ export default {
                   '</p>' +
                   '</div>' +
                   '</div>';
-                baseMarker.setLabel({
+                _this.baseMarker.setLabel({
                   direction: 'top',
                   offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                   content: treeSmallLabel //设置文本标注内容
@@ -1603,7 +1590,7 @@ export default {
             });
           });
           this.baseMarker.on('mouseout', function (e) {
-            baseMarker.setLabel({
+            _this.baseMarker.setLabel({
               direction: 'right',
               offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
               content: `<div>${element.baseName}</div>` //设置文本标注内容
@@ -1740,22 +1727,22 @@ export default {
         cursor: pointer;
       }
     }
-    .marker-imgs::-webkit-scrollbar{
+    .marker-imgs::-webkit-scrollbar {
       background: transparent;
       opacity: 0.6px;
       width: 10px;
       height: 8px;
     }
-    .marker-imgs::-webkit-scrollbar-thumb{
+    .marker-imgs::-webkit-scrollbar-thumb {
       background: rgba($color: #07a2eb8e, $alpha: 0.6);
       border-radius: 20px;
-      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-      
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     }
-    .marker-imgs::-webkit-scrollbar-track {/*滚动条里面轨道*/
-        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-        border-radius: 10px;
-        background: transparent;
+    .marker-imgs::-webkit-scrollbar-track {
+      /*滚动条里面轨道*/
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      background: transparent;
     }
   }
 }

src/service/index.js

@@ -29,6 +29,13 @@ export const smallClassMap = data =>
     prefixUrl: "api2"
   });
 
+  export const smallClassMapFile = data =>
+  callApi({
+    url: "smallClass/map/file",
+    data,
+    prefixUrl: "api2"
+  }); 
+
 // 查询小班详情
 export const smallClassDetail = data =>
   callApi({

src/utils/request.js

@@ -23,7 +23,7 @@ const defaultOptions = {
     withCredentials: true, // 允许把cookie传递到后台
     headers: {
         Accept: 'application/json',
-        'Content-Type': contentTypes.json,
+        'Content-Type': contentTypes.json
     },
     timeout: 60000,
 }
@@ -35,6 +35,7 @@ export const callApi = ({
     options = {},
     contentType = 'json', // json || urlencoded || multipart
     prefixUrl = 'api',
+    responseType
 }) => {
     if (!url) {
         const error = new Error('请传入url')