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

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(property);
+        setJunctionText && setJunctionText(property);
+        setShowJunctionTextLayer &&
           setShowJunctionTextLayer(styleConfig.showLabels);
-          setApplyJunctionStyle(true);
-          if (property === "pressure" && setContourLayerAvailable) {
-            setContourLayerAvailable(true);
-          }
-          saveLayerStyle(layerId);
-          open?.({
-            type: "success",
-            message: "节点图层样式设置成功，等待数据更新。",
-          });
+        setShowJunctionId && setShowJunctionId(styleConfig.showId);
+        setApplyJunctionStyle(true);
+        if (property === "pressure" && setContourLayerAvailable) {
+          setContourLayerAvailable(true);
         }
+        saveLayerStyle(layerId);
+        open?.({
+          type: "success",
+          message: "节点图层样式设置成功，等待数据更新。",
+        });
       }
       if (layerId === "pipes") {
-        if (setPipeText && setShowPipeTextLayer) {
-          setPipeText(property);
-          setShowPipeTextLayer(styleConfig.showLabels);
-          setApplyPipeStyle(true);
-          setWaterflowLayerAvailable && setWaterflowLayerAvailable(true);
-          saveLayerStyle(layerId);
-          open?.({
-            type: "success",
-            message: "管道图层样式设置成功，等待数据更新。",
-          });
-        }
+        setPipeText && setPipeText(property);
+        setShowPipeTextLayer && setShowPipeTextLayer(styleConfig.showLabels);
+        setShowPipeId && setShowPipeId(styleConfig.showId);
+        setApplyPipeStyle(true);
+        setWaterflowLayerAvailable && setWaterflowLayerAvailable(true);
+        saveLayerStyle(layerId);
+        open?.({
+          type: "success",
+          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={