新增单位水头损失计算属性分级

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -201,6 +201,8 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     elevationRange,
   } = data;
 
+  const unitHeadlossRange = [0, 5];
+
   const { open } = useNotification();
 
   const [applyJunctionStyle, setApplyJunctionStyle] = useState(false);
@@ -406,6 +408,8 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       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<StyleEditorPanelProps> = ({
     } 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<StyleEditorPanelProps> = ({
       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<StyleEditorPanelProps> = ({
       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<StyleEditorPanelProps> = ({
     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<StyleEditorPanelProps> = ({
       );
       dynamicStyle["circle-stroke-width"] = 2;
     }
-
+    console.log("应用样式：", dynamicStyle);
+    // 应用样式到图层
     renderLayer.setStyle(dynamicStyle);
     // 用初始化时的样式配置更新图例配置，避免覆盖已有的图例名称和属性
     const layerId = renderLayer.get("value");

src/app/OlMap/Controls/Timeline.tsx

@@ -126,6 +126,8 @@ const Timeline: React.FC<TimelineProps> = ({
         requests.push(nodePromise);
       }
     }
+    // 处理特殊属性名称
+    if (pipeProperties === "unit_headloss") pipeProperties = "headloss";
 
     // 检查link缓存
     if (pipeProperties !== "" && pipeProperties !== "diameter") {
@@ -374,8 +376,8 @@ const Timeline: React.FC<TimelineProps> = ({
     // 首次加载时，如果 selectedDate 或 currentTime 未定义，则跳过执行，避免报错
     if (selectedDate && currentTime !== undefined && currentTime !== -1) {
       // 检查至少一个属性有值
-      const junctionProperties = junctionText;
+      // const junctionProperties = junctionText;
-      const pipeProperties = pipeText;
+      // const pipeProperties = pipeText;
       // if (junctionProperties === "" && pipeProperties === "") {
       //   open?.({
       //     type: "error",

src/app/OlMap/MapComponent.tsx

@@ -566,6 +566,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ 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<MapComponentProps> = ({ 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] || "";