From 7285a3315fd9d052c029333d9c2587e727f43a24 Mon Sep 17 00:00:00 2001 From: JIANG Date: Tue, 30 Dec 2025 11:05:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=AE=A1=E9=81=93=E3=80=81?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=9B=BE=E5=B1=82=E6=96=87=E5=AD=97=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E7=9A=84=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/OlMap/Controls/StyleEditorPanel.tsx | 66 +++++++++------ src/app/OlMap/Controls/Toolbar.tsx | 2 + src/app/OlMap/MapComponent.tsx | 89 ++++++++++++++------- 3 files changed, 107 insertions(+), 50 deletions(-) diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx index 9b4f667..ffbdaaa 100644 --- 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 = ({ const { currentJunctionCalData, currentPipeCalData, - pipeData, junctionText, pipeText, setShowJunctionTextLayer, setShowPipeTextLayer, + setShowJunctionId, + setShowPipeId, setContourLayerAvailable, setWaterflowLayerAvailable, setJunctionText, @@ -226,6 +228,7 @@ const StyleEditorPanel: React.FC = ({ gradientPaletteIndex: 0, rainbowPaletteIndex: 0, showLabels: false, + showId: false, opacity: 0.9, adjustWidthByProperty: true, customBreaks: [], @@ -364,32 +367,31 @@ const StyleEditorPanel: React.FC = ({ } // 更新文字标签设置 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 = ({ 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 = ({ /> + {/* 是否显示ID */} + + setStyleConfig((prev) => ({ + ...prev, + showId: e.target.checked, + })) + } + /> + } + label="显示 ID（缩放 >=15 级时显示）" + /> + {/* 是否显示属性文字 */} = ({ gradientPaletteIndex: 0, rainbowPaletteIndex: 0, showLabels: false, + showId: false, opacity: 0.9, adjustWidthByProperty: true, }, @@ -107,6 +108,7 @@ const Toolbar: React.FC = ({ gradientPaletteIndex: 0, rainbowPaletteIndex: 0, showLabels: false, + showId: false, opacity: 0.9, adjustWidthByProperty: true, }, diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 497e7ce..8aa8d28 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -45,12 +45,15 @@ interface DataContextType { currentJunctionCalData?: any[]; // 当前计算结果 setCurrentJunctionCalData?: React.Dispatch>; currentPipeCalData?: any[]; // 当前计算结果 - pipeData?: any[]; // 管道数据（含坐标等信息） setCurrentPipeCalData?: React.Dispatch>; showJunctionText?: boolean; // 是否显示节点文本 showPipeText?: boolean; // 是否显示管道文本 + showJunctionId?: boolean; // 是否显示节点ID + showPipeId?: boolean; // 是否显示管道ID setShowJunctionTextLayer?: React.Dispatch>; setShowPipeTextLayer?: React.Dispatch>; + setShowJunctionId?: React.Dispatch>; + setShowPipeId?: React.Dispatch>; setShowContourLayer?: React.Dispatch>; isContourLayerAvailable?: boolean; setShowWaterflowLayer?: React.Dispatch>; @@ -121,6 +124,8 @@ const MapComponent: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ children }) => { currentZoom, showJunctionTextLayer, showPipeTextLayer, + showJunctionId, + showPipeId, showContourLayer, junctionText, pipeText, @@ -1015,9 +1047,12 @@ const MapComponent: React.FC = ({ children }) => { setCurrentJunctionCalData, currentPipeCalData, setCurrentPipeCalData, - pipeData, setShowJunctionTextLayer, setShowPipeTextLayer, + setShowJunctionId, + setShowPipeId, + showJunctionId, + showPipeId, setShowContourLayer, isContourLayerAvailable, setContourLayerAvailable,