From 09684b21716575f3e3c96487ded2ab284d34be22 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Fri, 14 Nov 2025 17:49:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9B=BE=E4=BE=8B=EF=BC=8C?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E5=B0=8F=E4=BA=8E=E9=9B=B6=E7=9A=84=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/OlMap/Controls/StyleEditorPanel.tsx |  1 -
 src/app/OlMap/Controls/StyleLegend.tsx      | 44 +++++++++++++++++----
 src/app/OlMap/MapComponent.tsx              | 13 +-----
 src/utils/breaks_classification.js          |  6 ++-
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx
index 30b9a09..82d1848 100644
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx
@@ -438,7 +438,6 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     // 动态生成颜色条件表达式
     const generateColorConditions = (property: string): any[] => {
       const conditions: any[] = ["case"];
-
       for (let i = 0; i < breaks.length; i++) {
         // 添加条件：属性值 <= 当前断点
         conditions.push(["<=", ["get", property], breaks[i]]);
diff --git a/src/app/OlMap/Controls/StyleLegend.tsx b/src/app/OlMap/Controls/StyleLegend.tsx
index 18afa9b..1c3aa87 100644
--- a/src/app/OlMap/Controls/StyleLegend.tsx
+++ b/src/app/OlMap/Controls/StyleLegend.tsx
@@ -32,13 +32,12 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
       <Typography variant="subtitle2" gutterBottom>
         {layerName} - {property}
       </Typography>
-      {breaks.map((breakValue, index) => {
+      {[...Array(breaks.length)].map((_, index) => {
         const color = colors[index]; // 默认颜色为黑色
-        // 获取对应的尺寸和分段值
         const dimension = dimensions[index]; // 默认尺寸为16
-        const nextValue = breaks[index + 1]; // 下一个值或默认0
-        // 确保分段区间均有意义
-        if (nextValue !== undefined) {
+
+        // 处理第一个区间（小于 breaks[0]）
+        if (index === 0) {
           return (
             <Box key={index} className="flex items-center gap-2 mb-1">
               <Box
@@ -49,7 +48,6 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
                         height: dimension,
                         borderRadius: "50%",
                         backgroundColor: color,
-                        //   border: `1px solid ${color}`,
                       }
                     : {
                         width: 16,
@@ -60,11 +58,43 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
                 }
               />
               <Typography variant="caption" className="text-xs">
-                {breakValue?.toFixed(1)} - {nextValue?.toFixed(1)}
+                {"<"} {breaks[0]?.toFixed(1)}
               </Typography>
             </Box>
           );
         }
+
+        // 处理中间区间（breaks[index-1] - breaks[index]）
+        if (index < breaks.length) {
+          const prevValue = breaks[index - 1];
+          const currentValue = breaks[index];
+          return (
+            <Box key={index} className="flex items-center gap-2 mb-1">
+              <Box
+                sx={
+                  type === "point"
+                    ? {
+                        width: dimension,
+                        height: dimension,
+                        borderRadius: "50%",
+                        backgroundColor: color,
+                      }
+                    : {
+                        width: 16,
+                        height: dimension,
+                        backgroundColor: color,
+                        border: `1px solid ${color}`,
+                      }
+                }
+              />
+              <Typography variant="caption" className="text-xs">
+                {prevValue?.toFixed(1)} - {currentValue?.toFixed(1)}
+              </Typography>
+            </Box>
+          );
+        }
+
+        return null;
       })}
     </Box>
   );
diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx
index edf021e..c77e258 100644
--- a/src/app/OlMap/MapComponent.tsx
+++ b/src/app/OlMap/MapComponent.tsx
@@ -214,17 +214,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       }),
     });
   };
-  // 定义 valves 图层的样式函数，使用固定图标
-  // const valveStyle = () => {
-  //   const valveIcon = "/icons/valve.svg";
-  //   return new Style({
-  //     image: new Icon({
-  //       src: valveIcon,
-  //       scale: 0.1, // 根据需要调整图标大小
-  //       anchor: [0.5, 0.5], // 图标锚点居中
-  //     }),
-  //   });
-  // };
   const valveStyle = {
     "icon-src": "/icons/valve.svg",
     "icon-scale": 0.1,
@@ -681,7 +670,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         getPosition: (d: any) => d.position,
         fontFamily: "Monaco, monospace",
         getText: (d: any) =>
-          d[pipeText] ? (d[pipeText] as number).toFixed(3) : "",
+          d[pipeText] ? Math.abs(d[pipeText] as number).toFixed(3) : "",
         getSize: 18,
         fontWeight: "bold",
         getColor: [0, 0, 0],
diff --git a/src/utils/breaks_classification.js b/src/utils/breaks_classification.js
index a29a863..5be3974 100644
--- a/src/utils/breaks_classification.js
+++ b/src/utils/breaks_classification.js
@@ -10,10 +10,12 @@ function prettyBreaksClassification(data, n_classes) {
 
     // const min_val = Math.min(...data);
     // const max_val = Math.max(...data);
-    const min_val = data.reduce((min, val) => Math.min(min, val), Infinity);
+    // const min_val = data.reduce((min, val) => Math.min(min, val), Infinity);
+    // 保证最小值不小于0
+    const min_val = Math.max(data.reduce((min, val) => Math.min(min, val), Infinity), 0);
     const max_val = data.reduce((max, val) => Math.max(max, val), -Infinity);
     const data_range = max_val - min_val;
-
+    
     // 计算基础间隔
     const raw_interval = data_range / n_classes;