添加左侧图例组件

src/component/rain-earthquake/LeftLegendComponent.vue

@@ -0,0 +1,75 @@
+<!-- 左侧图例组件 -->
+<template>
+  <div
+    class="legend-container"
+    v-show="useStatusStore().uiComponents.leftLegend.show"
+  >
+    <div class="legend-title">
+      {{ useLeftLegendStore().legendListInfo.title }}
+    </div>
+    <div
+      class="legend-item"
+      v-for="(item, index) in useLeftLegendStore().legendListInfo.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>
+</template>
+
+<script lang="ts" setup>
+  import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
+</script>
+
+<style scoped>
+  .legend-container {
+    position: absolute;
+    bottom: 20px;
+    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;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    color: white;
+    font-family: Arial, sans-serif;
+    background: rgba(14, 52, 98, 0.8);
+    border: 1px solid rgb(0, 225, 255);
+  }
+
+  .legend-title {
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin: 3px 0;
+    font-size: 12px;
+    width: 100%;
+    color: white;
+  }
+
+  .legend-color {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    border-radius: 2px;
+  }
+</style>

src/hooks/rain-earthquake/useLayerControl.ts

@@ -1,3 +1,4 @@
+import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
 import { useStatusStore } from '@/stores/useStatusStore.ts';
 
 /**
@@ -58,6 +59,51 @@ export const useLayerControl = () => {
   const clickPopulationGrid = () => {
     // 加载状态为true
     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',
+        },
+      ];
+    } else {
+      // 隐藏图例
+      useStatusStore().uiComponents.leftLegend.show = false;
+    }
   };
 
   /**

src/hooks/rain-earthquake/useRightHandle.ts

@@ -2,6 +2,7 @@ import { useStatusStore } from '@/stores/useStatusStore.ts';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
 import config from '@/config/config.json';
 import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore';
+import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
 
 export const useRightHandle = () => {
   /**
@@ -13,9 +14,47 @@ 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)',
+        },
+      ];
     } else {
       // 关闭暴雨模拟：隐藏降雨栅格图层
       useStatusStore().weatherLayers.showRainfallGrid.show = false;
+
+      // 隐藏图例
+      useStatusStore().uiComponents.leftLegend.show = false;
     }
   };
 

src/stores/useLeftLegendStore.ts

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

src/stores/useStatusStore.ts

@@ -28,6 +28,10 @@ export const useStatusStore = defineStore('status', () => {
       show: true,
       loading: true,
     },
+    leftLegend: {
+      show: false,
+      loading: false,
+    },
     rightButton: {
       show: true,
       loading: true,
@@ -210,6 +214,10 @@ export const useStatusStore = defineStore('status', () => {
       show: true,
       loading: true,
     };
+    uiComponents.leftLegend = {
+      show: false,
+      loading: false,
+    };
     uiComponents.rightButton = {
       show: true,
       loading: true,

src/views/home/rainstorm/RainstormView.vue

@@ -29,6 +29,14 @@
       :button-list="leftButtonInfo"
     />
 
+    <!-- 左侧图例组件 -->
+    <LeftLegendComponent
+      v-if="
+        useStatusStore().appLoadingCompleted &&
+        useStatusStore().uiComponents.leftLegend.loading
+      "
+    />
+
     <!-- 右侧按钮组件 -->
     <RightButtonComponent
       v-if="
@@ -56,6 +64,7 @@
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
   import FunctionComponent from '@/component/rain-earthquake/FunctionComponent.vue';
   import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
+  import LeftLegendComponent from '@/component/rain-earthquake/LeftLegendComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
   import { useStatusStore } from '@/stores/useStatusStore';