清镇乡镇边界更新

src/components/amap.vue

@@ -24,7 +24,8 @@ import {
   forestSample,
   alarmDataApi,
   financeBasePlant,
-  financeBaseDetail
+  financeBaseDetail,
+  farmInfo
 } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
@@ -56,10 +57,12 @@ export default {
       smallClassPolygon: null,
       forestMarker: null,
       rightScrollMarker: null,
+      boundaryPolygon: null,
       markerData: {},
       cityMarkerArr: [],
       putPolygonData: [],
-      townPolygons: []
+      townPolygons: [],
+      treeCompMarkers: []
     };
   },
 
@@ -127,9 +130,7 @@ export default {
   computed: {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
   },
-  created() {
-    this.getrjx();
-  },
+  created() {},
   methods: {
     ...mapMutations([
       'changeSelectCity',
@@ -149,7 +150,6 @@ export default {
           version: '1.1', // AMapUI 缺省 1.1
           plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
         }
-        // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then((AMap) => {
         _this.AMap = AMap;
         _this.map = new AMap.Map('container', {
@@ -231,7 +231,8 @@ export default {
               strokeColor: '#00eeff',
               strokeWeight: 1,
               fillColor: '#0c1b05', // 遮罩背景色
-              fillOpacity: 0.8
+              fillOpacity: 0.8,
+              height: 10000
             });
             that.polygon.setPath(pathArray);
             that.map.add(that.polygon);
@@ -241,8 +242,8 @@ export default {
                 //c城市指示标
                 text: cityArr[i].name,
                 zIndex: 1,
+                map: that.map,
                 anchor: 'center', // 设置文本标记锚点
-                cursor: 'pointer',
                 style: {
                   padding: '0px 6px',
                   color: '#fff',
@@ -252,8 +253,8 @@ export default {
                 },
                 position: [cityArr[i].center.lng, cityArr[i].center.lat]
               });
-              // that.cityMarkerArr.push(that.cityMarker)
-              that.map.add(that.cityMarker);
+              // that.map.add(that.cityMarker);
+              that.cityMarkerArr.push(that.cityMarker);
             }
           } else {
             return false;
@@ -297,14 +298,9 @@ export default {
       var adcode = '520000';
       //feature被点击
       this.districtExplorer.on('featureClick', (e, feature) => {
-        // that.map.clearMap();
         const props = feature.properties;
         mapLevel = props.level;
         adName = props.name;
-
-        // that.getDistrict(adName, mapLevel);
-        // this.switch2AreaNode(props.adcode);
-
         this.$store.dispatch('searchArea', {
           parentId: props.adcode,
           name: props.name,
@@ -335,12 +331,6 @@ export default {
             areaId: areaId
           });
         }
-
-        // this.$store.dispatch('getSmallClassMap', {
-        //   cityId: this.$store.state.addr.selectCity.areaId,
-        //   countyId: this.$store.state.addr.selectDistrict.areaId,
-        //   townId: this.$store.state.addr.selectStreet.areaId
-        // });
       });
       that.getDistrict(adName, mapLevel);
       this.switch2AreaNode(adcode);
@@ -374,12 +364,7 @@ export default {
     //绘制某个区域的边界
     renderAreaPolygons(areaNode) {
       //更新地图视野
-      // if (!this.aReContry) {
       this.map.setBounds(areaNode.getBounds(), null, null, true);
-      // } else {
-      //   this.map.setZoom(4);
-      //   this.map.setCenter(new AMap.LngLat(103.714129, 38.150339));
-      // }
       //清除已有的绘制内容
       this.districtExplorer.clearFeaturePolygons();
       //绘制子区域
@@ -432,20 +417,8 @@ export default {
           this.setMarker();
         }
         if (mapLevel === 'district') {
-          // if (page === 'forest') {
-          //   this.addForestPolygon();
-          //   this.getForestSample(page);
-          // } else if (page === 'treeSpecies') {
-          //   this.addTreeSpeciesPolygon();
-          //   this.getRightScrollData(page);
-          // } else if (page === 'event') {
-          //   this.getEven();
-          // } else if (page === 'economics') {
-          //   this.getEconomics();
-          // }
-          if (adcode == '522632') {
-            this.putPolygon();
-          }
+          this.getrjx(adcode);
+         
         }
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
@@ -490,7 +463,7 @@ export default {
           cursor: 'pointer'
         });
         var lanLatArr = [];
-        that.smallClassPolygon.on('mouseover', (e) => {
+        that.smallClassPolygon.on('click', (e) => {
           lanLatArr = [e.lnglat.lng, e.lnglat.lat];
           let smallLabel =
             "<div class='info-small'>" +
@@ -526,6 +499,8 @@ export default {
             content: smallLabel //设置文本标注内容
           });
           this.smallMarker.setMap(this.map);
+        });
+        that.smallClassPolygon.on('mouseover', () => {
           that.smallClassPolygon.setOptions({
             fillOpacity: 0.7,
             fillColor: 'yellow'
@@ -546,7 +521,6 @@ export default {
     },
     // 获取样地数据
     getForestSample(page) {
-      console.log('样地数据');
       forestSample({
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
@@ -630,24 +604,14 @@ export default {
           } else if (page === 'treeSpecies') {
             this.forestMarker.setLabel({
               direction: 'top',
-              offset: new AMap.Pixel(-2, 6), //设置文本标注偏移量
+              offset: new AMap.Pixel(0, 13), //设置文本标注偏移量
               content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
             });
           }
           this.map.add(this.forestMarker);
         }
       });
-      // console.log(page);
-      // if (page === 'forest') {
-      //   this.map.on('click', function (e) {
-      //     _this.map.remove(_this.forestMarker);
-      //   });
-      // }
     },
-    // markerClick(e, item) {
-    //   console.log(e);
-    //   console.log(item);
-    // },
     addTreeSpeciesPolygon() {
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
@@ -661,75 +625,75 @@ export default {
           zIndex: 999,
           cursor: 'pointer'
         });
+        this.map.add(polygon);
         var lanLatArr = [];
         polygon.on('mouseover', (e) => {
-          lanLatArr = [e.lnglat.lng, e.lnglat.lat];
-          rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
-            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({
-            position: lanLatArr,
-            icon: require('@/assets/img/small-marker.png'),
-            anchor: 'bottom-center',
-            offset: new AMap.Pixel(0, 0)
-          });
-          this.smallMarker.setLabel({
-            direction: 'top',
-            offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
-            content: treeSmallLabel //设置文本标注内容
-          });
-
-          this.smallMarker.setMap(this.map);
           polygon.setOptions({
             fillOpacity: 0.7,
             fillColor: 'yellow'
           });
         });
+        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)
+            });
+            this.smallMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+              content: treeSmallLabel //设置文本标注内容
+            });
+            this.treeCompMarkers.push(this.smallMarker);
+            // this.smallMarker.setMap(this.map);
+          });
+        });
         polygon.on('mouseout', () => {
-          if (this.smallMarker) {
-            this.smallMarker.setMap(null);
-            this.smallMarker = null;
-          }
+          this.map.remove(this.treeCompMarkers);
           polygon.setOptions({
             fillOpacity: 0,
             fillColor: '#ccebc5'
           });
         });
-        this.map.add(polygon);
       });
     },
     // 获取小班列表
