Home Verkennen Help
Registreren Inloggen
castgroup_forest
/
castgroup_bigscreen
7
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

显示全部小班边界，样地信息，林木信息，隐藏地图logo

wangcc 2 jaren geleden
bovenliggende
b2c24edcde
commit
0e314a19ad
4 gewijzigde bestanden met toevoegingen van 431 en 315 verwijderingen
Gecombineerde weergave Toon Diff Stats
  1. 9 0
      index.html
  2. 403 300
      src/components/amap.vue
  3. 5 6
      src/store/addr/index.js
  4. 14 9
      src/views/index.vue

+ 9 - 0
index.html
Bestand weergeven 

@@ -9,6 +9,15 @@
 
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
     <title>ntbigscreen</title>
 
     <title>ntbigscreen</title>
 
+    <style type="text/css">
 
+      .amap-logo{
 
+      display: none;
 
+      opacity:0 !important;
 
+      }
 
+      .amap-copyright {
 
+          opacity:0;
 
+      }
 
+  </style>
 
   </head>
 
   </head>
 
 
 
   <body>
 
   <body>

+ 403 - 300
src/components/amap.vue
Bestand weergeven 

@@ -25,7 +25,8 @@ import {
 
   alarmDataApi,
 
   alarmDataApi,
 
   financeBasePlant,
 
   financeBasePlant,
 
   financeBaseDetail,
 
   financeBaseDetail,
 
-  farmInfo
 
+  farmInfo,
 
+  smallInfo
 
 } from '@/service/index.js';
 
 } from '@/service/index.js';
 
 import { mapMutations, mapState, mapGetters } from 'vuex';
 
 import { mapMutations, mapState, mapGetters } from 'vuex';
 
 import { Message } from 'element-ui';
 
 import { Message } from 'element-ui';
 
@@ -40,6 +41,7 @@ export default {
 
       zoom: 8,
 
       zoom: 8,
 
       adcode: '贵州省',
 
       adcode: '贵州省',
 
       mapLevel: 'province',
 
       mapLevel: 'province',
 
+      parentId: '520000',
 
       province: '',
 
       province: '',
 
       districtExplorer: null,
 
       districtExplorer: null,
 
       tipMarker: null,
 
       tipMarker: null,
 
@@ -79,33 +81,60 @@ export default {
 
   watch: {
 
   watch: {
 
     '$store.state.addr.parentId': {
 
     '$store.state.addr.parentId': {
 
       handler(val) {
 
       handler(val) {
 
-        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(
 
-            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
 
-          );
 
+        if (this.$store.state.addr.mapLevel != 'street') {
 
+          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(
 
+              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
 
+            );
 
+          }
 
         }
 
         }
 
       }
 
       }
 
     },
 
     },
 
     '$store.state.addr.selectStreet'(val) {
 
     '$store.state.addr.selectStreet'(val) {
 
       console.log(val);
 
       console.log(val);
 
+      if (val.label && val.value && val.areaId) {
 
+        this.map.remove(this.polygon);
 
+        this.map.setCity(val.label);
 
+        // 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.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);
 
+        }
 
+      }
 
       // this.putPolygon(val)
 
       // this.putPolygon(val)
 
     },
 
     },
 
     '$store.state.addr.page': {
 
     '$store.state.addr.page': {
 
       handler(val) {
 
       handler(val) {
 
         this.leftPage = val;
 
         this.leftPage = val;
 
+        if (!this.parentId) {
 
+          this.parentId = '520000';
 
+          this.$store.state.addr.parentName = '贵州省';
 
+        }
 
         if (this.parentId) {
 
         if (this.parentId) {
 
-          // this.getrjx()
 
+          this.getSmallClass();
 
           this.switch2AreaNode(
 
           this.switch2AreaNode(
 
             this.parentId,
 
             this.parentId,
 
             this.$store.state.addr.mapLevel,
 
             this.$store.state.addr.mapLevel,
 
@@ -119,22 +148,78 @@ export default {
 
         }
 
         }
 
       }
 
       }
 
     },
 
     },
 
-    '$store.state.addr.smallClassMapArr': {
 
+    // '$store.state.addr.smallClassMapArr': {
 
+    //   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);
 
+    //         }
 
+    //       }
 
+    //     }
 
+    //   }
 
+    // },
 
+    '$store.state.addr.smallClassSearch': {
 
       deep: true,
 
       deep: true,
 
       immediate: true,
 
       immediate: true,
 
-      handler(val) {
 
-        this.smallClassMapArr = val.rows;
 
-        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);
 
-            }
 
+      handler: function (val, oldVal) {
 
+        let smallArr = [];
 
+        smallArr = val;
 
+        if (smallArr != 0) {
 
+          if (smallArr.longitude && smallArr.latitude) {
 
+            let lanLatArr = [smallArr.longitude, smallArr.latitude];
 
+            let smallLabel =
 
+              "<div class='info-small'>" +
 
+              "<h5 class='marker-title'>" +
 
+              smallArr.countyName +
 
+              '-' +
 
+              smallArr.smallNumber +
 
+              '</h5>' +
 
+              "<div class='marker-content'>" +
 
+              '<p>小班号：' +
 
+              smallArr.smallNumber +
 
+              '</p>' +
 
+              '<p>样地数：' +
 
+              smallArr.sampleCount +
 
+              '</p>' +
 
+              '<p>小班蓄积量：' +
 
+              smallArr.smallClassStock +
 
+              '(立方米)' +
 
+              '</p>' +
 
+              '<p>小班占地面积：' +
 
+              smallArr.landArea +
 
+              '(亩)' +
 
+              '</p>' +
 
+              '<p>小班树种组成：' +
 
+              smallArr.treeComp +
 
+              '</p>' +
 
+              '<p>所在位置：' +
 
+              smallArr.cityName +
 
+              smallArr.countyName +
 
+              smallArr.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(-170, -115), //设置文本标注偏移量
 
+              content: smallLabel //设置文本标注内容
 
+            });
 
+            // this.smallMarker.setMap(this.map);
 
+            this.map.add(this.smallMarker);
 
           }
 
           }
 
         }
 
         }
 
       }
 
       }
 
