更新 deckLayer 类

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -31,7 +31,7 @@ import { parseColor } from "@utils/parseColor";
 import { VectorTile } from "ol";
 import { useNotification } from "@refinedev/core";
 import { config } from "@/config/config";
-import { constructNow, min } from "date-fns";
+import { DeckLayer } from "@utils/layers";
 
 interface StyleConfig {
   property: string;
@@ -190,6 +190,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     pipeText,
     setShowJunctionText,
     setShowPipeText,
+    setShowContourLayer,
     setJunctionText,
     setPipeText,
   } = data;
@@ -443,6 +444,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       }
       if (junctionStyleConfigState)
         applyLayerStyle(junctionStyleConfigState, breaks);
+      updateContourLayerStyle(breaks, junctionStyleConfigState?.styleConfig);
     } else if (
       layerType === "pipes" &&
       currentPipeCalData &&
@@ -1426,6 +1428,110 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       );
     }
   };
+  // 更新 ContourLayer 的样式，并显示在地图上
+  const updateContourLayerStyle = (breaks: any, styleConfig: any) => {
+    if (!map) return;
+    // 查找包含 contourLayer 的 DeckLayer
+    const deckLayerWrapper = map
+      .getLayers()
+      .getArray()
+      .find((layer) => {
+        if (layer instanceof DeckLayer) {
+          const deckLayers = layer.getDeckLayers();
+          // 检查是否包含 contourLayer
+          return deckLayers.some((dl: any) => dl.id === "contourLayer");
+        }
+        return false;
+      }) as DeckLayer | undefined;
+
+    if (!deckLayerWrapper) return;
+
+    // 计算颜色
+    const segmentCount = breaks.length - 1;
+    if (segmentCount <= 0) return;
+
+    const thresholdColor = () => {
+      let colors: string[] = [];
+      if (styleConfig.colorType === "single") {
+        const c = SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
+        colors = Array(segmentCount).fill(c);
+      } else if (styleConfig.colorType === "gradient") {
+        const { start, end } =
+          GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
+        const startColor = parseColor(start);
+        const endColor = parseColor(end);
+        for (let i = 0; i < segmentCount; i++) {
+          const ratio = segmentCount > 1 ? i / (segmentCount - 1) : 1;
+          const r = Math.round(
+            startColor.r + (endColor.r - startColor.r) * ratio
+          );
+          const g = Math.round(
+            startColor.g + (endColor.g - startColor.g) * ratio
+          );
+          const b = Math.round(
+            startColor.b + (endColor.b - startColor.b) * ratio
+          );
+          colors.push(`rgba(${r}, ${g}, ${b}, 1)`);
+        }
+      } else if (styleConfig.colorType === "rainbow") {
+        const baseColors =
+          RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
+        colors = Array.from(
+          { length: segmentCount },
+          (_, i) => baseColors[i % baseColors.length]
+        );
+      } else if (styleConfig.colorType === "custom") {
+        const custom = styleConfig.customColors || [];
+        const result = [...custom];
+        const reverseRainbowColors = RAINBOW_PALETTES[1].colors;
+        while (result.length < segmentCount) {
+          result.push(
+            reverseRainbowColors[
+              (result.length - custom.length) % reverseRainbowColors.length
+            ]
+          );
+        }
+        colors = result.slice(0, segmentCount);
+      }
+      return colors;
+    };
+
+    const colors = thresholdColor();
+    // 构建 contours 配置
+    const contours: any[] = [];
+    for (let i = 0; i < segmentCount; i++) {
+      const start = breaks[i];
+      const end = breaks[i + 1];
+      const colorStr = colors[i];
+      try {
+        const c = parseColor(colorStr);
+        contours.push({
+          threshold: [start, end],
+          color: [c.r, c.g, c.b],
+        });
+      } catch (e) {
+        console.warn("Color parse error", colorStr);
+      }
+    }
+    // 更新 DeckLayer
+    const deck = (deckLayerWrapper as any).deck;
+    if (deck && deck.props && deck.props.layers) {
+      const currentLayers = deck.props.layers;
+      const newLayers = currentLayers.map((layer: any) => {
+        if (layer.id === "contourLayer") {
+          return layer.clone({
+            contours: contours,
+          });
+        }
+        return layer;
+      });
+      console.log(newLayers);
+      deck.setProps({ layers: newLayers });
+    }
+
+    // 显示 contourLayer
+    // if (setShowContourLayer) setShowContourLayer(true);
+  };
 
   return (
     <>