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

2025-12-30 11:05:55 +08:00
parent 4b257aa959
commit 7285a3315f
3 changed files with 107 additions and 50 deletions
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/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={
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/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,
      },
--- a/src/app/OlMap/MapComponent.tsx
+++ b/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 "";
-        const value = (d[junctionText] as number).toFixed(3);
-        // 根据属性类型添加符号前缀
-        const prefix =
-          {
-            pressure: "P:",
-            head: "H:",
-            quality: "Q:",
-            actualdemand: "D:",
-          }[junctionText] || "";
-        return `${prefix}${value}`;
+        let idPart = showJunctionId ? d.id : "";
+        let propPart = "";
+        if (showJunctionTextLayer && d[junctionText] !== undefined) {
+          const value = (d[junctionText] as number).toFixed(3);
+          // 根据属性类型添加符号前缀
+          const prefix =
+            {
+              pressure: "P:",
+              head: "H:",
+              quality: "Q:",
+              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 "";
-        const value = Math.abs(d[pipeText] as number).toFixed(3);
-        // 根据属性类型添加符号前缀
-        const prefix =
-          {
-            flow: "F:",
-            velocity: "V:",
-            headloss: "HL:",
-            diameter: "D:",
-            friction: "FR:",
-          }[pipeText] || "";
-        return `${prefix}${value}`;
+        let idPart = showPipeId ? d.id : "";
+        let propPart = "";
+        if (showPipeTextLayer && d[pipeText] !== undefined) {
+          const value = Math.abs(d[pipeText] as number).toFixed(3);
+          // 根据属性类型添加符号前缀
+          const prefix =
+            {
+              flow: "F:",
+              velocity: "V:",
+              headloss: "HL:",
+              diameter: "D:",
+              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,