调整参数

2025-11-18 11:31:57 +08:00
parent d91e618559
commit 01563c3c2d
2 changed files with 52 additions and 65 deletions
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/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]];
    }

--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/src/app/OlMap/Controls/Toolbar.tsx
@@ -15,47 +15,12 @@ import { FeatureLike } from "ol/Feature";
 import Feature from "ol/Feature";
 import StyleEditorPanel from "./StyleEditorPanel";
 import StyleLegend from "./StyleLegend"; // 引入图例组件
-
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";

 import { config } from "@/config/config";
 const backendUrl = config.BACKEND_URL;

-// 图层样式状态接口
-interface StyleConfig {
-  property: string;
-  classificationMethod: string;
-  segments: number;
-  minSize: number;
-  maxSize: number;
-  minStrokeWidth: number;
-  maxStrokeWidth: number;
-  fixedStrokeWidth: number;
-  colorType: string;
-  startColor: string;
-  endColor: string;
-  showLabels: boolean;
-  opacity: number;
-  adjustWidthByProperty: boolean;
-}
-
-interface LegendStyleConfig {
-  layerId: string;
-  layerName: string;
-  property: string;
-  colors: string[];
-  type: string;
-  dimensions: number[];
-  breaks: number[];
-}
-
-interface LayerStyleState {
-  layerId: string;
-  layerName: string;
-  styleConfig: StyleConfig;
-  legendConfig: LegendStyleConfig;
-  isActive: boolean;
-}
+import { LayerStyleState } from "./StyleEditorPanel";

 // 添加接口定义隐藏按钮的props
 interface ToolbarProps {
@@ -93,8 +58,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
        maxStrokeWidth: 8,
        fixedStrokeWidth: 3,
        colorType: "gradient",
-        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,
@@ -123,8 +89,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
        maxStrokeWidth: 8,
        fixedStrokeWidth: 3,
        colorType: "gradient",
-        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,
@@ -149,7 +116,10 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
      layerName: state.layerName,
      layerId: state.layerId,
    }));
-
+  useEffect(() => {
+    console.log(layerStyleStates);
+    console.log("Active Legends:", activeLegendConfigs);
+  }, [layerStyleStates]);
  // 创建高亮图层
  useEffect(() => {
    if (!map) return;