105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
import Box from "@mui/material/Box";
|
||
import Typography from "@mui/material/Typography";
|
||
|
||
interface LegendStyleConfig {
|
||
layerName: string;
|
||
layerId: string;
|
||
property: string;
|
||
colors: string[];
|
||
type: string; // 图例类型
|
||
dimensions: number[]; // 尺寸大小
|
||
breaks: number[]; // 分段值
|
||
}
|
||
// 图例组件
|
||
// 该组件用于显示图层样式的图例，包含属性名称、颜色、尺寸和分段值等信息
|
||
// 通过传入的配置对象动态生成图例内容，适用于不同的样式配置
|
||
// 使用时需要确保传入的 colors、dimensions 和 breaks 数组长度一致
|
||
|
||
const StyleLegend: React.FC<LegendStyleConfig> = ({
|
||
layerName,
|
||
layerId,
|
||
property,
|
||
colors,
|
||
type, // 图例类型
|
||
dimensions,
|
||
breaks,
|
||
}) => {
|
||
return (
|
||
<Box
|
||
key={layerId}
|
||
className="bg-white p-3 rounded-xl max-w-xs opacity-95 transition-opacity duration-300 hover:opacity-100"
|
||
>
|
||
<Typography variant="subtitle2" gutterBottom>
|
||
{layerName} - {property}
|
||
</Typography>
|
||
{[...Array(breaks.length)].map((_, index) => {
|
||
const color = colors[index]; // 默认颜色为黑色
|
||
const dimension = dimensions[index]; // 默认尺寸为16
|
||
|
||
// 处理第一个区间（小于 breaks[0]）
|
||
if (index === 0) {
|
||
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">
|
||
{"<"} {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>
|
||
);
|
||
};
|
||
|
||
export default StyleLegend;
|
||
export type { LegendStyleConfig };
|