新增水质分析功能模块

src/app/OlMap/MapComponent.tsx

@@ -111,7 +111,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [schemeName, setSchemeName] = useState<string>(""); // 当前方案名称
   // 记录 id、对应属性的计算值
   const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
-    []
+    [],
   );
   const [currentPipeCalData, setCurrentPipeCalData] = useState<any[]>([]);
   // junctionData 和 pipeData 分别缓存瓦片解析后节点和管道的数据，用于 deck.gl 定位、标签渲染
@@ -180,7 +180,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         setPipeData(tilePipeDataBuffer.current);
         tilePipeDataBuffer.current = [];
       }
-    }, 100)
+    }, 100),
   );
 
   const setJunctionData = (newData: any[]) => {
@@ -317,7 +317,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
             scale: 0.12,
             anchor: [0.5, 0.5],
           }),
-        })
+        }),
       );
     }
     return styles;
@@ -500,7 +500,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           const uniqueData = Array.from(data.values());
           if (uniqueData.length > 0) {
             uniqueData.forEach((item) =>
-              tileJunctionDataBuffer.current.push(item)
+              tileJunctionDataBuffer.current.push(item),
             );
             debouncedUpdateData.current();
           }
@@ -709,7 +709,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         if (center && typeof zoom === "number") {
           localStorage.setItem(
             MAP_VIEW_STORAGE_KEY,
-            JSON.stringify({ center, zoom })
+            JSON.stringify({ center, zoom }),
           );
         }
       } catch (err) {
@@ -947,27 +947,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
 
     // 动画循环
     const animate = () => {
-      if (!flowAnimation.current) {
-        try {
-          deckLayer.removeDeckLayer("waterflowLayer");
-        } catch (error) {
-          console.error("Error in animation loop:", error);
-        }
-        return;
-      }
       // 动画总时长（秒）
-      if (mergedPipeData.length === 0) {
-        animationFrameId = requestAnimationFrame(animate);
-        return;
-      }
       const animationDuration = 10;
-      // 缓冲时间（秒）
       const bufferTime = 2;
-      // 完整循环周期
       const loopLength = animationDuration + bufferTime;
-      // 确保时间范围与你的时间戳数据匹配
-      const currentTime = (Date.now() / 1000) % loopLength; // (0,12) 之间循环
-      // console.log("Current Time:", currentTime);
+      const currentTime = (Date.now() / 1000) % loopLength;
+
       const waterflowLayer = new TripsLayer({
         id: "waterflowLayer",
         name: "水流",
@@ -981,7 +966,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         visible:
           isWaterflowLayerAvailable &&
           showWaterflowLayer &&
-          flowAnimation.current &&
+          flowAnimation.current && // 保持动画标志作为可见性的一部分
           currentZoom >= 12 &&
           currentZoom <= 24,
         widthMinPixels: 5,
@@ -990,13 +975,17 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         trailLength: 2, // 水流尾迹淡出时间
         currentTime: currentTime,
       });
+
       if (deckLayer.getDeckLayerById("waterflowLayer")) {
         deckLayer.updateDeckLayer("waterflowLayer", waterflowLayer);
       } else {
         deckLayer.addDeckLayer(waterflowLayer);
       }
-      // 继续请求动画帧，每帧执行一次函数
-      animationFrameId = requestAnimationFrame(animate);
+
+      // 只有在需要动画时才请求下一帧，但图层已经添加到了 deckLayer 中
+      if (flowAnimation.current) {
+        animationFrameId = requestAnimationFrame(animate);
+      }
     };
     animate();
 
@@ -1007,6 +996,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       }
     };
   }, [
+    currentPipeCalData,
     currentZoom,
     mergedPipeData,
     pipeText,