调整参数

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -42,8 +42,9 @@ interface StyleConfig {
   maxStrokeWidth: number; // 最大线宽
   fixedStrokeWidth: number; // 固定线宽
   colorType: string; // 颜色类型
-  startColor: string;
-  endColor: string;
+  singlePaletteIndex: number;
+  gradientPaletteIndex: number;
+  rainbowPaletteIndex: number;
   showLabels: boolean;
   opacity: number;
   adjustWidthByProperty: boolean; // 是否根据属性调整线条宽度
@@ -51,7 +52,7 @@ interface StyleConfig {
 }
 
 // 图层样式状态接口
-interface LayerStyleState {
+export interface LayerStyleState {
   layerId: string;
   layerName: string;
   styleConfig: StyleConfig;
@@ -191,28 +192,26 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     maxStrokeWidth: 6,
     fixedStrokeWidth: 3,
     colorType: "single",
-    startColor: "rgba(51, 153, 204, 0.9)",
-    endColor: "rgba(204, 51, 51, 0.9)",
+    singlePaletteIndex: 0,
+    gradientPaletteIndex: 0,
+    rainbowPaletteIndex: 0,
     showLabels: false,
     opacity: 0.9,
     adjustWidthByProperty: true,
     customBreaks: [],
   });
 
-  // 颜色方案选择
-  const [singlePaletteIndex, setSinglePaletteIndex] = useState(0);
-  const [gradientPaletteIndex, setGradientPaletteIndex] = useState(0);
-  const [rainbowPaletteIndex, setRainbowPaletteIndex] = useState(0);
   // 根据分段数生成相应数量的渐进颜色
   const generateGradientColors = useCallback(
     (segments: number): string[] => {
-      const { start, end } = GRADIENT_PALETTES[gradientPaletteIndex];
+      const { start, end } =
+        GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
       const colors: string[] = [];
       const startColor = parseColor(start);
       const endColor = parseColor(end);
 
       for (let i = 0; i < segments; i++) {
-        const ratio = i / (segments - 1);
+        const ratio = segments > 1 ? i / (segments - 1) : 1;
         const r = Math.round(
           startColor.r + (endColor.r - startColor.r) * ratio
         );
@@ -226,13 +225,14 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       }
       return colors;
     },
-    [gradientPaletteIndex, parseColor]
+    [styleConfig.gradientPaletteIndex, parseColor]
   );
 
   // 根据分段数生成彩虹色
   const generateRainbowColors = useCallback(
     (segments: number): string[] => {
-      const baseColors = RAINBOW_PALETTES[rainbowPaletteIndex].colors;
+      const baseColors =
+        RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
 
       if (segments <= baseColors.length) {
         // 如果分段数小于等于基础颜色数,均匀选取
@@ -249,7 +249,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         );
       }
     },
-    [rainbowPaletteIndex]
+    [styleConfig.rainbowPaletteIndex]
   );
   // 保存当前图层的样式状态
   const saveLayerStyle = useCallback(
@@ -473,7 +473,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       styleConfig.colorType === "single"
         ? // 单一色重复多次
           Array.from({ length: breaksLength }, () => {
-            return SINGLE_COLOR_PALETTES[singlePaletteIndex].color;
+            return SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
           })
         : styleConfig.colorType === "gradient"
         ? generateGradientColors(breaksLength)
@@ -901,8 +901,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         >
           <InputLabel>单一色方案</InputLabel>
           <Select
-            value={singlePaletteIndex}
-            onChange={(e) => setSinglePaletteIndex(Number(e.target.value))}
+            value={styleConfig.singlePaletteIndex}
+            onChange={(e) =>
+              setStyleConfig((prev) => ({
+                ...prev,
+                singlePaletteIndex: Number(e.target.value),
+              }))
+            }
           >
             {SINGLE_COLOR_PALETTES.map((p, idx) => {
               return (
@@ -940,8 +945,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         >
           <InputLabel>渐进色方案</InputLabel>
           <Select
-            value={gradientPaletteIndex}
-            onChange={(e) => setGradientPaletteIndex(Number(e.target.value))}
+            value={styleConfig.gradientPaletteIndex}
+            onChange={(e) =>
+              setStyleConfig((prev) => ({
+                ...prev,
+                gradientPaletteIndex: Number(e.target.value),
+              }))
+            }
           >
             {GRADIENT_PALETTES.map((p, idx) => {
               return (
@@ -978,8 +988,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         >
           <InputLabel>离散彩虹方案</InputLabel>
           <Select
-            value={rainbowPaletteIndex}
-            onChange={(e) => setRainbowPaletteIndex(Number(e.target.value))}
+            value={styleConfig.rainbowPaletteIndex}
+            onChange={(e) =>
+              setStyleConfig((prev) => ({
+                ...prev,
+                rainbowPaletteIndex: Number(e.target.value),
+              }))
+            }
           >
             {RAINBOW_PALETTES.map((p, idx) => {
               // 根据当前分段数生成该方案的预览颜色
@@ -1040,13 +1055,15 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
   const getSizeSetting = () => {
     let colors: string[] = [];
     if (styleConfig.colorType === "single") {
-      const color = SINGLE_COLOR_PALETTES[singlePaletteIndex].color;
+      const color = SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
       colors = [color, color];
     } else if (styleConfig.colorType === "gradient") {
-      const { start, end } = GRADIENT_PALETTES[gradientPaletteIndex];
+      const { start, end } =
+        GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
       colors = [start, end];
     } else if (styleConfig.colorType === "rainbow") {
-      const rainbowColors = RAINBOW_PALETTES[rainbowPaletteIndex].colors;
+      const rainbowColors =
+        RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
       colors = [rainbowColors[0], rainbowColors[rainbowColors.length - 1]];
     }