@@ -833,7 +797,6 @@ export default {
     getEconomics() {
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
-        // console.log(polyData);
         let polygon = new AMap.Polygon({
           map: this.map,
           path: polyData.features[0].geometry.coordinates,
@@ -865,7 +828,6 @@ export default {
         countyId: this.$store.state.addr.selectDistrict.areaId,
         townId: this.$store.state.addr.selectStreet.areaId
       }).then((res) => {
-        console.log(res);
         let economicsList = [];
         let baseList = [];
         res.rows.forEach((element) => {
@@ -874,7 +836,6 @@ export default {
             latitude: element.cateLatitude,
             icon: element.image
           });
-          console.log(element.baseId);
           baseList.push({
             baseId: element.baseId,
             baseName: element.baseName,
@@ -950,7 +911,6 @@ export default {
                   offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                   content: treeSmallLabel //设置文本标注内容
                 });
-                console.log(res.data);
               }
             });
           });
@@ -966,70 +926,92 @@ export default {
       });
     },
     setMarker() {
-      let forestFarm = [
-        {
-          label: '清镇林场',
-          lng: '106.361446',
-          lat: '26.636267'
-        },
-        {
-          label: '榕江林场',
-          lng: '108.298933',
-          lat: '26.043956'
-        },
-        {
-          label: '三都林场',
-          lng: '107.992916',
-          lat: '26.008507'
-        }
-      ];
-      let parentMarker = require('@/assets/img/pre-marker.png');
-      forestFarm.forEach((item) => {
-        let lngLat = [item.lng, item.lat];
-        var marker = new AMap.Marker({
-          position: lngLat,
-          icon: parentMarker,
-          anchor: 'bottom-center',
-          offset: new AMap.Pixel(0, 0)
-        });
-        marker.setLabel({
-          direction: 'bottom',
-          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-          content: `<div>${item.label}</div>` //设置文本标注内容
+      let forestFarm = [];
+      farmInfo().then((res) => {
+        forestFarm = res.rows;
+        let parentMarker = require('@/assets/img/pre-marker.png');
+        forestFarm.forEach((item) => {
+          if (this.$store.state.addr.selectCity.label) {
+            if (this.$store.state.addr.selectCity.label == item.cityName) {
+              let lngLat = [item.longitude, item.latitude];
+              var marker = new AMap.Marker({
+                position: lngLat,
+                icon: parentMarker,
+                anchor: 'bottom-center',
+                offset: new AMap.Pixel(0, 0)
+              });
+              marker.setLabel({
+                direction: 'bottom',
+                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+                content: `<div>${item.forestName}</div>` //设置文本标注内容
+              });
+              marker.setMap(this.map);
+            }
+          } else {
+            let lngLat = [item.longitude, item.latitude];
+            var marker = new AMap.Marker({
+              position: lngLat,
+              icon: parentMarker,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0)
+            });
+            marker.setLabel({
+              direction: 'bottom',
+              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+              content: `<div>${item.forestName}</div>` //设置文本标注内容
+            });
+            marker.setMap(this.map);
+          }
         });
-        marker.setMap(this.map);
       });
     },
-    getrjx() {
-      axios
-        .get('http://127.0.0.1:8080/static/rongjangintown.json')
-        .then((res) => {
-          this.putPolygonData = res.data.features;
+    getrjx(adcode) {
+      this.putPolygonData = [];
+      if (adcode == '522632') {
+        axios.get('/static/rongjangintown.json').then((res) => {
+          this.putPolygon(res.data.features);
         });
+      } else if (adcode == '520181') {
+        axios.get('/static/qingzhenzhen.json').then((res) => {
+          this.putPolygon(res.data.features);
+        });
+      }
     },
-    putPolygon() {
+    putPolygon(putPolygonData) {
       let that = this;
-      this.putPolygonData.forEach((element) => {
-        let polygon = new AMap.Polygon({
+      putPolygonData.forEach((element) => {
+        this.boundaryPolygon = new AMap.Polygon({
           map: that.map,
           path: element.geometry.coordinates,
           strokeOpacity: 1,
           fillOpacity: 0,
-          strokeColor: 'blue',
+          strokeColor: 'yellow',
           strokeWeight: 1,
           zIndex: 999,
           cursor: 'pointer'
         });
-        that.townPolygons.push(polygon);
+        // polygon.on('mouseover', (e) => {
+        //     polygon.setOptions({
+        //       fillOpacity: 0.7,
+        //       fillColor: '#0dbc79'
+        //     });
+        //   });
+        //   polygon.on('mouseout', (e) => {
+        //     polygon.setOptions({
+        //       fillOpacity: 0,
+        //       fillColor: '#0dbc79'
+        //     });
+        //   });
+        that.townPolygons.push(this.boundaryPolygon);
         that.map.add(that.townPolygons);
 
-        polygon.on('click', (e) => {
+        this.boundaryPolygon.on('click', (e) => {
           this.smallClassMapArr = [];
-          console.log(e);
+          let centerLanLatArr = [e.lnglat.lng, e.lnglat.lat];
           that.map.remove(that.townPolygons);
           that.map.remove(that.polygon);
+          // that.map.remove(that.cityMarkerArr);
           that.districtExplorer.clearFeaturePolygons();
-          console.log();
           let valCode = element.properties.XIANG;
           let areaId = '';
           let label = element.properties.XIANG_NAME;
@@ -1061,9 +1043,9 @@ export default {
           });
           townPolygon.setPath(pathArray);
           that.map.add(townPolygon);
-          that.zoom = 12;
-          that.lngLat = [e.lnglat.lng, e.lnglat.lat];
-          console.log(this.leftPage);
+          that.map.setZoomAndCenter(13, centerLanLatArr, false, 12);
+
+          // that.map.setBounds(townPolygon.getBounds(), null, null, true);
           if (this.leftPage === 'forest') {
             this.addForestPolygon();
             this.getForestSample(this.leftPage);
@@ -1238,21 +1220,24 @@ export default {
   &::before {
     position: absolute;
     top: 26px;
-    left: 36%;
+    left: 42%;
     content: '';
     width: 0px;
     height: 0px;
-    border: 10px solid transparent;
+    border: 6px solid transparent;
     border-top-color: #05dfff;
   }
   .smallH {
     position: absolute;
-    top: 38px;
+    top: 34px;
     z-index: 99;
     display: block;
     color: #05dfff;
+    text-align: center;
     font-size: 14px;
-    left: 46%;
+    // left: 38%;
+    left: 0;
+    width: 100%;
   }
 }
 </style>

src/service/index.js

@@ -46,6 +46,14 @@ export const smallInfo = (data) =>
         prefixUrl: 'api2',
     })
 
+// 查询小班基本信息
+export const farmInfo = (data) =>
+    callApi({
+        url: 'forest/farm',
+        data,
+        prefixUrl: 'api2',
+    })
+
 // 查询统计概况
 export const page1numerical = (data) =>
     callApi({