修改地图下转选择

src/components/amapPow.vue

@@ -2,8 +2,8 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-10-19 09:32:46
- * @LastEditors: wangcc
- * @LastEditTime: 2022-11-09 17:54:57
+ * @LastEditors: wangcc 1053578651@qq.com
+ * @LastEditTime: 2022-11-10 20:21:49
  * @FilePath: \castgroup_bigscreen\src\components\amapPow.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -962,10 +962,11 @@ export default {
       // this.getSmallClass();
       let _this = this;
       //更新地图视野
-      if (this.$store.state.addr.mapLevel == 'city' ||
-              this.$store.state.addr.mapLevel == 'province') {
+      console.log(this.$store.state.addr.selectCity.prop);
+      console.log(this.$store.state.addr.mapLevel);
+      if ((this.$store.state.addr.selectCity.prop == '1' && this.$store.state.addr.mapLevel != 'street') || this.$store.state.addr.mapLevel == 'province') {
         this.map.setBounds(areaNode.getBounds(), null, null, false);
-      }else{
+      } else if (this.$store.state.addr.selectCity.prop == '2' && this.$store.state.addr.mapLevel != 'province') {
         this.map.setFitView(this.smallMarker, false, false, 14);
       }
       // 加载相关标识
@@ -1266,7 +1267,7 @@ export default {
 
         this.boundaryPolygon.on('click', (e) => {
           let centerLanLatArr = [e.lnglat.lng, e.lnglat.lat];
-          // that.map.remove(that.townPolygons);
+          that.map.remove(that.townPolygons);
           // that.districtExplorer.clearFeaturePolygons();
           let valCode = element.properties.XIANG;
           let areaId = '';
@@ -1279,7 +1280,8 @@ export default {
           this.changeSelectStreet({
             value: valCode,
             label: label,
-            areaId: areaId
+            areaId: areaId,
+            prop: '1'
           });
           this.changeSelectAddr('street');
           this.$store.dispatch('searchArea', {
@@ -1287,14 +1289,14 @@ export default {
             name: label,
             mapLevel: 'street'
           });
-          // let townPolygon = new AMap.Polygon({
-          //   map: that.map,
-          //   path: element.geometry.coordinates,
-          //   strokeColor: 'yellow',
-          //   strokeWeight: 3,
-          //   fillOpacity: 0
-          // });
-          // this.townPolygonArr.push(townPolygon);
+          let townPolygon = new AMap.Polygon({
+            map: that.map,
+            path: element.geometry.coordinates,
+            strokeColor: 'yellow',
+            strokeWeight: 3,
+            fillOpacity: 0
+          });
+          this.townPolygonArr.push(townPolygon);
           that.map.setZoomAndCenter(14, centerLanLatArr, false, 13);
         });
         that.boundaryPolygon.on('rightclick', function (e) {
@@ -2001,10 +2003,12 @@ export default {
 #container {
   width: 100%;
   height: 100vh;
+
   /deep/ .tdt-pane {
     z-index: auto;
   }
 }
+
 /deep/ .amap-marker-content {
   .tipMarker {
     color: #555;
@@ -2014,6 +2018,7 @@ export default {
     font-size: 12px;
     white-space: nowrap;
     display: inline-block;
+
     &:before,
     &:after {
       content: '';
@@ -2025,8 +2030,10 @@ export default {
       border: solid transparent;
       border-width: 5px 5px;
     }
+
     &.top {
       transform: translate(-50%, -110%);
+
       &:before,
       &:after {
         bottom: -9px;
@@ -2034,6 +2041,7 @@ export default {
         right: 0;
         border-top-color: rgba(255, 254, 239, 0.8);
       }
+
       &:before {
         bottom: -10px;
         border-top-color: #7e7e7e;
@@ -2041,14 +2049,17 @@ export default {
     }
   }
 }
+
 /deep/ .amap-logo,
 .amap-copyright {
   display: block !important;
   visibility: inherit !important;
 }
+
 /deep/ .amap-icon {
   overflow: unset !important;
 }
+
 /deep/ .info-small {
   background-image: url('../assets/img/small-label.png');
   background-repeat: no-repeat;
@@ -2056,12 +2067,15 @@ export default {
   width: 18rem;
   // 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;
@@ -2070,6 +2084,7 @@ export default {
     }
   }
 }
+
 /deep/ .info-details {
   background-image: url('../assets/img/small-label.png');
   background-repeat: no-repeat;
@@ -2078,14 +2093,17 @@ export default {
   padding-bottom: 13px;
   // height: 10rem;
   color: #fff;
+
   .marker-title {
     margin: 0 auto;
     line-height: 50px;
   }
+
   .marker-content {
     display: flex;
     justify-content: space-between;
     padding: 0 20px 0 20px;
+
     .marker-span {
       display: block;
     }
@@ -2097,18 +2115,22 @@ export default {
       line-height: 18px;
     }
   }
+
   .imgList {
     display: block;
     text-align: left;
     padding: 0 20px;
+
     .marker-span {
       display: block;
     }
+
     .marker-imgs {
       display: block;
       line-height: 18px !important;
       width: 376px;
       overflow: auto;
+
       img {
         width: 40px;
         height: 40px;
@@ -2116,17 +2138,20 @@ export default {
         cursor: pointer;
       }
     }
+
     .marker-imgs::-webkit-scrollbar {
       background: transparent;
       opacity: 0.6px;
       width: 10px;
       height: 8px;
     }
+
     .marker-imgs::-webkit-scrollbar-thumb {
       background: rgba($color: #07a2eb8e, $alpha: 0.6);
       border-radius: 20px;
       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     }
+
     .marker-imgs::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
@@ -2152,25 +2177,26 @@ export default {
   top: 0;
   pointer-events: none;
 }
+
 @keyframes imageAnimation_32630606 {
   0% {
     // opacity: 0;
     transform: none;
   }
+
   34% {
     // opacity: 1;
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
-      translate3d(34vw, 0px, 0px);
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(34vw, 0px, 0px);
   }
+
   67% {
     // opacity: 1;
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
-      translate3d(67vw, 0px, 0px);
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(67vw, 0px, 0px);
   }
+
   100% {
     // opacity: 0;
-    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
-      translate3d(160vw, 0px, 0px);
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(160vw, 0px, 0px);
   }
 }
 
@@ -2181,6 +2207,7 @@ export default {
   width: 100vw;
   pointer-events: none;
 }
+
 .yun {
   position: fixed;
   left: -500px;
@@ -2193,16 +2220,19 @@ export default {
   filter: none;
   pointer-events: none;
 }
+
 .yun2 {
   bottom: 20px;
   animation-duration: 90s;
   animation-delay: 10s;
 }
+
 .yun3 {
   top: 100px;
   animation-duration: 120s;
   animation-delay: 15s;
 }
+
 /deep/ .label-treecomp {
   position: relative;
   background-color: #05dfff;
@@ -2211,6 +2241,7 @@ export default {
   border-radius: 8px;
   font-size: 14px;
   text-align: center;
+
   &::before {
     position: absolute;
     top: 26px;
@@ -2221,6 +2252,7 @@ export default {
     border: 6px solid transparent;
     border-top-color: #05dfff;
   }
+
   .smallH {
     position: absolute;
     top: 34px;