小班边界接口对接

config/index.js

@@ -31,7 +31,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

src/components/amap.vue

@@ -6,7 +6,8 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { smallClassMap } from "@/service/index.js";
+import { smallClassMap } from '@/service/index.js';
+import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
   name: 'amap',
   data() {
@@ -22,7 +23,9 @@ export default {
       districtExplorer: null,
       tipMarker: null,
       $tipMarkerContent: null,
-      currentAreaNode: null
+      currentAreaNode: null,
+      smallClassMapArr: [],
+      smallMarker: null
     };
   },
 
@@ -32,17 +35,28 @@ export default {
   },
   watch: {
     '$store.state.addr.parentId'(val) {
-      console.log(val);
       if (this.map) {
         this.switch2AreaNode(val);
-        this.getDistrict(this.$store.state.addr.parentName, this.$store.state.addr.mapLevel);
+        this.getDistrict(
+          this.$store.state.addr.parentName,
+          this.$store.state.addr.mapLevel
+        );
         this.map.clearMap();
       }
-      
     }
   },
-  created() {},
+  computed: {
+    ...mapGetters(['vuexSelectCity', 'vuexSelectDistrict', 'vuexSelectStreet'])
+  },
+  created() {
+    this.getSmallClass();
+  },
   methods: {
+    ...mapMutations([
+      'changeSelectCity',
+      'changeSelectDistrict',
+      'changeSelectStreet'
+    ]),
     initAMap() {
       let _this = this;
       window._AMapSecurityConfig = {
@@ -78,6 +92,7 @@ export default {
             _this.loadMapData(DistrictExplorer, $);
           }
         );
+
         // this.$nextTick(() => {
         //   // this.getDistrict()
         // });
@@ -173,16 +188,26 @@ export default {
       var adcode = '520000';
       //feature被点击
       this.districtExplorer.on('featureClick', (e, feature) => {
-        that.map.clearMap();
+        // that.map.clearMap();
         const props = feature.properties;
-        console.log(props);
         mapLevel = props.level;
         adName = props.name;
+
         // that.getDistrict(adName, mapLevel);
-         // this.switch2AreaNode(props.adcode);
-        this.$store.dispatch('searchArea', { parentId: props.adcode ,name:props.name,mapLevel:props.level});
+        // this.switch2AreaNode(props.adcode);
+        this.$store.dispatch('searchArea', {
+          parentId: props.adcode,
+          name: props.name,
+          mapLevel: props.level
+        });
+        let valCode = props.adcode + '000000';
+        if (props.level == 'city') {
+          this.changeSelectCity({ value: valCode, label: props.name });
+        } else if (props.level == 'district') {
+          this.changeSelectDistrict({ value: valCode, label: props.name });
+        }
         // this.$store.commit('changeSelectCity', {value:props.adcode,label:props.name})
-        console.log( this.$store.state.addr);
+        console.log(this.$store.state.addr);
       });
       console.log(this.$store.state.addr);
       this.switch2AreaNode(adcode);
@@ -252,7 +277,6 @@ export default {
     },
     //切换区域
     switch2AreaNode(adcode, callback) {
-      console.log(adcode);
       if (
         this.currentAreaNode &&
         '' + this.currentAreaNode.getAdcode() === '' + adcode
@@ -266,7 +290,9 @@ export default {
           }
           return;
         }
+
         this.currentAreaNode = areaNode;
+        this.addPolygon();
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
         this.refreshAreaNode(areaNode);
@@ -291,9 +317,86 @@ export default {
         }
       });
     },
-    // getSmallClass() {
-    //   smallClassMap
-    // }
+    getSmallClass() {
+      let that = this;
+      smallClassMap().then((res) => {
+        // console.log(res.rows);
+        this.smallClassMapArr = res.rows;
+      });
+    },
+    addPolygon() {
+      this.smallClassMapArr.forEach((item) => {
+        let polyData = JSON.parse(item.mapInfo);
+        let polygon = new AMap.Polygon({
+          map: this.map,
+          path: polyData.features[0].geometry.coordinates,
+          // fillColor: 'red',
+          strokeOpacity: 1,
+          fillOpacity: 0,
+          strokeColor: 'red',
+          strokeWeight: 2,
+          zIndex: 999,
+          cursor: 'pointer'
+          // strokeStyle: 'dashed',
+          // strokeDasharray: [5, 5]
+        });
+        var lanLatArr = [];
+
+        polygon.on('mouseover', (e) => {
+          lanLatArr = [e.lnglat.lng, e.lnglat.lat];
+          let smallLabel =
+            "<div class='info-small'>" +
+            "<h5 class='marker-title'>" +
+            item.countyName +
+            '-' +
+            item.smallNumber +
+            '</h5>' +
+            "<div class='marker-content'>" +
+            '<p>小班号：' +
+            item.smallNumber +
+            '</p>' +
+            '<p>样地数：' +
+            item.sampleCount +
+            '</p>' +
+            '<p>村（林班）：' +
+            polyData.features[0].properties.CUN +
+            '</p>' +
+            '<p>乡镇（林场）：' +
+            item.townName +
+            '</p>' +
+            '</div>' +
+            '</div>';
+          this.smallMarker = new AMap.Marker({
+            position: lanLatArr,
+            icon: require('@/assets/img/small-marker.png'),
+            anchor: 'bottom-center',
+            offset: new AMap.Pixel(0, 0)
+          });
+          this.smallMarker.setLabel({
+            direction: 'right',
+            offset: new AMap.Pixel(-150, -90), //设置文本标注偏移量
+            content: smallLabel //设置文本标注内容
+          });
+          this.smallMarker.setMap(this.map);
+          polygon.setOptions({
+            fillOpacity: 0.7,
+            fillColor: 'yellow'
+          });
+        });
+        polygon.on('mouseout', () => {
+          if (this.smallMarker) {
+            this.smallMarker.setMap(null);
+            this.smallMarker = null;
+          }
+          polygon.setOptions({
+            fillOpacity: 0,
+            fillColor: '#ccebc5'
+          });
+        });
+        this.map.add(polygon);
+      });
+    },
+    setMarker() {}
   }
 };
 </script>
