优化图例显示

src/component/rain-earthquake/LeftLegendComponent.vue

@@ -2,22 +2,31 @@
 <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-title">
-      {{ useLeftLegendStore().legendListInfo.title }}
-    </div>
     <div
-      class="legend-item"
-      v-for="(item, index) in useLeftLegendStore().legendListInfo.list"
-      :key="index"
+      class="legend-box"
+      v-for="key in Object.keys(useLeftLegendStore().legendListInfo)"
+      :key="key"
     >
+      <div class="legend-title">
+        {{ useLeftLegendStore().legendListInfo[key].title }}
+      </div>
       <div
-        class="legend-color"
-        :style="{ 'background-color': `${item.color}` }"
-      ></div>
-      <div class="legend-text">
-        <span class="legend-text-title">{{ item.label }}</span>
+        class="legend-item"
+        v-for="(item, index) in useLeftLegendStore().legendListInfo[key].list"
+        :key="index"
+      >
+        <div
+          class="legend-color"
+          :style="{ 'background-color': `${item.color}` }"
+        ></div>
+        <div class="legend-text">
+          <span class="legend-text-title">{{ item.label }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -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;
-    width: 240px;
+    gap: 30px;
+    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,48 +61,47 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showPopulationGrid.loading = true;
 
     if (useStatusStore().poiLayers.showPopulationGrid.show) {
-      // 显示图例
-      useStatusStore().uiComponents.leftLegend.loading = true;
-      useStatusStore().uiComponents.leftLegend.show = true;
-
-      useLeftLegendStore().legendListInfo.title = '人口密度图例';
-      useLeftLegendStore().legendListInfo.list = [
-        {
-          label: 'Min-0 < 100',
-          color: '#b1fe02',
-        },
-        {
-          label: '100 ≤ X < 500',
-          color: '#6bf700',
-        },
-        {
-          label: '500 ≤ X < 1000',
-          color: '#fcf600',
-        },
-        {
-          label: '1000 ≤ X < 2000',
-          color: '#fecb02',
-        },
-        {
-          label: '2000 ≤ X < 4000',
-          color: '#fc9e00',
-        },
-        {
-          label: '4000 ≤ X < 8000',
-          color: '#fe7004',
-        },
-        {
-          label: '8000 ≤ X < 10000',
-          color: '#fb3f02',
-        },
-        {
-          label: '10000 ≤ X < Max',
-          color: '#ff0000',
-        },
-      ];
+      // 添加图例
+      useLeftLegendStore().legendListInfo.population = {
+        title: '人口密度图例',
+        list: [
+          {
+            label: 'Min-0 < 100',
+            color: '#b1fe02',
+          },
+          {
+            label: '100 ≤ X < 500',
+            color: '#6bf700',
+          },
+          {
+            label: '500 ≤ X < 1000',
+            color: '#fcf600',
+          },
+          {
+            label: '1000 ≤ X < 2000',
+            color: '#fecb02',
+          },
+          {
+            label: '2000 ≤ X < 4000',
+            color: '#fc9e00',
+          },
+          {
+            label: '4000 ≤ X < 8000',
+            color: '#fe7004',
+          },
+          {
+            label: '8000 ≤ X < 10000',
+            color: '#fb3f02',
+          },
+          {
+            label: '10000 ≤ X < Max',
+            color: '#ff0000',
+          },
+        ],
+      };
     } else {
       // 隐藏图例
-      useStatusStore().uiComponents.leftLegend.show = false;
+      delete useLeftLegendStore().legendListInfo.population;
     }
   };
 

src/hooks/rain-earthquake/useRightHandle.ts

@@ -15,46 +15,46 @@ export const useRightHandle = () => {
       useStatusStore().weatherLayers.showRainfallGrid.loading = true;
       useStatusStore().weatherLayers.showRainfallGrid.show = true;
 
-      // 显示图例
-      useStatusStore().uiComponents.leftLegend.loading = true;
-      useStatusStore().uiComponents.leftLegend.show = true;
-      useLeftLegendStore().legendListInfo.title = '降雨量图例';
-      useLeftLegendStore().legendListInfo.list = [
-        {
-          label: '无雨/微雨; <0.1mm/12h',
-          color: 'rgba(200,200,200,0)',
-        },
-        {
-          label: '小雨；<5mm/12h',
-          color: 'rgba(0,0,255,0.4)',
-        },
-        {
-          label: '中雨； <15mm/12h',
-          color: 'rgba(0,255,255,0.5)',
-        },
-        {
-          label: '大雨； <30mm/12h',
-          color: 'rgba(0,255,0,0.6)',
-        },
-        {
-          label: '暴雨； <70mm/12h',
-          color: 'rgba(255,255,0,0.7)',
-        },
-        {
-          label: '大暴雨； <140mm/12h',
-          color: 'rgba(255,165,0,0.8)',
-        },
-        {
-          label: '特大暴雨； >140mm/12h',
-          color: 'rgba(255,0,0,0.9)',
-        },
-      ];
+      // 添加图例
+      useLeftLegendStore().legendListInfo.precipitation = {
+        title: '降雨量图例',
+        list: [
+          {
+            label: '无雨/微雨; <0.1mm/12h',
+            color: 'rgba(200,200,200,0)',
+          },
+          {
+            label: '小雨；<5mm/12h',
+            color: 'rgba(0,0,255,0.4)',
+          },
+          {
+            label: '中雨； <15mm/12h',
+            color: 'rgba(0,255,255,0.5)',
+          },
+          {
+            label: '大雨； <30mm/12h',
+            color: 'rgba(0,255,0,0.6)',
+          },
+          {
+            label: '暴雨； <70mm/12h',
+            color: 'rgba(255,255,0,0.7)',
+          },
+          {
+            label: '大暴雨； <140mm/12h',
+            color: 'rgba(255,165,0,0.8)',
+          },
+          {
+            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<{
-    title: string;
-    list: { label: string; color: string }[];
-  }> = ref({
-    title: '',
-    list: [],
-  });
+  const legendListInfo: Ref<
+    Record<
+      string,
+      {
+        title: string;
+        list: { label: string; color: string }[];
+      }
+    >
+  > = ref({});
   return { legendListInfo };
 });

src/stores/useStatusStore.ts

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