@@ -355,34 +440,37 @@ export default {
 
         }
 
         }
 
       });
 
       });
 
       console.log(this.$store.state.addr.selectCity);
 
       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') {
 
-          let districtCode = this.districtData.value.substring(0, 6);
 
-          this.$store.dispatch('searchArea', {
 
-            parentId: districtCode,
 
-            name: this.districtData.label,
 
-            mapLevel: 'district'
 
-          });
 
-        }
 
-        if (zoom > '9' && zoom < '9.2') {
 
-          let districtCode = this.selectData.value.substring(0, 6);
 
-          this.$store.dispatch('searchArea', {
 
-            parentId: districtCode,
 
-            name: this.selectData.label,
 
-            mapLevel: 'city'
 
-          });
 
-        }
 
-        if (zoom > '7.6' && zoom < '7.9') {
 
-          this.$store.dispatch('searchArea', {
 
-            parentId: '520000',
 
-            name: '贵州省',
 
-            mapLevel: 'province'
 
-          });
 
-        }
 
-      });
 
+      // this.map.on('mousewheel', (e) => {
 
+      //   console.log(e.lnglat.lng, e.lnglat.lat);
 
+      //   var zoom = this.map.getZoom(); //获取当前地图级别
 
+      //   if (zoom > '11.8' && zoom < '12.1') {
 
+      //     if (this.districtData.value) {
 
+      //       let districtCode = this.districtData.value.substring(0, 6);
 
+      //       this.$store.dispatch('searchArea', {
 
+      //         parentId: districtCode,
 
+      //         name: this.districtData.label,
 
+      //         mapLevel: 'district'
 
+      //       });
 
+      //     }
 
+      //   }
 
+      //   if (zoom > '9' && zoom < '9.2') {
 
+      //     if (this.selectData.value) {
 
+      //       let districtCode = this.selectData.value.substring(0, 6);
 
+      //       this.$store.dispatch('searchArea', {
 
+      //         parentId: districtCode,
 
+      //         name: this.selectData.label,
 
+      //         mapLevel: 'city'
 
+      //       });
 
+      //     }
 
+      //   }
 