@@ -347,4 +450,33 @@ export default {
   display: block !important;
   visibility: inherit !important;
 }
+/deep/ .amap-icon img {
+  max-width: 2rem !important;
+  max-height: 2rem !important;
+}
+/deep/ .info-small {
+  background-image: url('../assets/img/small-label.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 16rem;
+  height: 10rem;
+  color: #fff;
+  .marker-title {
+    margin: 0 auto;
+    line-height: 30px;
+  }
+  .marker-content {
+    padding: 0 20px 10px 20px;
+    p {
+      text-align: left;
+      font-size: 12px;
+      margin: 0;
+      line-height: 28px;
+    }
+  }
+}
+/deep/ .amap-marker-label {
+  border: 0;
+  background-color: transparent;
+}
 </style>

src/components/map.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-06-10 11:51:36
  * @LastEditors: wangcc
- * @LastEditTime: 2022-06-14 18:02:29
+ * @LastEditTime: 2022-06-16 09:31:01
  * @FilePath: \castgroup_bigscreen\src\components\map.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -96,7 +96,9 @@ export default {
       'vuexSelectStreet'
     ])
   },
-  created() {},
+  created() {
+    
+  },
   mounted() {
     this.initMap();
     // setTimeout(() => {

src/components/pickerAddr.vue

@@ -27,7 +27,7 @@
     </div>
     <div class="select-wrap">
       乡：
-      <el-select v-model="selectStreet" placeholder="请选择">
+      <el-select v-model="selectStreet" placeholder="请选择" >
         <el-option
           v-for="item in vuexStreetList"
           :key="item.areaCode"
@@ -40,9 +40,14 @@
 </template>
 
 <script>
-import { mapMutations, mapGetters } from 'vuex';
+import { mapMutations,mapState, mapGetters } from 'vuex';
 
 export default {
+  // props:{
+  //   selectCity:{},
+  //   selectDistrict:{},
+  //   selectStreet: {}
+  // },
   name: '',
   components: {},
   data() {
@@ -55,24 +60,37 @@ export default {
       name: ''
     };
   },
+  watch: {
+    '$store.state.addr.selectCity'(val) {
+      this.selectCity = val
+    },
+    '$store.state.addr.selectDistrict'(val) {
+      this.selectDistrict = val
+    }
+  },
   computed: {
     // 引入getters中的计算属性，需要在 computed 中引入
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
   },
   created() {
-    this.$store.dispatch('searchArea', { parentId: this.parentId ,name:this.name});
+    this.$store.dispatch('searchArea', {
+      parentId: this.parentId,
+      name: this.name
+    });
   },
+  mounted() {},
   methods: {
-    ...mapMutations([
-      'changeSelectCity',
-      'changeSelectDistrict',
-      'changeSelectStreet'
-    ]),
     cityChange(val, level) {
-      this.parentId = val.value.substring(0,6);
+      console.log(val);
+      this.parentId = val.value.substring(0, 6);
       this.name = level;
-      this.$store.dispatch('searchArea', { parentId: this.parentId ,name:val.label,mapLevel:level});
-    }
+      this.$store.dispatch('searchArea', {
+        parentId: this.parentId,
+        name: val.label,
+        mapLevel: level
+      });
+    },
+    getSelectModel() {}
   }
 };
 </script>

