From 142a9b888d285b53bb4cbf8a4a4a837448df9c69 Mon Sep 17 00:00:00 2001 From: JIANG Date: Tue, 30 Dec 2025 18:00:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=95=E4=BD=8D=E6=B0=B4?= =?UTF-8?q?=E5=A4=B4=E6=8D=9F=E5=A4=B1=E8=AE=A1=E7=AE=97=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=88=86=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/OlMap/Controls/StyleEditorPanel.tsx | 33 ++++++++++++++++++--- src/app/OlMap/Controls/Timeline.tsx | 6 ++-- src/app/OlMap/MapComponent.tsx | 11 ++++++- 3 files changed, 43 insertions(+), 7 deletions(-) diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx index 75c5064..fdae165 100644 --- a/src/app/OlMap/Controls/StyleEditorPanel.tsx +++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx @@ -201,6 +201,8 @@ const StyleEditorPanel: React.FC = ({ elevationRange, } = data; + const unitHeadlossRange = [0, 5]; + const { open } = useNotification(); const [applyJunctionStyle, setApplyJunctionStyle] = useState(false); @@ -406,6 +408,8 @@ const StyleEditorPanel: React.FC = ({ layerType === "junctions" && styleConfig.property === "elevation"; const isDiameter = layerType === "pipes" && styleConfig.property === "diameter"; + const isUnitHeadloss = + layerType === "pipes" && styleConfig.property === "unit_headloss"; if ( layerType === "junctions" && @@ -479,7 +483,8 @@ const StyleEditorPanel: React.FC = ({ } else if ( layerType === "pipes" && ((currentPipeCalData && currentPipeCalData.length > 0) || - (isDiameter && diameterRange)) + (isDiameter && diameterRange) || + isUnitHeadloss) ) { // 应用管道样式 let pipeStyleConfigState = layerStyleStates.find( @@ -492,6 +497,8 @@ const StyleEditorPanel: React.FC = ({ const dataValues = isDiameter && diameterRange ? [diameterRange[0], diameterRange[1]] + : isUnitHeadloss + ? [unitHeadlossRange[0], unitHeadlossRange[1]] : currentPipeCalData?.map((d: any) => d.value) || []; if (dataValues.length === 0) return; @@ -617,7 +624,15 @@ const StyleEditorPanel: React.FC = ({ const conditions: any[] = ["case"]; for (let i = 1; i < breaks.length; i++) { // 添加条件：属性值 <= 当前断点 - conditions.push(["<=", ["get", property], breaks[i]]); + if (property === "unit_headloss") { + conditions.push([ + "<=", + ["/", ["get", "unit_headloss"], ["/", ["get", "length"], 1000]], + breaks[i], + ]); + } else { + conditions.push(["<=", ["get", property], breaks[i]]); + } // 添加对应的颜色值 const colorObj = parseColor(colors[i - 1]); const color = `rgba(${colorObj.r}, ${colorObj.g}, ${colorObj.b}, ${styleConfig.opacity})`; @@ -633,7 +648,16 @@ const StyleEditorPanel: React.FC = ({ const generateDimensionConditions = (property: string): any[] => { const conditions: any[] = ["case"]; for (let i = 0; i < breaks.length; i++) { - conditions.push(["<=", ["get", property], breaks[i]]); + // 单独处理 unit_headloss 属性 + if (property === "unit_headloss") { + conditions.push([ + "<=", + ["/", ["get", "headloss"], ["get", "length"]], + breaks[i], + ]); + } else { + conditions.push(["<=", ["get", property], breaks[i]]); + } conditions.push(dimensions[i]); } conditions.push(dimensions[dimensions.length - 1]); @@ -679,7 +703,8 @@ const StyleEditorPanel: React.FC = ({ ); dynamicStyle["circle-stroke-width"] = 2; } - + console.log("应用样式：", dynamicStyle); + // 应用样式到图层 renderLayer.setStyle(dynamicStyle); // 用初始化时的样式配置更新图例配置，避免覆盖已有的图例名称和属性 const layerId = renderLayer.get("value"); diff --git a/src/app/OlMap/Controls/Timeline.tsx b/src/app/OlMap/Controls/Timeline.tsx index 5ec9b98..8ceb749 100644 --- a/src/app/OlMap/Controls/Timeline.tsx +++ b/src/app/OlMap/Controls/Timeline.tsx @@ -126,6 +126,8 @@ const Timeline: React.FC = ({ requests.push(nodePromise); } } + // 处理特殊属性名称 + if (pipeProperties === "unit_headloss") pipeProperties = "headloss"; // 检查link缓存 if (pipeProperties !== "" && pipeProperties !== "diameter") { @@ -374,8 +376,8 @@ const Timeline: React.FC = ({ // 首次加载时，如果 selectedDate 或 currentTime 未定义，则跳过执行，避免报错 if (selectedDate && currentTime !== undefined && currentTime !== -1) { // 检查至少一个属性有值 - const junctionProperties = junctionText; - const pipeProperties = pipeText; + // const junctionProperties = junctionText; + // const pipeProperties = pipeText; // if (junctionProperties === "" && pipeProperties === "") { // open?.({ // type: "error", diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 176f951..86ffd5c 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -566,6 +566,7 @@ const MapComponent: React.FC = ({ children }) => { data.set(featureId, { id: featureId, diameter: props.diameter || 0, + length: props.length || 0, path: lineCoordsWGS84, // 使用重建后的坐标 position: midPoint, angle: lineAngle, @@ -833,13 +834,21 @@ const MapComponent: React.FC = ({ children }) => { let idPart = showPipeId ? d.id : ""; let propPart = ""; if (showPipeTextLayer && d[pipeText] !== undefined) { - const value = Math.abs(d[pipeText] as number).toFixed(3); + let value; + if (pipeText === "unit_headloss") { + value = ( + (d["unit_headloss"] / (d["length"] / 1000)) as number + ).toFixed(3); + } else { + value = Math.abs(d[pipeText] as number).toFixed(3); + } // 根据属性类型添加符号前缀 const prefix = { flow: "F:", velocity: "V:", headloss: "HL:", + unit_headloss: "UHL:", diameter: "D:", friction: "FR:", }[pipeText] || "";