实现管道、节点图层文字属性的切换

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -46,6 +46,7 @@ interface StyleConfig {
   gradientPaletteIndex: number;
   rainbowPaletteIndex: number;
   showLabels: boolean;
+  showId: boolean;
   opacity: number;
   adjustWidthByProperty: boolean; // 是否根据属性调整线条宽度
   customBreaks?: number[]; // 自定义断点（用于 custom_breaks）
@@ -185,11 +186,12 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
   const {
     currentJunctionCalData,
     currentPipeCalData,
-    pipeData,
     junctionText,
     pipeText,
     setShowJunctionTextLayer,
     setShowPipeTextLayer,
+    setShowJunctionId,
+    setShowPipeId,
     setContourLayerAvailable,
     setWaterflowLayerAvailable,
     setJunctionText,
@@ -226,6 +228,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     gradientPaletteIndex: 0,
     rainbowPaletteIndex: 0,
     showLabels: false,
+    showId: false,
     opacity: 0.9,
     adjustWidthByProperty: true,
     customBreaks: [],
@@ -364,32 +367,31 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       }
       // 更新文字标签设置
       if (layerId === "junctions") {
-        if (setJunctionText && setShowJunctionTextLayer) {
+        setJunctionText && setJunctionText(property);
-          setJunctionText(property);
+        setShowJunctionTextLayer &&
           setShowJunctionTextLayer(styleConfig.showLabels);
-          setApplyJunctionStyle(true);
+        setShowJunctionId && setShowJunctionId(styleConfig.showId);
-          if (property === "pressure" && setContourLayerAvailable) {
+        setApplyJunctionStyle(true);
-            setContourLayerAvailable(true);
+        if (property === "pressure" && setContourLayerAvailable) {
-          }
+          setContourLayerAvailable(true);
-          saveLayerStyle(layerId);
-          open?.({
-            type: "success",
-            message: "节点图层样式设置成功，等待数据更新。",
-          });
         }
+        saveLayerStyle(layerId);
+        open?.({
+          type: "success",
+          message: "节点图层样式设置成功，等待数据更新。",
+        });
       }
       if (layerId === "pipes") {
-        if (setPipeText && setShowPipeTextLayer) {
+        setPipeText && setPipeText(property);
-          setPipeText(property);
+        setShowPipeTextLayer && setShowPipeTextLayer(styleConfig.showLabels);
-          setShowPipeTextLayer(styleConfig.showLabels);
+        setShowPipeId && setShowPipeId(styleConfig.showId);
-          setApplyPipeStyle(true);
+        setApplyPipeStyle(true);
-          setWaterflowLayerAvailable && setWaterflowLayerAvailable(true);
+        setWaterflowLayerAvailable && setWaterflowLayerAvailable(true);
-          saveLayerStyle(layerId);
+        saveLayerStyle(layerId);
-          open?.({
+        open?.({
-            type: "success",
+          type: "success",
-            message: "管道图层样式设置成功，等待数据更新。",
+          message: "管道图层样式设置成功，等待数据更新。",
-          });
+        });
-        }
       }
       // 触发样式更新
       setStyleUpdateTrigger((prev) => prev + 1);
@@ -777,12 +779,14 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       if (layerId === "junctions") {
         setApplyJunctionStyle(false);
         if (setShowJunctionTextLayer) setShowJunctionTextLayer(false);
+        if (setShowJunctionId) setShowJunctionId(false);
         if (setJunctionText) setJunctionText("");
         setContours && setContours([]);
         setContourLayerAvailable && setContourLayerAvailable(false);
       } else if (layerId === "pipes") {
         setApplyPipeStyle(false);
         if (setShowPipeTextLayer) setShowPipeTextLayer(false);
+        if (setShowPipeId) setShowPipeId(false);
         if (setPipeText) setPipeText("");
         setWaterflowLayerAvailable && setWaterflowLayerAvailable(false);
       }
@@ -1792,6 +1796,22 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
           />
         </Box>
 
+        {/* 是否显示ID */}
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={styleConfig.showId}
+              onChange={(e) =>
+                setStyleConfig((prev) => ({
+                  ...prev,
+                  showId: e.target.checked,
+                }))
+              }
+            />
+          }
+          label="显示 ID（缩放 >=15 级时显示）"
+        />
+
         {/* 是否显示属性文字 */}
         <FormControlLabel
           control={

src/app/OlMap/Controls/Toolbar.tsx

@@ -76,6 +76,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
         gradientPaletteIndex: 0,
         rainbowPaletteIndex: 0,
         showLabels: false,
+        showId: false,
         opacity: 0.9,
         adjustWidthByProperty: true,
       },
@@ -107,6 +108,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
         gradientPaletteIndex: 0,
         rainbowPaletteIndex: 0,
         showLabels: false,
+        showId: false,
         opacity: 0.9,
         adjustWidthByProperty: true,
       },

src/app/OlMap/MapComponent.tsx

