新增等值线图样式自定义功能

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -193,7 +193,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     setWaterflowLayerAvailable,
     setJunctionText,
     setPipeText,
-    deckLayer,
+    setContours,
   } = data;
 
   const { open } = useNotification();
@@ -444,8 +444,10 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         breaks.push(max_val);
         breaks.sort((a, b) => a - b);
       }
-      if (junctionStyleConfigState)
+      if (junctionStyleConfigState) {
         applyLayerStyle(junctionStyleConfigState, breaks);
+        applyContourLayerStyle(junctionStyleConfigState, breaks);
+      }
     } else if (
       layerType === "pipes" &&
       currentPipeCalData &&
@@ -661,6 +663,67 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       saveLayerStyle(renderLayer.get("value"), legendConfig);
     }, 100);
   };
+  // 应用样式函数，传入 breaks 数据
+  const applyContourLayerStyle = (
+    layerStyleConfig: LayerStyleState,
+    breaks?: number[]
+  ) => {
+    // 使用传入的 breaks 数据
+    if (!breaks || breaks.length === 0) {
+      console.warn("没有有效的 breaks 数据");
+      return;
+    }
+    const styleConfig = layerStyleConfig.styleConfig;
+
+    if (!setContours) return;
+
+    const breaksLength = breaks.length;
+    // 根据 breaks 计算每个分段的颜色
+    const colors: string[] =
+      styleConfig.colorType === "single"
+        ? // 单一色重复多次
+          Array.from({ length: breaksLength }, () => {
+            return SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
+          })
+        : styleConfig.colorType === "gradient"
+        ? generateGradientColors(breaksLength)
+        : styleConfig.colorType === "rainbow"
+        ? generateRainbowColors(breaksLength)
+        : (() => {
+            // 自定义颜色
+            const custom = styleConfig.customColors || [];
+            // 如果自定义颜色数量不足，用反向彩虹色填充
+            const result = [...custom];
+            const reverseRainbowColors = RAINBOW_PALETTES[1].colors;
+            while (result.length < breaksLength) {
+              result.push(
+                reverseRainbowColors[
+                  (result.length - custom.length) % reverseRainbowColors.length
+                ]
+              );
+            }
+            return result.slice(0, breaksLength);
+          })();
+
+    // 构造 ContourLayer 所需的 contours 配置
+    const contours = [];
+    for (let i = 0; i < breaks.length - 1; i++) {
+      const colorObj = parseColor(colors[i]);
+      contours.push({
+        threshold: [breaks[i], breaks[i + 1]],
+        color: [
+          colorObj.r,
+          colorObj.g,
+          colorObj.b,
+          Math.round(styleConfig.opacity * 255),
+        ],
+        strokeWidth: 0,
+      });
+    }
+    // 应用样式到等值线图层
+    setContours(contours);
+  };
+
   // 重置样式
   const resetStyle = useCallback(() => {
     if (!selectedRenderLayer) return;
@@ -679,6 +742,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         setApplyJunctionStyle(false);
         if (setShowJunctionTextLayer) setShowJunctionTextLayer(false);
         if (setJunctionText) setJunctionText("");
+        setContours && setContours([]);
         setContourLayerAvailable && setContourLayerAvailable(false);
       } else if (layerId === "pipes") {
         setApplyPipeStyle(false);