1.综合分析底图切换功能

src/components/common/BottomForm/SameScreenComparison.vue

@@ -189,6 +189,7 @@ export default {
               active: v.c_defined_show ? v.c_defined_show : false,
               basemapType: v.basemap,
               year: v.c_year,
+              abbr:v.c_abbr
             });
           });
           this.mapList = map2DViewer.baseMapCollection.map((v) => {

src/views/ComprehensiveAnalysis.vue

@@ -6,7 +6,58 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
   >
-    <BasemapChange style="pointer-events: auto" />
+    <div class="comprehensive-analysis-basemapswitch">
+      <div
+        class="basemapBox"
+        :style="{
+          backgroundImage: 'url(' + baseMapCollectionArr[0].imgUrl + ')',
+        }"
+        @mouseenter="showMapList(baseMapCollectionArr[0].type)"
+      >
+        <div class="basemapBox-titlebox">
+          {{ baseMapCollectionArr[0].type }}
+        </div>
+        <div
+          class="basemapBox-panel"
+          v-show="satImgChecked"
+          @mouseleave="closePanelEvent"
+        >
+          <div
+            class="panel-item"
+            v-for="item in mapList[baseMapCollectionArr[0].type]"
+            :key="item.mapName"
+            @click="changeBaseMap(item)"
+          >
+            {{ item.abbr }}
+          </div>
+        </div>
+      </div>
+      <div
+        class="basemapBox"
+        :style="{
+          backgroundImage: 'url(' + baseMapCollectionArr[1].imgUrl + ')',
+        }"
+        @mouseenter="showMapList(baseMapCollectionArr[1].type)"
+      >
+        <div class="basemapBox-titlebox">
+          {{ baseMapCollectionArr[1].type }}
+        </div>
+        <div
+          class="basemapBox-panel"
+          v-show="airImgChecked"
+          @mouseleave="closePanelEvent"
+        >
+          <div
+            class="panel-item"
+            v-for="item in mapList[baseMapCollectionArr[1].type]"
+            :key="item.mapName"
+            @click="changeBaseMap(item)"
+          >
+            {{ item.abbr }}
+          </div>
+        </div>
+      </div>
+    </div>
     <LawPopup class="comprehensive-analysis-law-popup" />
     <LabelCasePopup
       class="comprehensive-analysis-label-popup"
@@ -327,7 +378,6 @@ import publicFun from "@/utils/publicFunction.js";
 import AttributePopup from "@/components/popup/AttributePopup.vue";
 import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
 import LawPopup from "@/components/popup/LawPopup.vue";
-import BasemapChange from "@/components/map/BasemapChange.vue";
 import { nextTick } from "vue";
 export default {
   name: "ComprehensiveAnalysis",
@@ -339,10 +389,28 @@ export default {
     LabelCasePopup,
     Pagination,
     NewSelect,
-    BasemapChange,
   },
   data() {
     return {
+      satImgChecked: false,
+      airImgChecked: false,
+      basemapChecked: "",
+      mapList: {
+        卫星影像: [],
+        航空影像: [],
+      },
+      baseMapCollectionArr: [
+        {
+          id: 1,
+          type: "卫星影像",
+          imgUrl: require("../assets/map/卫星影像.png"),
+        },
+        {
+          id: 2,
+          type: "航空影像",
+          imgUrl: require("../assets/map/航空影像.png"),
+        },
+      ],
       showJLInfo: false,
       // 存储图斑颜色
       collectColorMap: new Map(),
@@ -764,6 +832,22 @@ export default {
     this.$bus.$off("openMyView");
   },
   methods: {
+    closePanelEvent() {
+      this.satImgChecked = false;
+      this.airImgChecked = false;
+    },
+    changeBaseMap(data) {
+      if (map2DViewer.map.hasLayer(map2DViewer.layers["imagery"])) {
+        map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
+        map2DViewer.layers["imagery"] = L.esri.tiledMapLayer({
+          tileSize: 512,
+          url: data.mapUrl,
+        });
+        map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
+      }
+      this.satImgChecked = false;
+      this.airImgChecked = false;
+    },
     // 勾选镇时默认展开当前镇
     changeTownEvent(val) {
       if (this.townSelectTreeMap.has(val)) {
@@ -810,6 +894,23 @@ export default {
         }
       }
     },
+    showMapList(val) {
+      if (val === "卫星影像" && map2DViewer.baseMapCollection.length > 0) {
+        this.mapList["卫星影像"] = map2DViewer.baseMapCollection.filter((v) => {
+          return v.basemapType === "1";
+        });
+        this.satImgChecked = true;
+        this.airImgChecked = false;
+      }
+
+      if (val === "航空影像" && map2DViewer.baseMapCollection.length > 0) {
+        this.mapList["航空影像"] = map2DViewer.baseMapCollection.filter((v) => {
+          return v.basemapType === "2";
+        });
+        this.satImgChecked = false;
+        this.airImgChecked = true;
+      }
+    },
     // 清除页面所有数据
     clearAllData() {
       this.currentTotal = 0;
@@ -2108,6 +2209,77 @@ export default {
     }
   }
 
+  &-basemapswitch {
+    width: 300px;
+    height: 80px;
+    // border: 1px solid black;
+    position: absolute;
+    right: 420px;
+    bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    pointer-events: auto;
+    .basemapBox {
+      cursor: pointer;
+      border-radius: 5px;
+      width: 120px;
+      height: 75px;
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      background-repeat: no-repeat;
+      background-size: 99% 98%;
+      position: relative;
+      &-titlebox {
+        width: 70px;
+        height: 30px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        background: rgba(20, 20, 20, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 14px;
+      }
+      &-panel {
+        width: 100px;
+        height: 150px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+        position: absolute;
+        left: 0;
+        top: -160px;
+        background: url("../assets/map/basemap-list-back.png") no-repeat center;
+        overflow: auto;
+        .panel-item {
+          width: 100%;
+          height: 30px;
+          color: rgba(255, 255, 255, 0.6);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+          font-size: 14px;
+          &:hover {
+            color: rgb(0, 170, 255, 0.4);
+          }
+        }
+      }
+
+      &:hover {
+        box-shadow: 0 2px 15px 3px rgb(0, 170, 255, 0.6);
+        & > div:nth-child(2) {
+          border: 1px solid rgb(0, 170, 255, 0.4);
+        }
+        & > div:nth-child(1) {
+          background: rgb(0, 170, 255, 0.4);
+          color: rgba(20, 20, 20, 1);
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
   &-backbtn {
     width: 120px;
     height: 35px;