大屏地图数据联动

src/components/amap.vue

@@ -6,7 +6,7 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { smallClassMap } from '@/service/index.js';
+import { smallClassMap, forestSample } from '@/service/index.js';
 import { mapMutations, mapState, mapGetters } from 'vuex';
 export default {
   name: 'amap',
@@ -34,19 +34,21 @@ export default {
     this.initAMap();
   },
   watch: {
-    '$store.state.addr.parentId'(val) {
-      if (this.map) {
-        this.switch2AreaNode(val);
-        this.getDistrict(
-          this.$store.state.addr.parentName,
-          this.$store.state.addr.mapLevel
-        );
-        this.map.clearMap();
+    '$store.state.addr.parentId': {
+      handler(val) {
+        if (this.map) {
+          this.switch2AreaNode(val, this.$store.state.addr.mapLevel);
+          this.getDistrict(
+            this.$store.state.addr.parentName,
+            this.$store.state.addr.mapLevel
+          );
+          this.map.clearMap();
+        }
       }
     }
   },
   computed: {
-    ...mapGetters(['vuexSelectCity', 'vuexSelectDistrict', 'vuexSelectStreet'])
+    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
   },
   created() {
     this.getSmallClass();
@@ -201,15 +203,31 @@ export default {
           mapLevel: props.level
         });
         let valCode = props.adcode + '000000';
+        let areaId = '';
+        this.vuexCityList.forEach((item) => {
+          if (valCode == item.areaCode) {
+            areaId = item.areaId;
+          }
+        }); 
+        this.vuexDistrictList.forEach((item) => {
+          if (valCode == item.areaCode) {
+            areaId = item.areaId;
+          }
+        }); 
         if (props.level == 'city') {
-          this.changeSelectCity({ value: valCode, label: props.name });
+          this.changeSelectCity({
+            value: valCode,
+            label: props.name,
+            areaId: areaId
+          });
         } else if (props.level == 'district') {
-          this.changeSelectDistrict({ value: valCode, label: props.name });
+          this.changeSelectDistrict({
+            value: valCode,
+            label: props.name,
+            areaId: areaId
+          });
         }
-        // this.$store.commit('changeSelectCity', {value:props.adcode,label:props.name})
-        console.log(this.$store.state.addr);
       });
-      console.log(this.$store.state.addr);
       this.switch2AreaNode(adcode);
       that.getDistrict(adName, mapLevel);
     },
@@ -276,7 +294,7 @@ export default {
       this.renderAreaPolygons(areaNode);
     },
     //切换区域
-    switch2AreaNode(adcode, callback) {
+    switch2AreaNode(adcode, mapLevel, callback) {
       if (
         this.currentAreaNode &&
         '' + this.currentAreaNode.getAdcode() === '' + adcode
@@ -292,7 +310,9 @@ export default {
         }
 
         this.currentAreaNode = areaNode;
-        this.addPolygon();
+        if (mapLevel === 'district') {
+          this.addPolygon();
+        }
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
         this.refreshAreaNode(areaNode);
@@ -325,6 +345,7 @@ export default {
       });
     },
     addPolygon() {
+      let that = this;
       this.smallClassMapArr.forEach((item) => {
         let polyData = JSON.parse(item.mapInfo);
         let polygon = new AMap.Polygon({
@@ -395,6 +416,14 @@ export default {
         });
         this.map.add(polygon);
       });
+      forestSample().then((res) => {
+        res.rows.forEach((item) => {
+          let zoom = this.map.getZoom();
+          let pixel = new AMap.Pixel(item.longitude, item.latitude);
+          item.lnglat = this.map.pixelToLngLat(pixel, zoom);
+        });
+        console.log(res.rows);
+      });
     },
     setMarker() {}
   }