更新图层控制逻辑

src/app/OlMap/MapComponent.tsx

@@ -30,6 +30,7 @@ import VectorLayer from "ol/layer/Vector";
 import { Icon, Style } from "ol/style.js";
 import { FeatureLike } from "ol/Feature";
 import { Point } from "ol/geom";
+import { ContourLayer } from "deck.gl";
 
 interface MapComponentProps {
   children?: React.ReactNode;
@@ -50,11 +51,16 @@ interface DataContextType {
   setShowJunctionTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowPipeTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowContourLayer?: React.Dispatch<React.SetStateAction<boolean>>;
+  flowAnimation?: React.RefObject<boolean>;
+  isContourLayerAvailable?: boolean;
+  setContourLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
+  isWaterflowLayerAvailable?: boolean;
+  setWaterflowLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
   junctionText: string;
   pipeText: string;
   setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
-  scadaData?: any[]; // SCADA 数据
+  deckLayer?: DeckLayer; // DeckLayer 实例
 }
 
 // 跨组件传递
@@ -86,10 +92,10 @@ export const useData = () => {
 
 const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const mapRef = useRef<HTMLDivElement | null>(null);
-  const deckRef = useRef<Deck | null>(null);
   const deckLayerRef = useRef<DeckLayer | null>(null);
 
   const [map, setMap] = useState<OlMap>();
+  const [deckLayer, setDeckLayer] = useState<DeckLayer>();
   // currentCalData 用于存储当前计算结果
   const [currentTime, setCurrentTime] = useState<number>(-1); // 默认选择当前时间
   // const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
@@ -114,6 +120,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [junctionText, setJunctionText] = useState("pressure");
   const [pipeText, setPipeText] = useState("flow");
   const flowAnimation = useRef(false); // 添加动画控制标志
+  const [isContourLayerAvailable, setContourLayerAvailable] = useState(false); // 控制等高线图层显示
+  const [isWaterflowLayerAvailable, setWaterflowLayerAvailable] =
+    useState(false); // 控制等高线图层显示
   const [currentZoom, setCurrentZoom] = useState(11); // 当前缩放级别
 
   // 防抖更新函数
@@ -649,12 +658,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       controller: false, // 由 OpenLayers 控制视图
       layers: [],
     });
-    deckRef.current = deck;
     const deckLayer = new DeckLayer(deck, {
       name: "deckLayer",
       value: "deckLayer",
     });
     deckLayerRef.current = deckLayer;
+    setDeckLayer(deckLayer);
     map.addLayer(deckLayer);
 
     // 清理函数
@@ -675,6 +684,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     if (!pipeData.length) return;
     const junctionTextLayer = new TextLayer({
       id: "junctionTextLayer",
+      name: "节点文字",
       zIndex: 10,
       data: junctionData,
       getPosition: (d: any) => d.position,
@@ -705,6 +715,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     });
     const pipeTextLayer = new TextLayer({
       id: "pipeTextLayer",
+      name: "管道文字",
       zIndex: 10,
       data: pipeData,
       getPosition: (d: any) => d.position,
@@ -733,6 +744,24 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       // outlineWidth: 10,
       // outlineColor: [242, 244, 246, 255],
     });
+    const contourLayer = new ContourLayer({
+      id: "junctionContourLayer",
+      name: "等值线",
+      data: junctionData,
+      cellSize: 400,
+      contours: [
+        { threshold: [0, 10], color: [255, 0, 0] },
+        { threshold: [10, 20], color: [255, 127, 0] },
+        { threshold: [20, 30], color: [255, 215, 0] },
+        { threshold: [30, 40], color: [199, 224, 0] },
+        { threshold: [40, 9999], color: [142, 68, 173] },
+      ],
+      getPosition: (d) => d.position,
+      getWeight: (d: any) =>
+        d[junctionText] ? Math.abs(d[junctionText] as number) : -1,
+      opacity: 0.4,
+      visible: showContourLayer && currentZoom >= 12 && currentZoom <= 24,
+    });
     if (deckLayer.getDeckLayerById("junctionTextLayer")) {
       // 传入完整 layer 实例以保证 clone/替换时保留 layer 类型和方法
       deckLayer.updateDeckLayer("junctionTextLayer", junctionTextLayer);
@@ -744,7 +773,11 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     } else {
       deckLayer.addDeckLayer(pipeTextLayer);
     }
-    console.log(deckLayer.getDeckLayers());
+    if (deckLayer.getDeckLayerById("junctionContourLayer")) {
+      deckLayer.updateDeckLayer("junctionContourLayer", contourLayer);
+    } else {
+      deckLayer.addDeckLayer(contourLayer);
+    }
   }, [
     junctionData,
     pipeData,
@@ -769,7 +802,14 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
 
     // 动画循环
     const animate = () => {
-      if (!flowAnimation.current) return; // 添加检查，防止空数据或停止旧循环
+      if (!flowAnimation.current) {
+        try {
+          deckLayer.removeDeckLayer("waterflowLayer");
+        } catch (error) {
+          console.error("Error in animation loop:", error);
+        }
+        return;
+      }
       // 动画总时长（秒）
       if (pipeData.length === 0) {
         animationFrameId = requestAnimationFrame(animate);
@@ -785,6 +825,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       // console.log("Current Time:", currentTime);
       const waterflowLayer = new TripsLayer({
         id: "waterflowLayer",
+        name: "水流",
         data: pipeData,
         getPath: (d) => d.path,
         getTimestamps: (d) => {
@@ -884,10 +925,16 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           setShowJunctionTextLayer,
           setShowPipeTextLayer,
           setShowContourLayer,
+          flowAnimation,
+          isContourLayerAvailable,
+          setContourLayerAvailable,
+          isWaterflowLayerAvailable,
+          setWaterflowLayerAvailable,
           setJunctionText,
           setPipeText,
           junctionText,
           pipeText,
+          deckLayer,
         }}
       >
         <MapContext.Provider value={map}>