更新图例，处理小于零的异常数据显示

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]]);

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
+
-        // 确保分段区间均有意义
+        // 处理第一个区间（小于 breaks[0]）
-        if (nextValue !== undefined) {
+        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>
   );

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],

src/utils/breaks_classification.js

@@ -10,7 +10,9 @@ 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;