地图修改

src/components/amapTow.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-10-19 09:32:46
  * @LastEditors: wangcc
- * @LastEditTime: 2022-11-01 14:41:59
+ * @LastEditTime: 2022-11-01 17:56:32
  * @FilePath: \castgroup_bigscreen\src\components\amapTow.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -112,6 +112,7 @@ export default {
         // 加载小班边界
         // this.getSmallClass();
         this.parentId = val;
+
         if (this.$store.state.addr.mapLevel == 'street') {
           this.parentId = val.substring(0, 6);
           if (this.map) {
@@ -209,6 +210,10 @@ export default {
     },
     '$store.state.addr.mapLevel': {
       handler(val) {
+        console.log(val);
+        if (val == 'province') {
+          this.changeSelectDistrict({});
+        }
         if (val === 'street') {
           this.getSmallClass();
         }
@@ -220,7 +225,12 @@ export default {
       handler: function (val, oldVal) {
         let _this = this;
         if (val) {
+          console.log(val);
           if (val.longitude && val.latitude && !val.name) {
+            this.map.remove(this.polygon);
+            if (_this.smallMarkers) {
+              _this.map.remove(_this.smallMarkers);
+            }
             let lanLatArr = [val.longitude, val.latitude];
             let imgList = [];
             if (val.imageList.length > 0) {
@@ -326,7 +336,58 @@ export default {
               offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
               content: smallLabel //设置文本标注内容
             });
+            this.smallMarker.on('click', (e) => {
+              this.smallMarker.setLabel({
+                direction: 'right',
+                offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
+                content: smallLabel //设置文本标注内容
+              });
+            });
             this.smallMarkers.push(_this.smallMarker);
+            console.log(this.$store.state.addr.mapLevel);
+            if (
+              this.$store.state.addr.mapLevel == 'city' ||
+              this.$store.state.addr.mapLevel == 'province'
+            ) {
+              if (val.countyCode) {
+                // this.switch2AreaNode(val.countyCode.substring(0, 6));
+                let selectCity = '';
+                switch (val.cityName) {
+                  case '黔西南州':
+                    selectCity = '黔西南布依族苗族自治州';
+                    break;
+                  case '黔东南州':
+                    selectCity = '黔东南苗族侗族自治州';
+                    break;
+                  case '黔南州':
+                    selectCity = '黔南布依族苗族自治州';
+                    break;
+                }
+                this.$store.dispatch('searchArea', {
+                  parentId: val.cityCode.substring(0, 6),
+                  name: selectCity,
+                  mapLevel: 'city'
+                });
+                if (val.cityCode) {
+                  this.changeSelectCity({
+                    value: val.cityCode,
+                    label: selectCity,
+                    areaId: val.cityId,
+                    prop: '2'
+                  });
+                }
+                if (val.countyCode) {
+                  this.changeSelectDistrict({
+                    value: val.countyCode,
+                    label: val.countyName,
+                    areaId: val.countyId,
+                    prop: '2'
+                  });
+                }
+              }
+            } else {
+              this.switch2AreaNode(val.countyCode.substring(0, 6));
+            }
           } else if (val.name == false && this.smallMarker) {
             this.map.on('rightclick', function (e) {
               _this.map.remove(_this.smallMarkers);
@@ -600,31 +661,31 @@ export default {
               });
             }
           }
-          if (
-            zoom > '9' &&
-            zoom < '9.5' &&
-            this.$store.state.addr.mapLevel == 'district'
-          ) {
-            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.state.addr.mapLevel == 'city'
-          ) {
-            this.$store.dispatch('searchArea', {
-              parentId: '520000',
-              name: '贵州省',
-              mapLevel: 'province'
-            });
-          }
+          // if (
+          //   zoom > '9' &&
+          //   zoom < '9.5' &&
+          //   this.$store.state.addr.mapLevel == 'district'
+          // ) {
+          //   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.state.addr.mapLevel == 'city'
+          // ) {
+          //   this.$store.dispatch('searchArea', {
+          //     parentId: '520000',
+          //     name: '贵州省',
+          //     mapLevel: 'province'
+          //   });
+          // }
         });
       });
     },
@@ -695,13 +756,15 @@ export default {
             this.changeSelectCity({
               value: valCode,
               label: props.name,
-              areaId: areaId
+              areaId: areaId,
+              prop: '1'
             });
           } else if (props.level == 'district') {
             this.changeSelectDistrict({
               value: valCode,
               label: props.name,
-              areaId: areaId
+              areaId: areaId,
+              prop: '1'
             });
           }
           if (this.projectMarkerArr) {
@@ -788,32 +851,35 @@ export default {
         strokeWeight: 2, //线宽
         fillOpacity: 0 //填充透明度
       });
-
-      // 绘制父级蒙版
       let areaPolygon = areaNode.getParentFeature();
-      let outer = [
-        new AMap.LngLat(-360, 90, true),
-        new AMap.LngLat(-360, -90, true),
-        new AMap.LngLat(360, -90, true),
-        new AMap.LngLat(360, 90, true)
-      ];
-      let areaPolygonArr = [];
-      areaPolygon.geometry.coordinates.forEach((element) => {
-        areaPolygonArr.push(element[0]);
-      });
-      let holes = areaPolygonArr;
-      let pathArray = [outer];
-      pathArray.push.apply(pathArray, holes);
-      this.polygon = new AMap.Polygon({
-        pathL: pathArray,
-        map: this.map,
-        strokeColor: '#00eeff',
-        strokeWeight: 1,
-        fillColor: '#0c1b05', // 遮罩背景色
-        fillOpacity: 0.8,
-        height: 10000
-      });
-      this.polygon.setPath(pathArray);
+        // 绘制父级蒙版
+      // if (this.$store.state.addr.mapLevel == 'province' || this.$store.state.addr.mapLevel == 'city') {
+        let outer = [
+          new AMap.LngLat(-360, 90, true),
+          new AMap.LngLat(-360, -90, true),
+          new AMap.LngLat(360, -90, true),
+          new AMap.LngLat(360, 90, true)
+        ];
+        let areaPolygonArr = [];
+        areaPolygon.geometry.coordinates.forEach((element) => {
+          areaPolygonArr.push(element[0]);
+        });
+        let holes = areaPolygonArr;
+        let pathArray = [outer];
+        pathArray.push.apply(pathArray, holes);
+        this.polygon = new AMap.Polygon({
+          pathL: pathArray,
+          map: this.map,
+          strokeColor: '#00eeff',
+          strokeWeight: 1,
+          fillColor: '#0c1b05', // 遮罩背景色
+          fillOpacity: 0.8,
+          height: 10000
+        });
+        this.polygon.setPath(pathArray);
+      // }
+        
+
       if (this.leftPage == 'forest' || this.leftPage == 'treeSpecies') {
         this.getProjectList();
       }

src/store/addr/index.js

@@ -123,6 +123,7 @@ const addr = {
     searchArea({ commit }, params = {}) {
       console.log("searchArea", params);
       searchApi({ parentId: params.parentId }).then(res => {
+        console.log(params.parentId);
         if (params.mapLevel == "city") {
           commit("changeDistrictList", res.data);
           commit("changeSelectDistrict", {});

src/views/index.vue

@@ -2,9 +2,9 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: gcz
- * @LastEditTime: 2022-11-01 15:34:12
- * @FilePath: \ntbigscreen\src\views\index.vue
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-11-01 17:33:36
+ * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
@@ -184,7 +184,6 @@
             :config="scrollBoardConfig"
             ref="scrollBoard"
             @click="scrollBoardClick"
-            @mouseout="scrollOut"
             :style="scrollBoardStyle"
           />
           <dv-scroll-board
@@ -211,7 +210,7 @@
 </template>
 
 <script>
-import Map from '../components/amapnow.vue';
+import Map from '../components/amapTow.vue';
 import Header from '../components/header';
 import MyEcharts from '../components/echarts';
 import Numerical from '../components/numerical';
@@ -292,7 +291,7 @@ export default {
           name: '小班查询'
         }
       ],
-      rowList:[],
+      rowList: [],
       cur: 0,
       showxiaoban: true,
       showbase: false,
@@ -413,7 +412,8 @@ export default {
     '$store.state.addr.mapLevel': {
       handler(val) {
         console.log(val);
-        if (val === 'city') {
+        console.log(this.$store.state.addr.selectCity.prop);
+        if (val === 'city' && this.$store.state.addr.selectCity.prop == '2') {
           this.jumpDistrict();
         }
       }
@@ -1182,7 +1182,6 @@ export default {
       this.getPageData();
     },
     scrollBoardClick(e) {
-      
       let param = {
         id: e.row[4]
       };
@@ -1210,14 +1209,16 @@ export default {
         // }
       });
     },
-    removeAllClass(className){
+    removeAllClass(className) {
       //找到所有包含className的结点
-      let nodeList = document.querySelectorAll(`.dv-scroll-board .${className}`);
+      let nodeList = document.querySelectorAll(
+        `.dv-scroll-board .${className}`
+      );
       // let nodeList = document.getElementsByClassName('row-item');
       //删除这些标签对应的class
-      Array.prototype.forEach.call(nodeList,(el)=>{
-          el.classList.remove(className)
-      })
+      Array.prototype.forEach.call(nodeList, (el) => {
+        el.classList.remove(className);
+      });
     },
     scrollProjectClick(e) {
       // 点击添加class
@@ -1230,15 +1231,15 @@ export default {
       //           el.classList.remove(className)
       //       })
       //   }
-      
+
       let proClass = document.getElementsByClassName('row-item');
       // proClass[e.rowIndex].style.background = 'rgb(4, 145, 110)';
-      this.removeAllClass("active");
-      proClass[e.rowIndex].classList.add("active");
+      this.removeAllClass('active');
+      proClass[e.rowIndex].classList.add('active');
 
       let rowId = e.row[4];
       let param = {
-        courseId: rowId,
+        courseId: rowId
         // pageNum: 1,
         // pageSize: 20
       };
@@ -1257,8 +1258,6 @@ export default {
               label: this.alarData.cityName,
               areaId: element.areaId
             });
-            console.log(element.areaCode.substring(0, 6));
-            console.log(element.areaName);
             this.$store.dispatch('searchArea', {
               parentId: element.areaCode.substring(0, 6),
               name: element.areaName,
@@ -1304,8 +1303,8 @@ export default {
     },
     tabLink(e) {
       this.cur = e;
-      if(this.cur=='1'){
-        this.removeAllClass("active");
+      if (this.cur == '1') {
+        this.removeAllClass('active');
       }
     },
     classFunc(index) {