diff --git a/src/app/OlMap/Controls/PropertyPanel.tsx b/src/app/OlMap/Controls/PropertyPanel.tsx index eee1907..721fc03 100644 --- a/src/app/OlMap/Controls/PropertyPanel.tsx +++ b/src/app/OlMap/Controls/PropertyPanel.tsx @@ -50,7 +50,7 @@ const PropertyPanel: React.FC = ({ : 0; return ( -
+
{/* 头部 */}
diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx index 14120a9..a55b852 100644 --- a/src/app/OlMap/Controls/StyleEditorPanel.tsx +++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx @@ -31,6 +31,7 @@ import { parseColor } from "@utils/parseColor"; import { VectorTile } from "ol"; import { useNotification } from "@refinedev/core"; import { config } from "@/config/config"; +import { constructNow, min } from "date-fns"; interface StyleConfig { property: string; @@ -401,8 +402,8 @@ const StyleEditorPanel: React.FC = ({ junctionStyleConfigState?.styleConfig.classificationMethod === "custom_breaks" ) { - // 使用自定义断点(保证为 segments + 1 个断点,按升序) - const desired = segments + 1; + // 使用自定义断点(保证为 segments 个断点,按升序) + const desired = segments; breaks = ( junctionStyleConfigState?.styleConfig.customBreaks || [] ).slice(0, desired); @@ -412,6 +413,7 @@ const StyleEditorPanel: React.FC = ({ // 如果不足则补齐最后一个值 while (breaks.length < desired) breaks.push(breaks[breaks.length - 1] ?? 0); + console.log(breaks); } else { const calc = calculateClassification( currentJunctionCalData.map((d) => d.value), @@ -424,6 +426,21 @@ const StyleEditorPanel: React.FC = ({ console.warn("计算的 breaks 为空,无法应用样式"); return; } + // 计算最大最小值,判断是否包含并插入 breaks + const data = currentJunctionCalData.map((d) => d.value); + 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); + if (breaks.includes(min_val) === false) { + breaks.push(min_val); + breaks.sort((a, b) => a - b); + } + if (breaks.includes(max_val) === false) { + breaks.push(max_val); + breaks.sort((a, b) => a - b); + } if (junctionStyleConfigState) applyLayerStyle(junctionStyleConfigState, breaks); } else if ( @@ -442,8 +459,8 @@ const StyleEditorPanel: React.FC = ({ pipeStyleConfigState?.styleConfig.classificationMethod === "custom_breaks" ) { - // 使用自定义断点(保证为 segments + 1 个断点,按升序) - const desired = segments + 1; + // 使用自定义断点(保证为 segments 个断点,按升序) + const desired = segments; breaks = (pipeStyleConfigState?.styleConfig.customBreaks || []).slice( 0, desired @@ -460,6 +477,25 @@ const StyleEditorPanel: React.FC = ({ ); breaks = calc; } + if (breaks.length === 0) { + console.warn("计算的 breaks 为空,无法应用样式"); + return; + } + // 计算最大最小值,判断是否包含并插入 breaks + const data = currentPipeCalData.map((d) => d.value); + 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); + if (breaks.includes(min_val) === false) { + breaks.push(min_val); + breaks.sort((a, b) => a - b); + } + if (breaks.includes(max_val) === false) { + breaks.push(max_val); + breaks.sort((a, b) => a - b); + } if (pipeStyleConfigState) applyLayerStyle(pipeStyleConfigState, breaks); } }; @@ -497,10 +533,15 @@ const StyleEditorPanel: React.FC = ({ : (() => { // 自定义颜色 const custom = styleConfig.customColors || []; - // 如果自定义颜色数量不足,用默认颜色补齐(这里简单用红色,或者重复最后一个) + // 如果自定义颜色数量不足,用反向彩虹色填充 const result = [...custom]; + const reverseRainbowColors = RAINBOW_PALETTES[1].colors; while (result.length < breaksLength) { - result.push(result[result.length - 1] || "rgba(255, 0, 0, 1)"); + result.push( + reverseRainbowColors[ + (result.length - custom.length) % reverseRainbowColors.length + ] + ); } return result.slice(0, breaksLength); })(); @@ -531,17 +572,17 @@ const StyleEditorPanel: React.FC = ({ // 动态生成颜色条件表达式 const generateColorConditions = (property: string): any[] => { const conditions: any[] = ["case"]; - for (let i = 0; i < breaks.length; i++) { + for (let i = 1; i < breaks.length; i++) { // 添加条件:属性值 <= 当前断点 conditions.push(["<=", ["get", property], breaks[i]]); // 添加对应的颜色值 - const colorObj = parseColor(colors[i]); + const colorObj = parseColor(colors[i - 1]); const color = `rgba(${colorObj.r}, ${colorObj.g}, ${colorObj.b}, ${styleConfig.opacity})`; conditions.push(color); } - const colorObj = parseColor(colors[colors.length - 1]); + const colorObj = parseColor(colors[0]); const color = `rgba(${colorObj.r}, ${colorObj.g}, ${colorObj.b}, ${styleConfig.opacity})`; - // 添加默认值(最后一个颜色) + // 添加默认值(首个颜色) conditions.push(color); return conditions; }; diff --git a/src/app/OlMap/Controls/StyleLegend.tsx b/src/app/OlMap/Controls/StyleLegend.tsx index 1c3aa87..1ef83a4 100644 --- a/src/app/OlMap/Controls/StyleLegend.tsx +++ b/src/app/OlMap/Controls/StyleLegend.tsx @@ -36,38 +36,38 @@ const StyleLegend: React.FC = ({ const color = colors[index]; // 默认颜色为黑色 const dimension = dimensions[index]; // 默认尺寸为16 - // 处理第一个区间(小于 breaks[0]) - if (index === 0) { - return ( - - - - {"<"} {breaks[0]?.toFixed(1)} - - - ); - } + // // 处理第一个区间(小于 breaks[0]) + // if (index === 0) { + // return ( + // + // + // + // {"<"} {breaks[0]?.toFixed(1)} + // + // + // ); + // } - // 处理中间区间(breaks[index-1] - breaks[index]) - if (index < breaks.length) { - const prevValue = breaks[index - 1]; - const currentValue = breaks[index]; + // 处理中间区间(breaks[index] - breaks[index + 1]) + if (index + 1 < breaks.length) { + const prevValue = breaks[index]; + const currentValue = breaks[index + 1]; return (