修改降雨栅格图显示逻辑

src/hooks/rainstorm/useRainstormDeduction.ts

@@ -1,11 +1,16 @@
 import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
 import { useStatusStore } from '@/stores/useStatusStore';
 import { useStepStore } from '@/stores/useStepStore';
+import type { RainfallGridResponse } from '@/types/rainstorm/RainfallGridResponse';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import { ImageryLayer, Rectangle, SingleTileImageryProvider } from 'cesium';
 
 export const useRainstormDeduction = () => {
   const statusStore = useStatusStore();
   const leftLegendStore = useLeftLegendStore();
   const stepStore = useStepStore();
+
+  let layer: ImageryLayer | null = null;
   /**
    * 显示步骤
    */
@@ -23,15 +28,15 @@ export const useRainstormDeduction = () => {
       list: [
         {
           label: '无雨/微雨; <0.1mm/12h',
-          color: 'rgba(200,200,200,0)',
+          color: 'rgba(200, 200, 200, 0)',
         },
         {
           label: '小雨；<5mm/12h',
-          color: 'rgba(0,0,255,0.4)',
+          color: 'rgba(0, 0, 255, 0.4)',
         },
         {
           label: '中雨； <15mm/12h',
-          color: 'rgba(0,255,255,0.5)',
+          color: 'rgba(0, 255, 255, 0.5)',
         },
         {
           label: '大雨； <30mm/12h',
@@ -39,19 +44,57 @@ export const useRainstormDeduction = () => {
         },
         {
           label: '暴雨； <70mm/12h',
-          color: 'rgba(255,255,0,0.7)',
+          color: 'rgba(255, 255, 0, 0.7)',
         },
         {
           label: '大暴雨； <140mm/12h',
-          color: 'rgba(255,165,0,0.8)',
+          color: 'rgba(255, 165, 0, 0.8)',
         },
         {
           label: '特大暴雨； >140mm/12h',
-          color: 'rgba(255,0,0,0.9)',
+          color: 'rgba(255, 0, 0, 0.9)',
         },
       ],
     };
   };
 
-  return { showStep, addLegend };
+  /**
+   * 添加降雨栅格图层
+   * @param response - 雨量栅格响应
+   */
+  const addGridLayer = (response: RainfallGridResponse) => {
+    // 删除旧图层
+    if (layer) {
+      CesiumUtilsSingleton.getViewer()!.imageryLayers.remove(layer);
+    }
+    const rectangle = Rectangle.fromDegrees(
+      response.cesiumConfig!.rectangle.west,
+      response.cesiumConfig!.rectangle.south,
+      response.cesiumConfig!.rectangle.east,
+      response.cesiumConfig!.rectangle.north
+    );
+
+    // 创建单张影像提供器
+    const provider = new SingleTileImageryProvider({
+      url: `${import.meta.env.VITE_FILE_URL}/${response.pngPath}`.replace(
+        '//',
+        '/'
+      ),
+      rectangle: rectangle,
+    });
+
+    layer =
+      CesiumUtilsSingleton.getViewer()!.imageryLayers.addImageryProvider(
+        provider
+      );
+  };
+
+  /**
+   * 触发图层显示状态
+   */
+  const triggerLayerShowStatus = (status: boolean) => {
+    layer!.show = status;
+  };
+
+  return { showStep, addLegend, addGridLayer, triggerLayerShowStatus };
 };