新增等值线图样式自定义功能

src/app/OlMap/MapComponent.tsx

@@ -62,7 +62,8 @@ interface DataContextType {
   pipeText: string;
   setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
-  deckLayer?: DeckLayer; // DeckLayer 实例
+  setContours?: React.Dispatch<React.SetStateAction<any[]>>;
+  deckLayer?: DeckLayer;
 }
 
 // 跨组件传递
@@ -122,6 +123,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [showContourLayer, setShowContourLayer] = useState(false); // 控制等高线图层显示
   const [junctionText, setJunctionText] = useState("pressure");
   const [pipeText, setPipeText] = useState("flow");
+  const [contours, setContours] = useState<any[]>([]);
   const flowAnimation = useRef(false); // 添加动画控制标志
   const [isContourLayerAvailable, setContourLayerAvailable] = useState(false); // 控制等高线图层显示
   const [isWaterflowLayerAvailable, setWaterflowLayerAvailable] =
@@ -773,7 +775,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       // outlineColor: [255, 255, 255, 220],
     });
 
-    const ALPHA = 102;
     const contourLayer = new ContourLayer({
       id: "junctionContourLayer",
       name: "等值线",
@@ -781,15 +782,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       aggregation: "MEAN",
       cellSize: 600,
       strokeWidth: 0,
-      contours: [
-        // { threshold: [0, 16], color: [255, 0, 0, ALPHA], strokeWidth: 0 },
-        { threshold: [16, 18], color: [255, 0, 0, 0], strokeWidth: 0 },
-        { threshold: [18, 20], color: [255, 127, 0, ALPHA], strokeWidth: 0 },
-        { threshold: [20, 22], color: [255, 215, 0, ALPHA], strokeWidth: 0 },
-        { threshold: [22, 24], color: [199, 224, 0, ALPHA], strokeWidth: 0 },
-        { threshold: [24, 26], color: [76, 175, 80, ALPHA], strokeWidth: 0 },
-        { threshold: [26, 30], color: [63, 81, 181, ALPHA], strokeWidth: 0 },
-      ],
+      contours: contours,
       getPosition: (d) => d.position,
       getWeight: (d: any) =>
         (d[junctionText] as number) < 0 ? 0 : (d[junctionText] as number),
@@ -821,7 +814,11 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     showContourLayer,
     junctionText,
     pipeText,
+    contours,
   ]);
+  useEffect(() => {
+    console.log("Contour Layer Available:", isContourLayerAvailable);
+  }, [isContourLayerAvailable]);
   // 控制流动动画开关
   useEffect(() => {
     if (pipeText === "flow" && currentPipeCalData.length > 0) {
@@ -879,11 +876,11 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         trailLength: 2, // 水流尾迹淡出时间
         currentTime: currentTime,
       });
-      if (deckLayer.getDeckLayerById("waterflowLayer")) {
-        deckLayer.updateDeckLayer("waterflowLayer", waterflowLayer);
-      } else {
-        deckLayer.addDeckLayer(waterflowLayer);
-      }
+      // if (deckLayer.getDeckLayerById("waterflowLayer")) {
+      //   deckLayer.updateDeckLayer("waterflowLayer", waterflowLayer);
+      // } else {
+      //   deckLayer.addDeckLayer(waterflowLayer);
+      // }
       // 继续请求动画帧，每帧执行一次函数
       animationFrameId = requestAnimationFrame(animate);
     };
@@ -917,41 +914,45 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     const linkMap: Map<string, any> = new Map(
       currentPipeCalData.map((r: any) => [r.ID, r])
     );
-
-    // 更新junctionData
-    setJunctionDataState((prev: any[]) =>
-      prev.map((j) => {
-        const record = nodeMap.get(j.id);
-        if (record) {
-          return {
-            ...j,
-            [junctionProperties]: record.value,
-          };
-        }
-        return j;
-      })
-    );
-
-    // 更新pipeData
-    setPipeDataState((prev: any[]) =>
-      prev.map((p) => {
-        const record = linkMap.get(p.id);
-        if (record) {
-          return {
-            ...p,
-            flowFlag: pipeProperties === "flow" && record.value < 0 ? -1 : 1,
-            path:
-              pipeProperties === "flow" && record.value < 0 && p.flowFlag > 0
-                ? [...p.path].reverse()
-                : p.path,
-            // 流量数值
-            [pipeProperties]:
-              pipeProperties === "flow" ? Math.abs(record.value) : record.value,
-          };
-        }
-        return p;
-      })
-    );
+    if (nodeMap.size > 0) {
+      // 更新junctionData
+      setJunctionDataState((prev: any[]) =>
+        prev.map((j) => {
+          const record = nodeMap.get(j.id);
+          if (record) {
+            return {
+              ...j,
+              [junctionProperties]: record.value,
+            };
+          }
+          return j;
+        })
+      );
+    }
+    if (linkMap.size > 0) {
+      // 更新pipeData
+      setPipeDataState((prev: any[]) =>
+        prev.map((p) => {
+          const record = linkMap.get(p.id);
+          if (record) {
+            return {
+              ...p,
+              flowFlag: pipeProperties === "flow" && record.value < 0 ? -1 : 1,
+              path:
+                pipeProperties === "flow" && record.value < 0 && p.flowFlag > 0
+                  ? [...p.path].reverse()
+                  : p.path,
+              // 流量数值
+              [pipeProperties]:
+                pipeProperties === "flow"
+                  ? Math.abs(record.value)
+                  : record.value,
+            };
+          }
+          return p;
+        })
+      );
+    }
   }, [currentJunctionCalData, currentPipeCalData]);
   return (
     <>
@@ -981,6 +982,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           setPipeText,
           junctionText,
           pipeText,
+          setContours,
           deckLayer,
         }}
       >