完成页面的基础配置

2025-09-28 15:51:45 +08:00
parent e34dc99330
commit 6d1cc6c9a1
28 changed files with 9753 additions and 52 deletions
--- a/src/app/OlMap/Controls/StyleLegend.tsx
+++ b/src/app/OlMap/Controls/StyleLegend.tsx
@@ -0,0 +1,74 @@
+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 shadow-lg max-w-xs opacity-95"
+    >
+      <Typography variant="subtitle2" gutterBottom>
+        {layerName} - {property}
+      </Typography>
+      {breaks.map((breakValue, index) => {
+        const color = colors[index]; // 默认颜色为黑色
+        // 获取对应的尺寸和分段值
+        const dimension = dimensions[index]; // 默认尺寸为16
+        const nextValue = breaks[index + 1]; // 下一个值或默认0
+        // 确保分段区间均有意义
+        if (nextValue !== undefined) {
+          return (
+            <Box key={index} className="flex items-center gap-2 mb-1">
+              <Box
+                sx={
+                  type === "point"
+                    ? {
+                        width: dimension,
+                        height: dimension,
+                        borderRadius: "50%",
+                        backgroundColor: color,
+                        //   border: `1px solid ${color}`,
+                      }
+                    : {
+                        width: 16,
+                        height: dimension,
+                        backgroundColor: color,
+                        border: `1px solid ${color}`,
+                      }
+                }
+              />
+              <Typography variant="caption" className="text-xs">
+                {breakValue?.toFixed(1)} - {nextValue?.toFixed(1)}
+              </Typography>
+            </Box>
+          );
+        }
+      })}
+    </Box>
+  );
+};
+
+export default StyleLegend;
+export type { LegendStyleConfig };