+      //   if (zoom > '7.6' && zoom < '7.9') {
 
+      //     this.$store.dispatch('searchArea', {
 
+      //       parentId: '520000',
 
+      //       name: '贵州省',
 
+      //       mapLevel: 'province'
 
+      //     });
 
+      //   }
 
+      // });
 
       that.getDistrict(adName, mapLevel);
 
       that.getDistrict(adName, mapLevel);
 
       this.switch2AreaNode(adcode);
 
       this.switch2AreaNode(adcode);
 
     },
 
     },
 
@@ -416,6 +504,7 @@ export default {
 
     renderAreaPolygons(areaNode) {
 
     renderAreaPolygons(areaNode) {
 
       //更新地图视野
 
       //更新地图视野
 
       this.map.setBounds(areaNode.getBounds(), null, null, false);
 
       this.map.setBounds(areaNode.getBounds(), null, null, false);
 
+      this.getSmallClass();
 
       //清除已有的绘制内容
 
       //清除已有的绘制内容
 
       this.districtExplorer.clearFeaturePolygons();
 
       this.districtExplorer.clearFeaturePolygons();
 
       //绘制子区域
 
       //绘制子区域
 
@@ -467,12 +556,11 @@ export default {
 
         ) {
 
         ) {
 
           this.setMarker();
 
           this.setMarker();
 
         }
 
         }
 
-        if (mapLevel === 'district') {
 
-          this.getrjx(adcode, selectStreet);
 
-          if (page === 'event') {
 
-            this.getEven();
 
-          }
 
+        this.getrjx(adcode, selectStreet);
 
+        if (page === 'event') {
 
+          this.getEven();
 
         }
 
         }
 
+
 
         //设置当前使用的定位用节点
 
         //设置当前使用的定位用节点
 
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
 
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
 
 
 
@@ -497,82 +585,109 @@ export default {
 
         }
 
         }
 
       });
 
       });
 
     },
 
     },
 
-    // getSmallClass() {
 
-    //   let that = this;
 
-    //     this.smallClassMapArr = this.$store.state.addr.smallClassMapArr;
 
-    // },
 
+    getSmallClass() {
 
+      let params = {
 
+        cityId: this.$store.state.addr.selectCity.areaId,
 
+        countyId: this.$store.state.addr.selectDistrict.areaId,
 
+        townId: this.$store.state.addr.selectStreet.areaId
 
+      };
 
+      smallClassMap(params).then((res) => {
 
+        this.smallClassMapArr = res.rows;
 
+        if (this.leftPage === 'forest') {
 
+          this.addForestPolygon(this.smallClassMapArr);
 
+          this.getForestSample(this.leftPage);
 
+        } else if (this.leftPage === 'treeSpecies') {
 
+          this.addTreeSpeciesPolygon();
 
+          this.getRightScrollData(this.leftPage);
 
+        } else if (this.leftPage === 'economics') {
 
+          this.getEconomics(this.smallClassMapArr);
 
+        }
 
+      });
 
+    },
 
     addForestPolygon(smallClassMapArr) {
 
     addForestPolygon(smallClassMapArr) {
 
       let that = this;
 
       let that = this;
 
       if (smallClassMapArr) {
 
       if (smallClassMapArr) {
 
         smallClassMapArr.forEach((item) => {
 
         smallClassMapArr.forEach((item) => {
 
           let polyData = JSON.parse(item.mapInfo);
 
           let polyData = JSON.parse(item.mapInfo);
 
-          console.log(item);
 
-          console.log(polyData);
 
-          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)
 
+          for (let elementLs in polyData.features) {
 
+            that.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'
 
             });
 
             });
 
-            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];
 
+              smallInfo({ smallNumber: item.smallNumber }).then((res) => {
 
+                console.log(res.data);
 
+                let smallData = res.data;
 
+                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);
 
+              });
 
             });
 
             });
 
-            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 (that.smallMarker) {
 
+                that.smallMarker.setMap(null);
 
+                that.smallMarker = null;
 
+              }
 
+              that.smallClassPolygon.setOptions({
 
+                fillOpacity: 0,
 
+                fillColor: '#ccebc5'
 
+              });
 
             });
 
             });
 