@@ -45,12 +45,15 @@ interface DataContextType {
   currentJunctionCalData?: any[]; // 当前计算结果
   setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
   currentPipeCalData?: any[]; // 当前计算结果
-  pipeData?: any[]; // 管道数据（含坐标等信息）
   setCurrentPipeCalData?: React.Dispatch<React.SetStateAction<any[]>>;
   showJunctionText?: boolean; // 是否显示节点文本
   showPipeText?: boolean; // 是否显示管道文本
+  showJunctionId?: boolean; // 是否显示节点ID
+  showPipeId?: boolean; // 是否显示管道ID
   setShowJunctionTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowPipeTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowJunctionId?: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowPipeId?: React.Dispatch<React.SetStateAction<boolean>>;
   setShowContourLayer?: React.Dispatch<React.SetStateAction<boolean>>;
   isContourLayerAvailable?: boolean;
   setShowWaterflowLayer?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -121,6 +124,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
 
   const [showJunctionTextLayer, setShowJunctionTextLayer] = useState(false); // 控制节点文本图层显示
   const [showPipeTextLayer, setShowPipeTextLayer] = useState(false); // 控制管道文本图层显示
+  const [showJunctionId, setShowJunctionId] = useState(false); // 控制节点ID显示
+  const [showPipeId, setShowPipeId] = useState(false); // 控制管道ID显示
   const [showContourLayer, setShowContourLayer] = useState(false); // 控制等高线图层显示
   const [junctionText, setJunctionText] = useState("pressure");
   const [pipeText, setPipeText] = useState("flow");
@@ -739,6 +744,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     if (!deckLayer) return; // 如果 deck 实例还未创建，则退出
     if (!junctionData.length) return;
     if (!pipeData.length) return;
+    console.log(showJunctionId, showJunctionTextLayer, junctionText);
+    console.log(showPipeId, showPipeTextLayer, pipeText);
     const junctionTextLayer = new TextLayer({
       id: "junctionTextLayer",
       name: "节点文字",
@@ -747,17 +754,22 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       getPosition: (d: any) => d.position,
       fontFamily: "Monaco, monospace",
       getText: (d: any) => {
-        if (!d[junctionText]) return "";
+        let idPart = showJunctionId ? d.id : "";
-        const value = (d[junctionText] as number).toFixed(3);
+        let propPart = "";
-        // 根据属性类型添加符号前缀
+        if (showJunctionTextLayer && d[junctionText] !== undefined) {
-        const prefix =
+          const value = (d[junctionText] as number).toFixed(3);
-          {
+          // 根据属性类型添加符号前缀
-            pressure: "P:",
+          const prefix =
-            head: "H:",
+            {
-            quality: "Q:",
+              pressure: "P:",
-            actualdemand: "D:",
+              head: "H:",
-          }[junctionText] || "";
+              quality: "Q:",
-        return `${prefix}${value}`;
+              actualdemand: "D:",
+            }[junctionText] || "";
+          propPart = `${prefix}${value}`;
+        }
+        if (idPart && propPart) return `${idPart} - ${propPart}`;
+        return idPart || propPart;
       },
       getSize: 14,
       fontWeight: "bold",
@@ -766,7 +778,13 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       getTextAnchor: "middle",
       getAlignmentBaseline: "center",
       getPixelOffset: [0, -10],
-      visible: showJunctionTextLayer && currentZoom >= 15 && currentZoom <= 24,
+      visible:
+        (showJunctionTextLayer || showJunctionId) &&
+        currentZoom >= 15 &&
+        currentZoom <= 24,
+      updateTriggers: {
+        getText: [showJunctionId, showJunctionTextLayer, junctionText],
+      },
       extensions: [new CollisionFilterExtension()],
       collisionTestProps: {
         sizeScale: 3,
@@ -789,18 +807,23 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       getPosition: (d: any) => d.position,
       fontFamily: "Monaco, monospace",
       getText: (d: any) => {
-        if (!d[pipeText]) return "";
+        let idPart = showPipeId ? d.id : "";
-        const value = Math.abs(d[pipeText] as number).toFixed(3);
+        let propPart = "";
-        // 根据属性类型添加符号前缀
+        if (showPipeTextLayer && d[pipeText] !== undefined) {
-        const prefix =
+          const value = Math.abs(d[pipeText] as number).toFixed(3);
-          {
+          // 根据属性类型添加符号前缀
-            flow: "F:",
+          const prefix =
-            velocity: "V:",
+            {
-            headloss: "HL:",
+              flow: "F:",
-            diameter: "D:",
+              velocity: "V:",
-            friction: "FR:",
+              headloss: "HL:",
-          }[pipeText] || "";
+              diameter: "D:",
-        return `${prefix}${value}`;
+              friction: "FR:",
+            }[pipeText] || "";
+          propPart = `${prefix}${value}`;
+        }
+        if (idPart && propPart) return `${idPart} - ${propPart}`;
+        return idPart || propPart;
       },
       getSize: 14,
       fontWeight: "bold",
@@ -809,7 +832,13 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       getPixelOffset: [0, -8],
       getTextAnchor: "middle",
       getAlignmentBaseline: "bottom",
-      visible: showPipeTextLayer && currentZoom >= 15 && currentZoom <= 24,
+      visible:
+        (showPipeTextLayer || showPipeId) &&
+        currentZoom >= 15 &&
+        currentZoom <= 24,
+      updateTriggers: {
+        getText: [showPipeId, showPipeTextLayer, pipeText],
+      },
       extensions: [new CollisionFilterExtension()],
       collisionTestProps: {
         sizeScale: 3,
@@ -845,6 +874,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       deckLayer.addDeckLayer(junctionTextLayer);
     }
     if (deckLayer.getDeckLayerById("pipeTextLayer")) {
+      console.log("更新管道文字图层");
       deckLayer.updateDeckLayer("pipeTextLayer", pipeTextLayer);
     } else {
       deckLayer.addDeckLayer(pipeTextLayer);
@@ -860,6 +890,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     currentZoom,
     showJunctionTextLayer,
     showPipeTextLayer,
+    showJunctionId,
+    showPipeId,
     showContourLayer,
     junctionText,
     pipeText,
@@ -1015,9 +1047,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           setCurrentJunctionCalData,
           currentPipeCalData,
           setCurrentPipeCalData,
-          pipeData,
           setShowJunctionTextLayer,
           setShowPipeTextLayer,
+          setShowJunctionId,
+          setShowPipeId,
+          showJunctionId,
+          showPipeId,
           setShowContourLayer,
           isContourLayerAvailable,
           setContourLayerAvailable,