OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整参数

Browse Source
This commit is contained in:
JIANG
2025-11-18 11:31:57 +08:00
parent d91e618559
commit 01563c3c2d
2 changed files with 52 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/OlMap/Controls/StyleEditorPanel.tsx
View File

@@ -42,8 +42,9 @@ interface StyleConfig {
maxStrokeWidth: number; // 最大线宽 maxStrokeWidth: number; // 最大线宽
fixedStrokeWidth: number; // 固定线宽 fixedStrokeWidth: number; // 固定线宽
colorType: string; // 颜色类型 colorType: string; // 颜色类型
startColor: string; singlePaletteIndex: number;
endColor: string; gradientPaletteIndex: number;
rainbowPaletteIndex: number;
showLabels: boolean; showLabels: boolean;
opacity: number; opacity: number;
adjustWidthByProperty: boolean; // 是否根据属性调整线条宽度 adjustWidthByProperty: boolean; // 是否根据属性调整线条宽度
@@ -51,7 +52,7 @@ interface StyleConfig {
} }
// 图层样式状态接口 // 图层样式状态接口
interface LayerStyleState { export interface LayerStyleState {
layerId: string; layerId: string;
layerName: string; layerName: string;
styleConfig: StyleConfig; styleConfig: StyleConfig;
@@ -191,28 +192,26 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
maxStrokeWidth: 6, maxStrokeWidth: 6,
fixedStrokeWidth: 3, fixedStrokeWidth: 3,
colorType: "single", colorType: "single",
startColor: "rgba(51, 153, 204, 0.9)", singlePaletteIndex: 0,
endColor: "rgba(204, 51, 51, 0.9)", gradientPaletteIndex: 0,
rainbowPaletteIndex: 0,
showLabels: false, showLabels: false,
opacity: 0.9, opacity: 0.9,
adjustWidthByProperty: true, adjustWidthByProperty: true,
customBreaks: [], customBreaks: [],
}); });
// 颜色方案选择
const [singlePaletteIndex, setSinglePaletteIndex] = useState(0);
const [gradientPaletteIndex, setGradientPaletteIndex] = useState(0);
const [rainbowPaletteIndex, setRainbowPaletteIndex] = useState(0);
// 根据分段数生成相应数量的渐进颜色 // 根据分段数生成相应数量的渐进颜色
const generateGradientColors = useCallback( const generateGradientColors = useCallback(
(segments: number): string[] => { (segments: number): string[] => {
const { start, end } = GRADIENT_PALETTES[gradientPaletteIndex]; const { start, end } =
GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
const colors: string[] = []; const colors: string[] = [];
const startColor = parseColor(start); const startColor = parseColor(start);
const endColor = parseColor(end); const endColor = parseColor(end);
for (let i = 0; i < segments; i++) { for (let i = 0; i < segments; i++) {
const ratio = i / (segments - 1); const ratio = segments > 1 ? i / (segments - 1) : 1;
const r = Math.round( const r = Math.round(
startColor.r + (endColor.r - startColor.r) * ratio startColor.r + (endColor.r - startColor.r) * ratio
); );
@@ -226,13 +225,14 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
} }
return colors; return colors;
}, },
[gradientPaletteIndex, parseColor] [styleConfig.gradientPaletteIndex, parseColor]
); );
// 根据分段数生成彩虹色 // 根据分段数生成彩虹色
const generateRainbowColors = useCallback( const generateRainbowColors = useCallback(
(segments: number): string[] => { (segments: number): string[] => {
const baseColors = RAINBOW_PALETTES[rainbowPaletteIndex].colors; const baseColors =
RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
if (segments <= baseColors.length) { if (segments <= baseColors.length) {
// 如果分段数小于等于基础颜色数,均匀选取 // 如果分段数小于等于基础颜色数,均匀选取
@@ -249,7 +249,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
); );
} }
}, },
[rainbowPaletteIndex] [styleConfig.rainbowPaletteIndex]
); );
// 保存当前图层的样式状态 // 保存当前图层的样式状态
const saveLayerStyle = useCallback( const saveLayerStyle = useCallback(
@@ -473,7 +473,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
styleConfig.colorType === "single" styleConfig.colorType === "single"
? // 单一色重复多次 ? // 单一色重复多次
Array.from({ length: breaksLength }, () => { Array.from({ length: breaksLength }, () => {
return SINGLE_COLOR_PALETTES[singlePaletteIndex].color; return SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
}) })
: styleConfig.colorType === "gradient" : styleConfig.colorType === "gradient"
? generateGradientColors(breaksLength) ? generateGradientColors(breaksLength)
@@ -901,8 +901,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
> >
<InputLabel>单一色方案</InputLabel> <InputLabel>单一色方案</InputLabel>
<Select <Select
value={singlePaletteIndex} value={styleConfig.singlePaletteIndex}
onChange={(e) => setSinglePaletteIndex(Number(e.target.value))} onChange={(e) =>
setStyleConfig((prev) => ({
...prev,
singlePaletteIndex: Number(e.target.value),
}))
}
> >
{SINGLE_COLOR_PALETTES.map((p, idx) => { {SINGLE_COLOR_PALETTES.map((p, idx) => {
return ( return (
@@ -940,8 +945,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
> >
<InputLabel>渐进色方案</InputLabel> <InputLabel>渐进色方案</InputLabel>
<Select <Select
value={gradientPaletteIndex} value={styleConfig.gradientPaletteIndex}
onChange={(e) => setGradientPaletteIndex(Number(e.target.value))} onChange={(e) =>
setStyleConfig((prev) => ({
...prev,
gradientPaletteIndex: Number(e.target.value),
}))
}
> >
{GRADIENT_PALETTES.map((p, idx) => { {GRADIENT_PALETTES.map((p, idx) => {
return ( return (
@@ -978,8 +988,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
> >
<InputLabel>离散彩虹方案</InputLabel> <InputLabel>离散彩虹方案</InputLabel>
<Select <Select
value={rainbowPaletteIndex} value={styleConfig.rainbowPaletteIndex}
onChange={(e) => setRainbowPaletteIndex(Number(e.target.value))} onChange={(e) =>
setStyleConfig((prev) => ({
...prev,
rainbowPaletteIndex: Number(e.target.value),
}))
}
> >
{RAINBOW_PALETTES.map((p, idx) => { {RAINBOW_PALETTES.map((p, idx) => {
// 根据当前分段数生成该方案的预览颜色 // 根据当前分段数生成该方案的预览颜色
@@ -1040,13 +1055,15 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
const getSizeSetting = () => { const getSizeSetting = () => {
let colors: string[] = []; let colors: string[] = [];
if (styleConfig.colorType === "single") { if (styleConfig.colorType === "single") {
const color = SINGLE_COLOR_PALETTES[singlePaletteIndex].color; const color = SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
colors = [color, color]; colors = [color, color];
} else if (styleConfig.colorType === "gradient") { } else if (styleConfig.colorType === "gradient") {
const { start, end } = GRADIENT_PALETTES[gradientPaletteIndex]; const { start, end } =
GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
colors = [start, end]; colors = [start, end];
} else if (styleConfig.colorType === "rainbow") { } else if (styleConfig.colorType === "rainbow") {
const rainbowColors = RAINBOW_PALETTES[rainbowPaletteIndex].colors; const rainbowColors =
RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
colors = [rainbowColors[0], rainbowColors[rainbowColors.length - 1]]; colors = [rainbowColors[0], rainbowColors[rainbowColors.length - 1]];
} }

52
src/app/OlMap/Controls/Toolbar.tsx
View File

@@ -15,47 +15,12 @@ import { FeatureLike } from "ol/Feature";
import Feature from "ol/Feature"; import Feature from "ol/Feature";
import StyleEditorPanel from "./StyleEditorPanel"; import StyleEditorPanel from "./StyleEditorPanel";
import StyleLegend from "./StyleLegend"; // 引入图例组件 import StyleLegend from "./StyleLegend"; // 引入图例组件
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService"; import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
import { config } from "@/config/config"; import { config } from "@/config/config";
const backendUrl = config.BACKEND_URL; const backendUrl = config.BACKEND_URL;
// 图层样式状态接口 import { LayerStyleState } from "./StyleEditorPanel";
interface StyleConfig {
property: string;
classificationMethod: string;
segments: number;
minSize: number;
maxSize: number;
minStrokeWidth: number;
maxStrokeWidth: number;
fixedStrokeWidth: number;
colorType: string;
startColor: string;
endColor: string;
showLabels: boolean;
opacity: number;
adjustWidthByProperty: boolean;
}
interface LegendStyleConfig {
layerId: string;
layerName: string;
property: string;
colors: string[];
type: string;
dimensions: number[];
breaks: number[];
}
interface LayerStyleState {
layerId: string;
layerName: string;
styleConfig: StyleConfig;
legendConfig: LegendStyleConfig;
isActive: boolean;
}
// 添加接口定义隐藏按钮的props // 添加接口定义隐藏按钮的props
interface ToolbarProps { interface ToolbarProps {
@@ -93,8 +58,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
maxStrokeWidth: 8, maxStrokeWidth: 8,
fixedStrokeWidth: 3, fixedStrokeWidth: 3,
colorType: "gradient", colorType: "gradient",
startColor: "rgba(51, 153, 204, 0.9)", singlePaletteIndex: 0,
endColor: "rgba(204, 51, 51, 0.9)", gradientPaletteIndex: 0,
rainbowPaletteIndex: 0,
showLabels: false, showLabels: false,
opacity: 0.9, opacity: 0.9,
adjustWidthByProperty: true, adjustWidthByProperty: true,
@@ -123,8 +89,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
maxStrokeWidth: 8, maxStrokeWidth: 8,
fixedStrokeWidth: 3, fixedStrokeWidth: 3,
colorType: "gradient", colorType: "gradient",
startColor: "rgba(51, 153, 204, 0.9)", singlePaletteIndex: 0,
endColor: "rgba(204, 51, 51, 0.9)", gradientPaletteIndex: 0,
rainbowPaletteIndex: 0,
showLabels: false, showLabels: false,
opacity: 0.9, opacity: 0.9,
adjustWidthByProperty: true, adjustWidthByProperty: true,
@@ -149,7 +116,10 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
layerName: state.layerName, layerName: state.layerName,
layerId: state.layerId, layerId: state.layerId,
})); }));
useEffect(() => {
console.log(layerStyleStates);
console.log("Active Legends:", activeLegendConfigs);
}, [layerStyleStates]);
// 创建高亮图层 // 创建高亮图层
useEffect(() => { useEffect(() => {
if (!map) return; if (!map) return;