-          });
 
-          this.map.add(that.smallClassPolygon);
 
+          }
 
+          // this.map.add(that.smallClassPolygon);
 
         });
 
         });
 
       }
 
       }
 
     },
 
     },
 
@@ -671,87 +786,89 @@ export default {
 
       });
 
       });
 
     },
 
     },
 
     addTreeSpeciesPolygon() {
 
     addTreeSpeciesPolygon() {
 
-      this.smallClassMapArr.forEach((item) => {
 
+      let that = this;
 
+      that.smallClassMapArr.forEach((item) => {
 
         let polyData = JSON.parse(item.mapInfo);
 
         let polyData = JSON.parse(item.mapInfo);
 
-        let polygon = 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.map.add(polygon);
 
-        var lanLatArr = [];
 
-        polygon.on('mouseover', (e) => {
 
-          polygon.setOptions({
 
-            fillOpacity: 0.7,
 
-            fillColor: 'yellow'
 
+        for (let elementLs in polyData.features) {
 
+          let polygon = new AMap.Polygon({
 
+            map: that.map,
 
+            path: polyData.features[elementLs].geometry.coordinates,
 
+            strokeOpacity: 1,
 
+            fillOpacity: 0,
 
+            strokeColor: 'red',
 
+            strokeWeight: 2,
 
+            zIndex: 999,
 
+            cursor: 'pointer'
 
           });
 
           });
 
-        });
 
-        polygon.on('click', (e) => {
 
-          rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
 
-            lanLatArr = [res.rows[0].longitude, res.rows[0].latitude];
 
-            this.treeCompData = res.rows[0];
 
-            if (!this.treeCompData) {
 
-              return false;
 
-            }
 
-            let treeCompData = this.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>';
 
-            this.smallMarker = new AMap.Marker({
 
-              map: this.map,
 
-              position: lanLatArr,
 
-              icon: require('@/assets/img/small-marker.png'),
 
-              anchor: 'bottom-center',
 
-              offset: new AMap.Pixel(0, 0)
 
+          var lanLatArr = [];
 
+          polygon.on('mouseover', (e) => {
 
+            polygon.setOptions({
 
+              fillOpacity: 0.7,
 
+              fillColor: 'yellow'
 
             });
 
             });
 
-            this.smallMarker.setLabel({
 
-              direction: 'top',
 
-              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
 
-              content: treeSmallLabel //设置文本标注内容
 
+          });
 
+          polygon.on('click', (e) => {
 
+            rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
 
+              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);
 
             });
 
             });
 
-            this.treeCompMarkers.push(this.smallMarker);
 
-            // this.smallMarker.setMap(this.map);
 
           });
 
           });
 
-        });
 
-        polygon.on('mouseout', () => {
 
-          this.map.remove(this.treeCompMarkers);
 
-          polygon.setOptions({
 
-            fillOpacity: 0,
 
-            fillColor: '#ccebc5'
 
+          polygon.on('mouseout', () => {
 
+            that.map.remove(that.treeCompMarkers);
 
+            polygon.setOptions({
 
+              fillOpacity: 0,
 
+              fillColor: '#ccebc5'
 
+            });
 
           });
 
           });
 
-        });
 
+        }
 
       });
 
       });
 
     },
 
     },
 
     // 获取小班列表
 
     // 获取小班列表
 
