更新 deckLayer 类

2025-11-24 15:09:37 +08:00
parent 15e80f105e
commit b4aef962dd
5 changed files with 309 additions and 227 deletions
--- a/src/app/OlMap/Controls/LayerControl.tsx
+++ b/src/app/OlMap/Controls/LayerControl.tsx
@@ -40,7 +40,7 @@ const LayerControl: React.FC = () => {
            return deckLayers.some((dl: any) => dl.id === "waterflowLayer");
          }
          return false;
-        }) as Layer[];
+        }) as DeckLayer[];

      // 合并所有可控制的图层
      const allLayers = [...mapLayers, ...deckFlowLayers];
@@ -55,6 +55,7 @@ const LayerControl: React.FC = () => {
        "valves",
        "scada",
        "waterflow",
+        "contourLayer",
      ];

      // 过滤并排序图层：只显示在 layerOrder 中的图层
@@ -81,10 +82,18 @@ const LayerControl: React.FC = () => {
          if (userChangedRef.current.has(layer)) {
            visible.set(layer, prevVisibilities.get(layer) ?? true);
          } else if (layer instanceof DeckLayer) {
-            // 对于 DeckLayer，获取内部 deck.gl 图层的可见性
-            const waterflowVisible =
-              layer.getDeckLayerVisible("waterflowLayer");
-            visible.set(layer, waterflowVisible ?? true);
+            // 对于 DeckLayer，需要设置内部 deck.gl 图层的可见性
+            const deckLayers = layer.getDeckLayers();
+            deckLayers.forEach((deckLayer: any) => {
+              if (
+                deckLayer &&
+                (deckLayer.id === "waterflowLayer" ||
+                  deckLayer.id === "contourLayer")
+              ) {
+                const visible = layer.getDeckLayerVisible(deckLayer.id);
+                layer.setDeckLayerVisible(deckLayer.id, !visible);
+              }
+            });
          } else {
            // 对于普通 OpenLayers 图层
            visible.set(layer, layer.getVisible());
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/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 (
    <>
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -241,13 +241,13 @@ const Timeline: React.FC<TimelineProps> = ({
  // 播放控制
  const handlePlay = useCallback(() => {
    if (!isPlaying) {
-      if (junctionText === "" && pipeText === "") {
-        open?.({
-          type: "error",
-          message: "请至少设定并应用一个图层的样式。",
-        });
-        // return;
-      }
+      // if (junctionText === "" && pipeText === "") {
+      //   open?.({
+      //     type: "error",
+      //     message: "请至少设定并应用一个图层的样式。",
+      //   });
+      // return;
+      // }
      setIsPlaying(true);

      intervalRef.current = setInterval(() => {
@@ -367,13 +367,13 @@ const Timeline: React.FC<TimelineProps> = ({
      // 检查至少一个属性有值
      const junctionProperties = junctionText;
      const pipeProperties = pipeText;
-      if (junctionProperties === "" && pipeProperties === "") {
-        open?.({
-          type: "error",
-          message: "请至少设定并应用一个图层的样式。",
-        });
-        return;
-      }
+      // if (junctionProperties === "" && pipeProperties === "") {
+      //   open?.({
+      //     type: "error",
+      //     message: "请至少设定并应用一个图层的样式。",
+      //   });
+      //   return;
+      // }
      fetchFrameData(
        currentTimeToDate(selectedDate, currentTime),
        junctionText,