添加左侧图例组件

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;
     }
   };