@@ -768,86 +885,72 @@ export default {
 
     },
 
     },
 
     // 事件信息
 
     // 事件信息
 
     getEven() {
 
     getEven() {
 
+      let _this = this;
 
       alarmDataApi().then((res) => {
 
       alarmDataApi().then((res) => {
 
         res.data.forEach((item) => {
 
         res.data.forEach((item) => {
 
           let lanLatArr = [item.longitude, item.latitude];
 
           let lanLatArr = [item.longitude, item.latitude];
 
+          let baseIcon = '';
 
           let fireIcon = require('@/assets/img/fire.png');
 
           let fireIcon = require('@/assets/img/fire.png');
 
           let cutTreeIcon = require('@/assets/img/cutTree.png');
 
           let cutTreeIcon = require('@/assets/img/cutTree.png');
 
           let insectpestIcon = require('@/assets/img/insectpest.png');
 
           let insectpestIcon = require('@/assets/img/insectpest.png');
 
           if (item.eventType == 1) {
 
           if (item.eventType == 1) {
 
             item.eventContLabel = '火灾';
 
             item.eventContLabel = '火灾';
 
+            baseIcon = fireIcon;
 
           } else if (item.eventType == 2) {
 
           } else if (item.eventType == 2) {
 
             item.eventContLabel = '砍伐';
 
             item.eventContLabel = '砍伐';
 
+            baseIcon = cutTreeIcon;
 
           } else if (item.eventType == 3) {
 
           } else if (item.eventType == 3) {
 
             item.eventContLabel = '病虫害';
 
             item.eventContLabel = '病虫害';
 
+            baseIcon = insectpestIcon;
 
           }
 
           }
 
-          let treeSmallLabel =
 
-            "<div class='info-small'>" +
 
-            "<h5 class='marker-title'>最新事件" +
 
-            '</h5>' +
 
-            "<div class='marker-content'>" +
 
-            '<p>事件类型：' +
 
-            item.eventContLabel +
 
-            '</p>' +
 
-            '<p>上报时间：' +
 
-            item.createTime +
 
-            '</p>' +
 
-            '<p>上报人：' +
 
-            item.createBy +
 
-            '</p>' +
 
-            '<p>位置：' +
 
-            item.cityName +
 
-            item.countyName +
 
-            item.townName +
 
-            item.villageName +
 
-            '</p>' +
 
-            '</div>' +
 
-            '</div>';
 
-
 
-          switch (item.eventType) {
 
-            case 1:
 
-              this.smallMarker = new AMap.Marker({
 
-                position: lanLatArr,
 
-                icon: fireIcon,
 
-                anchor: 'bottom-center',
 
-                offset: new AMap.Pixel(0, 0)
 
-              });
 
-              this.smallMarker.setLabel({
 
-                direction: 'top',
 
-                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
 
-                content: treeSmallLabel //设置文本标注内容
 
-              });
 
-              break;
 
-            case 2:
 
-              this.smallMarker = new AMap.Marker({
 
-                position: lanLatArr,
 
-                icon: cutTreeIcon,
 
-                anchor: 'bottom-center',
 
-                offset: new AMap.Pixel(0, 0)
 
-              });
 
-              this.smallMarker.setLabel({
 
-                direction: 'top',
 
-                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
 
-                content: treeSmallLabel //设置文本标注内容
 
-              });
 
-              break;
 
-            case 3:
 
-              this.smallMarker = new AMap.Marker({
 
-                position: lanLatArr,
 
-                icon: insectpestIcon,
 
-                anchor: 'bottom-center',
 
-                offset: new AMap.Pixel(0, 0)
 
-              });
 
-              this.smallMarker.setLabel({
 
-                direction: 'top',
 
-                offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
 
-                content: treeSmallLabel //设置文本标注内容
 
-              });
 
-              break;
 
-            default:
 
-              break;
 
-          }
 
-          this.smallMarker.setMap(this.map);
 
+          this.smallMarker = new AMap.Marker({
 
+            map: this.map,
 
+            position: lanLatArr,
 
+            icon: baseIcon,
 
+            anchor: 'bottom-center',
 
+            offset: new AMap.Pixel(0, 0),
 
+            zIndex: 999
 
+          });
 
+          this.smallMarker.on('click', function (e) {
 
+            let treeSmallLabel =
 
+              "<div class='info-small'>" +
 
+              "<h5 class='marker-title'>最新事件" +
 
+              '</h5>' +
 
+              "<div class='marker-content'>" +
 
+              '<p>事件类型：' +
 
+              item.eventContLabel +
 
+              '</p>' +
 
+              '<p>上报时间：' +
 
+              item.createTime +
 
+              '</p>' +
 
+              '<p>上报人：' +
 
+              item.createBy +
 
+              '</p>' +
 
+              '<p>位置：' +
 
+              item.cityName +
 
+              item.countyName +
 
+              item.townName +
 
+              item.villageName +
 
+              '</p>' +
 
+              '</div>' +
 
+              '</div>';
 
+            _this.eventMarker = new AMap.Marker({
 
+              position: lanLatArr,
 
+              icon: baseIcon,
 
+              anchor: 'bottom-center',
 
+              offset: new AMap.Pixel(0, 0),
 
+              zIndex: 999
 
+            });
 
+            _this.eventMarker.setLabel({
 
+              direction: 'top',
 
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
 
+              content: treeSmallLabel //设置文本标注内容
 
+            });
 
+            _this.map.add(_this.eventMarker);
 
+          });
 
+          this.smallMarker.on('mouseout', function (e) {
 
+            _this.map.remove(_this.eventMarker);
 
+          });
 
         });
 
         });
 
       });
 
       });
 
     },
 
     },
 
