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

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
-        // 确保分段区间均有意义
-        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>
   );