切换底图组件

src/components/static_map_change/Layers.js

@@ -53,7 +53,7 @@ class StaticMapLayers {
                     that.layerData[key] = {legend:item.legend, layer:that.addStaticImgLayer(map, item)}
                 }
             }
-            // that.autoTest()
+            that.autoTest()
         })
     }
     show(key,isFit = false){
@@ -120,9 +120,10 @@ class StaticMapLayers {
             keys.push(key)
         }
         let index = 0
-        setInterval(() => {
-            that.show(keys[index],true)
+        setTimeout(() => {
+            that.show("作物种类",true)
             index = (index + 1) % keys.length
+
         }, 2000);
     }
 }

src/components/static_map_change/legend.vue

@@ -1,21 +1,26 @@
 <template>
-  <div class="map-legend">
-    <img v-if="legendImg" :src="legendImg" />
-    <template v-else >
-      <div class="color-bar" v-if="background"  :style="{ background: background }"></div>
-      <div class="labels">
-        <div
-            class="level"
-            v-for="(level, index) in levels"
-            :key="index"
-            :style="{ left: `${(index / (levels.length - 1)) * 100}%` }"
-        >
-          {{ level }}
+  <div class="legend-container">
+    <div class="legend-big">
+      <div class="color-bar-big" v-if="background" :style="{ background: background }"></div>
+    </div>
+    <div class="legend">
+      <img v-if="legendImg" :src="legendImg" />
+      <template v-else>
+        <div class="color-bar" v-if="background" :style="{ background: background }"></div>
+        <div class="labels">
+          <div
+              class="level"
+              v-for="(level, index) in levels"
+              :key="index"
+              :style="{ left: `${(index / (levels.length - 1)) * 100}%` }"
+          >
+            <div class="tick"></div> <!-- 添加刻度 -->
+            <div class="label">{{ level }}</div> <!-- 将标签内容放入一个新的div中 -->
+          </div>
         </div>
-      </div>
-    </template>
+      </template>
+    </div>
   </div>
-
 </template>
 
 <script setup>
@@ -54,32 +59,61 @@ eventBus.on("alarmList:changeMapLayer", updateColors)
 </script>
 
 <style lang="scss" scoped>
-
-.map-legend {
-  position: fixed;
-  bottom: 150px;
-  right: 550px;
-  width: 340px;
-  img {
-    opacity: 0.6;
-  }
+.legend-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;background: #fff;
+  padding: 10px 10px 30px 10px;
+  opacity: 0.6;
+}
+.legend-big{
+  width: 100%;
 }
 
+.legend {
+  margin-top: 10px;
+  width: 50%;
+}
+.color-bar-big{
+  width: 100%;
+  height: 30px;
+}
 
 .color-bar {
   width: 100%;
-  height: 30px;
+  height: 10px;
   border: 1px solid #000;
 }
 
 .labels {
   position: relative;
   margin-top: 5px;
-}
+  .level {
+    position: absolute;
+    top: 50%; /* 将水平标签居中 */
+    transform: translateY(-50%);
+    width: 2px; /* 设置刻度条的宽度 */
+    height: 100%;
+    color: #000;
+    font-size: 12px;
+  }
+
+  .tick {
+    position: absolute;
+    top: -5px; /* 调整刻度的位置，使其位于标签上方 */
+    height: 10px; /* 刻度的高度 */
+    width: 2px; /* 刻度的宽度 */
+    background-color: black; /* 刻度的颜色 */
+  }
 
-.level {
-  position: absolute;
-  transform: translateX(-50%);
-  text-align: center;
+  .label {
+    position: absolute;
+    top: 10px; /* 调整标签的位置，使其位于刻度下方 */
+    left: 0px; /* 通过调整这个值来使标签居中于刻度 */
+    transform: translateX(-50%);
+    white-space: nowrap;
+  }
 }
+
+
 </style>