@@ -855,30 +958,30 @@ export default {
 
     getEconomics() {
 
     getEconomics() {
 
       this.smallClassMapArr.forEach((item) => {
 
       this.smallClassMapArr.forEach((item) => {
 
         let polyData = JSON.parse(item.mapInfo);
 
         let polyData = JSON.parse(item.mapInfo);
 
-        let polygon = new AMap.Polygon({
 
-          map: this.map,
 
-          path: polyData.features[0].geometry.coordinates,
 
-          strokeOpacity: 1,
 
-          fillOpacity: 0,
 
-          strokeColor: 'red',
 
-          strokeWeight: 2,
 
-          zIndex: 999,
 
-          cursor: 'pointer'
 
-        });
 
-
 
-        polygon.on('mouseover', (e) => {
 
-          polygon.setOptions({
 
-            fillOpacity: 0.7,
 
-            fillColor: 'yellow'
 
-          });
 
-        });
 
-        polygon.on('mouseout', () => {
 
-          polygon.setOptions({
 
+        for (let elementLs in polyData.features) {
 
+          let polygon = new AMap.Polygon({
 
+            map: this.map,
 
+            path: polyData.features[elementLs].geometry.coordinates,
 
+            strokeOpacity: 1,
 
             fillOpacity: 0,
 
             fillOpacity: 0,
 
-            fillColor: '#ccebc5'
 
+            strokeColor: 'red',
 
+            strokeWeight: 2,
 
+            zIndex: 999,
 
+            cursor: 'pointer'
 
           });
 
           });
 
-        });
 
-        // this.map.add(polygon);
 
+          polygon.on('mouseover', (e) => {
 
+            polygon.setOptions({
 
+              fillOpacity: 0.7,
 
+              fillColor: 'yellow'
 
+            });
 
+          });
 
+          polygon.on('mouseout', () => {
 
+            polygon.setOptions({
 
+              fillOpacity: 0,
 
+              fillColor: '#ccebc5'
 
+            });
 
+          });
 
+        }
 
       });
 
       });
 
 
 
       financeBasePlant({
 
       financeBasePlant({
 
@@ -1085,7 +1188,7 @@ export default {
 
             label: label,
 
             label: label,
 
             areaId: areaId
 
             areaId: areaId
 
           });
 
           });
 
-          this.changeSelectAddr('street')
 
+          this.changeSelectAddr('street');
 
           console.log(this.streetData);
 
           console.log(this.streetData);
 
           var outer = [
 
           var outer = [
 
             new AMap.LngLat(-360, 90, true),
 
             new AMap.LngLat(-360, 90, true),
 
@@ -1099,7 +1202,7 @@ export default {
 
           let townPolygon = new AMap.Polygon({
 
           let townPolygon = new AMap.Polygon({
 
             map: that.map,
 
             map: that.map,
 
             pathL: pathArray,
 
             pathL: pathArray,
 
-            strokeColor: '#00eeff',
 
+            strokeColor: 'yellow',
 
             strokeWeight: 4,
 
             strokeWeight: 4,
 
             fillColor: '#0c1b05', // 遮罩背景色
 
             fillColor: '#0c1b05', // 遮罩背景色
 
             fillOpacity: 0
 
             fillOpacity: 0
 
@@ -1115,13 +1218,13 @@ export default {
 
           // that.map.setBounds(townPolygon.getBounds(), null, null, true);
 
           // that.map.setBounds(townPolygon.getBounds(), null, null, true);
 
           console.log(this.leftPage);
 
           console.log(this.leftPage);
 
           if (this.leftPage === 'forest') {
 
           if (this.leftPage === 'forest') {
 
-            this.addForestPolygon();
 
+            this.addForestPolygon(this.smallClassMapArr);
 
             this.getForestSample(this.leftPage);
 
             this.getForestSample(this.leftPage);
 
           } else if (this.leftPage === 'treeSpecies') {
 
           } else if (this.leftPage === 'treeSpecies') {
 
-            this.addTreeSpeciesPolygon();
 
+            this.addTreeSpeciesPolygon(this.smallClassMapArr);
 
             this.getRightScrollData(this.leftPage);
 
             this.getRightScrollData(this.leftPage);
 
           } else if (this.leftPage === 'economics') {
 
           } else if (this.leftPage === 'economics') {
 
-            this.getEconomics();
 
+            this.getEconomics(this.smallClassMapArr);
 
           }
 
           }
 
         });
 
         });
 
       });
 
       });

+ 5 - 6
src/store/addr/index.js
Bestand weergeven 

@@ -125,12 +125,11 @@ const addr = {
 
       });
 
       });
 
     },
 
     },
 
     // 获取小班边界
 
     // 获取小班边界
 
