简单修改

src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue

@@ -25,34 +25,6 @@
   let isLoaded = false; // 标记数据是否已加载完成
   let pendingShow = false; // 标记是否有待显示的请求
 
-  /**
-   * 颜色缓存
-   */
-  const colorCache = new Map<string, Color>();
-
-  /**
-   * 解析颜色字符串
-   */
-  const parseColor = (colorStr: string): Color | null => {
-    if (colorCache.has(colorStr)) {
-      return colorCache.get(colorStr)!;
-    }
-
-    const match = colorStr.match(
-      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
-    );
-    if (!match) return null;
-
-    const r = parseInt(match[1]) / 255;
-    const g = parseInt(match[2]) / 255;
-    const b = parseInt(match[3]) / 255;
-    const a = match[4] ? parseFloat(match[4]) : 1.0;
-
-    const color = new Color(r, g, b, a);
-    colorCache.set(colorStr, color);
-    return color;
-  };
-
   /**
    * 加载降雨栅格数据
    */
@@ -66,9 +38,6 @@
       const geoJsonData = res.data;
 
       if (geoJsonData && geoJsonData.type === 'FeatureCollection') {
-        // 立即让出主线程，避免阻塞渲染
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-
         // 分批处理，避免长时间阻塞主线程
         const features = geoJsonData.features;
         const batchSize = 500; // 每批处理500个
@@ -83,7 +52,9 @@
             // 获取颜色
             let color = Color.WHITE;
             if (feature.properties?.color) {
-              const parsedColor = parseColor(feature.properties.color);
+              const parsedColor = CesiumUtilsSingleton.parseColor(
+                feature.properties.color
+              );
               if (parsedColor) {
                 color = parsedColor;
               }
@@ -108,15 +79,7 @@
 
             instances.push(instance);
           });
-
-          // 每批之间让出主线程
-          if (i + batchSize < features.length) {
-            await new Promise((resolve) => setTimeout(resolve, 0));
         }
-        }
-
-        // 让出主线程
-        await new Promise((resolve) => requestAnimationFrame(resolve));
 
         // 创建 Primitive（初始状态为隐藏）
         primitiveCollection = new GroundPrimitive({

src/utils/cesium/CesiumUtils.ts

@@ -19,6 +19,7 @@ import {
   Cartesian2,
   SceneTransforms,
   Rectangle,
+  Color,
 } from 'cesium';
 import { CesiumViewerManager } from './CesiumViewerManager';
 import { EntityManager } from './EntityManager';
@@ -44,6 +45,9 @@ export class CesiumUtils {
   #geoJsonManager: GeoJsonManager | null = null;
   #cameraController: CameraController | null = null;
 
+  // 颜色缓存
+  #colorCache = new Map<string, Color>();
+
   constructor() {
     this.#viewerManager = new CesiumViewerManager();
   }
@@ -584,6 +588,31 @@ export class CesiumUtils {
     return { x: windowCoord.x, y: windowCoord.y };
   }
 
+  /**
+   * 解析颜色字符串
+   * @param colorStr 颜色字符串
+   * @returns Color 对象
+   */
+  parseColor(colorStr: string): Color | null {
+    if (this.#colorCache.has(colorStr)) {
+      return this.#colorCache.get(colorStr)!;
+    }
+
+    const match = colorStr.match(
+      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+    );
+    if (!match) return null;
+
+    const r = parseInt(match[1]) / 255;
+    const g = parseInt(match[2]) / 255;
+    const b = parseInt(match[3]) / 255;
+    const a = match[4] ? parseFloat(match[4]) : 1.0;
+
+    const color = new Color(r, g, b, a);
+    this.#colorCache.set(colorStr, color);
+    return color;
+  }
+
   // ===================== 私有方法 =====================
 
   /**