修改小班边界查询详情

src/components/amap.vue

@@ -26,7 +26,7 @@ import {
   financeBasePlant,
   financeBaseDetail,
   farmInfo,
-  smallInfo
+  smallClassDetail
 } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 import { Message } from 'element-ui';
@@ -184,6 +184,7 @@ export default {
       immediate: true,
       handler: function (val, oldVal) {
         let _this = this;
+        console.log(val);
         if (val) {
           if (val.longitude && val.latitude && !val.name) {
             let lanLatArr = [val.longitude, val.latitude];
@@ -195,6 +196,7 @@ export default {
               val.smallNumber +
               '</h5>' +
               "<div class='marker-content'>" +
+              '' +
               '<p>小班号：' +
               val.smallNumber +
               '</p>' +
@@ -331,6 +333,9 @@ export default {
       AMapLoader.load({
         key: 'f79d862df9288710e3dce6591af9dff1', // 申请好的Web端开发者Key，首次调用 load 时必填
         version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        Loca: {
+          version: '2.0'
+        },
         AMapUI: {
           // 是否加载 AMapUI，缺省不加载
           version: '1.1', // AMapUI 缺省 1.1
@@ -358,6 +363,7 @@ export default {
             _this.loadMapData(DistrictExplorer, $);
           }
         );
+        
         var wms = new AMap.TileLayer.WMTS({
           url: 'http://t4.tianditu.gov.cn/img_w/wmts',
           blend: false,
@@ -736,65 +742,57 @@ export default {
               cursor: 'pointer'
             });
             var lanLatArr = [];
+
             that.smallClassPolygon.on('mouseover', () => {
+              console.log(item);
+              lanLatArr = [item.longitude, item.latitude];
+              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>小班蓄积量：' +
+                item.smallClassStock +
+                '(立方米)' +
+                '</p>' +
+                '<p>小班占地面积：' +
+                item.landArea +
+                '(亩)' +
+                '</p>' +
+                '<p>小班树种组成：' +
+                item.treeComp +
+                '</p>' +
+                '<p>所在位置：' +
+                item.cityName +
+                item.countyName +
+                item.townName;
+              '</p>' + '</div>' + '</div>';
+              that.smallMarker = new AMap.Marker({
+                position: lanLatArr,
+                icon: require('@/assets/img/small-marker.png'),
+                anchor: 'bottom-center',
+                offset: new AMap.Pixel(0, 0)
+              });
+              that.smallMarker.setLabel({
+                direction: 'right',
+                offset: new AMap.Pixel(-170, -115), //设置文本标注偏移量
+                content: smallLabel //设置文本标注内容
+              });
+              that.smallMarker.setMap(that.map);
               that.smallClassPolygon.setOptions({
                 fillOpacity: 0.7,
                 fillColor: 'yellow'
               });
             });
-            that.smallClassPolygon.on('click', (e) => {
-              lanLatArr = [e.lnglat.lng, e.lnglat.lat];
-              console.log(item);
-              smallInfo({ smallNumber: item.smallNumber }).then((res) => {
-                console.log(res);
-                let smallData = res.data;
-                if (smallData) {
-                  let smallLabel =
-                    "<div class='info-small'>" +
-                    "<h5 class='marker-title'>" +
-                    smallData.countyName +
-                    '-' +
-                    smallData.smallNumber +
-                    '</h5>' +
-                    "<div class='marker-content'>" +
-                    '<p>小班号：' +
-                    smallData.smallNumber +
-                    '</p>' +
-                    '<p>样地数：' +
-                    smallData.sampleCount +
-                    '</p>' +
-                    '<p>小班蓄积量：' +
-                    smallData.smallClassStock +
-                    '(立方米)' +
-                    '</p>' +
-                    '<p>小班占地面积：' +
-                    smallData.landArea +
-                    '(亩)' +
-                    '</p>' +
-                    '<p>小班树种组成：' +
-                    smallData.treeComp +
-                    '</p>' +
-                    '<p>所在位置：' +
-                    smallData.cityName +
-                    smallData.countyName +
-                    smallData.townName;
-                  '</p>' + '</div>' + '</div>';
-                  that.smallMarker = new AMap.Marker({
-                    position: lanLatArr,
-                    icon: require('@/assets/img/small-marker.png'),
-                    anchor: 'bottom-center',
-                    offset: new AMap.Pixel(0, 0)
-                  });
-                  that.smallMarker.setLabel({
-                    direction: 'right',
-                    offset: new AMap.Pixel(-170, -115), //设置文本标注偏移量
-                    content: smallLabel //设置文本标注内容
-                  });
-                  that.smallMarker.setMap(this.map);
-                }
-              });
-            });
-
             that.smallClassPolygon.on('mouseout', () => {
               if (that.smallMarker) {
                 that.smallMarker.setMap(null);
@@ -906,6 +904,7 @@ 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) {
@@ -921,67 +920,55 @@ export default {
           });
           var lanLatArr = [];
           polygon.on('mouseover', (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);
             polygon.setOptions({
               fillOpacity: 0.7,
               fillColor: 'yellow'
             });
           });
-          polygon.on('click', (e) => {
-            rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
-              if (res.rows) {
-                lanLatArr = [res.rows[0].longitude, res.rows[0].latitude];
-                that.treeCompData = res.rows[0];
-                if (!this.treeCompData) {
-                  return false;
-                }
-                let treeCompData = that.treeCompData;
-                let treeSmallLabel =
-                  "<div class='info-small'>" +
-                  "<h5 class='marker-title'>小班" +
-                  treeCompData.smallNumber +
-                  '</h5>' +
-                  "<div class='marker-content'>" +
-                  '<p>树种组成：' +
-                  treeCompData.treeComp +
-                  '</p>' +
-                  '<p>树种结构：' +
-                  treeCompData.treeStruct +
-                  '</p>' +
-                  '<p>优势树种：' +
-                  treeCompData.superTree +
-                  '</p>' +
-                  '<p>优势树种平均胸径：' +
-                  treeCompData.superTreeDbh +
-                  '厘米' +
-                  '</p>' +
-                  '<p>优势树种平均高：' +
-                  treeCompData.superTreeHigh +
-                  '米' +
-                  '</p>' +
-                  '<p>位置：' +
-                  treeCompData.countyName +
-                  treeCompData.townName +
-                  treeCompData.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);
-                // this.smallMarker.setMap(this.map);
-              }
-            });
-          });
           polygon.on('mouseout', () => {
             that.map.remove(that.treeCompMarkers);
             polygon.setOptions({
@@ -1292,7 +1279,7 @@ export default {
         });
         that.townPolygons.push(this.boundaryPolygon);
         // that.map.add(that.townPolygons);
-
+       
         this.boundaryPolygon.on('click', (e) => {
           this.smallClassMapArr = [];
           let centerLanLatArr = [e.lnglat.lng, e.lnglat.lat];
@@ -1346,6 +1333,9 @@ export default {
           //   townId: this.$store.state.addr.selectStreet.areaId
           // });
           // that.map.setBounds(townPolygon.getBounds(), null, null, true);
+          townPolygon.on('click',(e) =>{
+            console.log(e.lnglat.lng,e.lnglat.lat,);
+          })
           console.log(this.leftPage);
           if (this.leftPage === 'forest') {
             this.addForestPolygon(this.smallClassMapArr);