图层切换添加完成

ui/packages/tools/AiTMap.vue

@@ -1,6 +1,10 @@
 <template>
   <section class="AiTMap">
     <div ref="tmap" class="map"/>
+    <div class="mapLayerSwitcher" flex>
+      <div class="item" :class="{current:mapType=='vector'}" @click="mapType='vector'"/>
+      <div class="item satellite" :class="{current:mapType=='satellite'}" @click="mapType='satellite'"/>
+    </div>
   </section>
 </template>
 
@@ -33,7 +37,13 @@ export default {
   data() {
     return {
       tmap: null,
-      mapLib: null
+      mapLib: null,
+      mapType: 'vector'
+    }
+  },
+  watch: {
+    mapType(type) {
+      this.tmap?.setBaseMap({type})
     }
   },
   computed: {
@@ -142,8 +152,9 @@ export default {
   flex: 1;
   min-width: 0;
   min-height: 0;
+  position: relative;
 
-  :deep(.map ){
+  :deep(.map ) {
     height: 100%;
 
     & > div > div {
@@ -152,5 +163,72 @@ export default {
       }
     }
   }
+
+  .mapLayerSwitcher {
+    position: absolute;
+    z-index: 202304061607;
+    bottom: 20px;
+    right: 12px;
+    background-color: #fff;
+    padding: 5px;
+    width: fit-content;
+    height: 56px;
+    box-sizing: content-box;
+    overflow: hidden;
+    transition: width 2s ease;
+    gap: 10px;
+
+    &:hover {
+      .item {
+        display: block;
+      }
+    }
+
+    .item {
+      position: relative;
+      width: 80px;
+      height: 56px;
+      border: 1px dashed #ddd;
+      cursor: pointer;
+      flex-shrink: 0;
+      background-image: url("https://cdn.cunwuyun.cn/map/defaultMap.png");
+      box-sizing: border-box;
+      color: #fff;
+      background-size: 100%;
+      display: none;
+
+      &.current {
+        border: 1px solid #366FFF;
+        display: block !important;
+
+        &:before {
+          background-color: #366FFF;
+        }
+      }
+
+      &:hover {
+        border-color: #333;
+      }
+
+      &:before {
+        font-size: 12px;
+        line-height: 18px;
+        padding: 0 3px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        content: "地图";
+        user-select: none;
+      }
+
+      &.satellite {
+        background-image: url("https://cdn.cunwuyun.cn/map/satelliteMap.png");
+
+        &:before {
+          content: "卫星"
+        }
+      }
+    }
+  }
 }
 </style>