src/store/addr/index.js

@@ -4,8 +4,9 @@
 import { searchApi } from "@/service/index.js";
 const addr = {
   state: {
-    parentId: "156052",
+    parentId: "",
     parentName: '',
+    mapLevel: '',
     vuexSelectCity: "",
     vuexSelectDistrict: "",
     vuexSelectStreet: "",
@@ -34,15 +35,15 @@ const addr = {
     },
     // 城市选择data
     changeSelectCity(state, cityData) {
-      state.vuexSelectCity = cityData;
+      state.selectCity = cityData;
     },
     // 区县选择data
     changeSelectDistrict(state, districtData) {
-      state.vuexSelectDistrict = districtData;
+      state.selectDistrict = districtData;
     },
     // 乡镇选择data
     changeSelectStreet(state, streetData) {
-      state.vuexSelectStreet = streetData;
+      state.selectStreet = streetData;
     },
     // 改变省市县级联选择获取数据
     changeParentId(state, n) {
@@ -58,13 +59,10 @@ const addr = {
       searchApi({ parentId: params.parentId }).then(res => {
         if (params.mapLevel == "city") {
           commit("changeDistrictList", res.data);
-          commit("changeSelectDistrict",{value:params.parentId,label:params.name})
         } else if (params.mapLevel == "district") {
           commit("changeStreetList", res.data);
-          commit("changeSelectStreet",{value:params.parentId,label:params.name})
         } else {
           commit("changeCityList", res.data);
-          commit("changeSelectCity",{value:params.parentId,label:params.name})
         }
         commit("changeParentId", params)
       });

src/store/getters.js

@@ -7,9 +7,9 @@ const getters = {
     vuexCityList: state => state.addr.vuexCityList,
     vuexDistrictList: state => state.addr.vuexDistrictList,
     vuexStreetList: state => state.addr.vuexStreetList,
-    vuexSelectCity: state => state.addr.vuexSelectCity,
-    vuexSelectDistrict: state => state.addr.vuexSelectDistrict,
-    vuexSelectStreet: state => state.addr.vuexSelectStreet,
+    selectCity: state => state.addr.selectCity,
+    selectDistrict: state => state.addr.selectDistrict,
+    selectStreet: state => state.addr.selectStreet,
 }
 
 export default getters