优化图例显示

src/component/rain-earthquake/LeftLegendComponent.vue

@@ -2,14 +2,22 @@
 <template>
   <div
     class="legend-container"
-    v-show="useStatusStore().uiComponents.leftLegend.show"
+    v-show="
+      useStatusStore().uiComponents.leftLegend.show &&
+      Object.keys(useLeftLegendStore().legendListInfo).length > 0
+    "
+  >
+    <div
+      class="legend-box"
+      v-for="key in Object.keys(useLeftLegendStore().legendListInfo)"
+      :key="key"
     >
       <div class="legend-title">
-      {{ useLeftLegendStore().legendListInfo.title }}
+        {{ useLeftLegendStore().legendListInfo[key].title }}
       </div>
       <div
         class="legend-item"
-      v-for="(item, index) in useLeftLegendStore().legendListInfo.list"
+        v-for="(item, index) in useLeftLegendStore().legendListInfo[key].list"
         :key="index"
       >
         <div
@@ -21,6 +29,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -35,14 +44,10 @@
     left: 20px;
     z-index: 1000;
     padding: 6px;
-    position: absolute;
-    bottom: 10px;
-    left: 15px;
     border-radius: 2px;
-    z-index: 1000;
     display: flex;
-    flex-direction: column;
+    gap: 30px;
-    width: 240px;
+    min-width: 240px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     color: white;
@@ -51,6 +56,10 @@
     border: 1px solid rgb(0, 225, 255);
   }
 
+  .legend-box:not(:last-child) {
+    border-right: 1px solid rgb(0, 225, 255);
+  }
+
   .legend-title {
     font-weight: bold;
     font-size: 16px;

src/hooks/rain-earthquake/useLayerControl.ts

@@ -61,12 +61,10 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showPopulationGrid.loading = true;
 
     if (useStatusStore().poiLayers.showPopulationGrid.show) {
-      // 显示图例
+      // 添加图例
-      useStatusStore().uiComponents.leftLegend.loading = true;
+      useLeftLegendStore().legendListInfo.population = {
-      useStatusStore().uiComponents.leftLegend.show = true;
+        title: '人口密度图例',
-
+        list: [
-      useLeftLegendStore().legendListInfo.title = '人口密度图例';
-      useLeftLegendStore().legendListInfo.list = [
           {
             label: 'Min-0 < 100',
             color: '#b1fe02',
@@ -99,10 +97,11 @@ export const useLayerControl = () => {
             label: '10000 ≤ X < Max',
             color: '#ff0000',
           },
-      ];
+        ],
+      };
     } else {
       // 隐藏图例
-      useStatusStore().uiComponents.leftLegend.show = false;
+      delete useLeftLegendStore().legendListInfo.population;
     }
   };
 

src/hooks/rain-earthquake/useRightHandle.ts

@@ -15,11 +15,10 @@ export const useRightHandle = () => {
       useStatusStore().weatherLayers.showRainfallGrid.loading = true;
       useStatusStore().weatherLayers.showRainfallGrid.show = true;
 
-      // 显示图例
+      // 添加图例
-      useStatusStore().uiComponents.leftLegend.loading = true;
+      useLeftLegendStore().legendListInfo.precipitation = {
-      useStatusStore().uiComponents.leftLegend.show = true;
+        title: '降雨量图例',
-      useLeftLegendStore().legendListInfo.title = '降雨量图例';
+        list: [
-      useLeftLegendStore().legendListInfo.list = [
           {
             label: '无雨/微雨; <0.1mm/12h',
             color: 'rgba(200,200,200,0)',
@@ -48,13 +47,14 @@ export const useRightHandle = () => {
             label: '特大暴雨； >140mm/12h',
             color: 'rgba(255,0,0,0.9)',
           },
-      ];
+        ],
+      };
     } else {
       // 关闭暴雨模拟：隐藏降雨栅格图层
       useStatusStore().weatherLayers.showRainfallGrid.show = false;
 
-      // 隐藏图例
+      // 删除图例
-      useStatusStore().uiComponents.leftLegend.show = false;
+      delete useLeftLegendStore().legendListInfo.precipitation;
     }
   };
 

src/stores/useLeftLegendStore.ts

@@ -5,12 +5,14 @@ import { ref, type Ref } from 'vue';
  * 左侧图例信息
  */
 export const useLeftLegendStore = defineStore('leftLegend', () => {
-  const legendListInfo: Ref<{
+  const legendListInfo: Ref<
+    Record<
+      string,
+      {
         title: string;
         list: { label: string; color: string }[];
-  }> = ref({
+      }
-    title: '',
+    >
-    list: [],
+  > = ref({});
-  });
   return { legendListInfo };
 });

src/stores/useStatusStore.ts

@@ -29,8 +29,8 @@ export const useStatusStore = defineStore('status', () => {
       loading: true,
     },
     leftLegend: {
-      show: false,
+      show: true,
-      loading: false,
+      loading: true,
     },
     rightButton: {
       show: true,
@@ -215,8 +215,8 @@ export const useStatusStore = defineStore('status', () => {
       loading: true,
     };
     uiComponents.leftLegend = {
-      show: false,
+      show: true,
-      loading: false,
+      loading: true,
     };
     uiComponents.rightButton = {
       show: true,