-    getSmallClassMap({ commit }, params = {}) {
 
-      smallClassMap(params).then(res => {
 
-        console.log(res);
 
-        commit("getSmallClassMapArr", res);
 
-      });
 
-    }
 
+    // getSmallClassMap({ commit }, params = {}) {
 
+    //   smallClassMap(params).then(res => {
 
+    //     commit("getSmallClassMapArr", res.rows);
 
+    //   });
 
+    // }
 
   }
 
   }
 
 };
 
 };

+ 14 - 9
src/views/index.vue
Bestand weergeven 

@@ -1,3 +1,12 @@
 
+<!--
 
+ * @Description: 
+ * @Author: wangcc
 
+ * @Date: 2022-07-06 15:56:45
 
+ * @LastEditors: wangcc
 
+ * @LastEditTime: 2022-07-06 16:04:04
 
+ * @FilePath: \castgroup_bigscreen\src\views\index.vue
 
+ * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
+-->
 
 <!--
 
 <!--
 
  * @LastEditors: gcz
 
  * @LastEditors: gcz
 
 -->
 
 -->
 
@@ -143,7 +152,7 @@
 
             class="scroll-board-01"
 
             class="scroll-board-01"
 
             :config="scrollBoardConfig"
 
             :config="scrollBoardConfig"
 
             ref="scrollBoard"
 
             ref="scrollBoard"
 
-            @click="scrollBoardClick"
 
+            @mouseover="scrollBoardClick"
 
             :style="scrollBoardStyle"
 
             :style="scrollBoardStyle"
 
           />
 
           />
 
           <div class="scroll-board-tool" @click="toggleShowScrollBoard">
 
           <div class="scroll-board-tool" @click="toggleShowScrollBoard">
 
@@ -190,7 +199,8 @@ import {
 
   page6echarts01,
 
   page6echarts01,
 
   page6echarts02,
 
   page6echarts02,
 
   eventList,
 
   eventList,
 
-  smallClassDetail
 
+  smallClassDetail,
 
+  smallInfo
 
 } from '../service/index';
 
 } from '../service/index';
 
 
 
 import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
 
 import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
 
@@ -1027,16 +1037,11 @@ export default {
 
       this.getPageData();
 
       this.getPageData();
 
     },
 
     },
 
     scrollBoardClick(e) {
 
     scrollBoardClick(e) {
 
-      console.log(e.row[0]);
 
       let param = {
 
       let param = {
 
         smallNumber: e.row[0],
 
         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
 
       };
 
       };
 
-      console.log(param);
 
-      rightScrollData(param).then((res) => {
 
-        this.changeSearchSmallClass(res.rows[0])
 
+      smallInfo(param).then((res) => {
 
+        this.changeSearchSmallClass(res.data);
 
       });
 
       });
 
     },
 
     },
 
     scrollBaseListClick(e){
 
     scrollBaseListClick(e){