爆管分析页面，新增时间轴、工具栏，修改部分组件以满足页面功能需求

src/app/OlMap/Controls/Toolbar.tsx

@@ -13,12 +13,49 @@ import { Style, Stroke, Fill, Circle } from "ol/style";
 import { FeatureLike } from "ol/Feature";
 import Feature from "ol/Feature";
 import StyleEditorPanel from "./StyleEditorPanel";
+import StyleLegend from "./StyleLegend"; // 引入图例组件
 
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 
 import { config } from "@/config/config";
 const backendUrl = config.backendUrl;
 
+// 图层样式状态接口
+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
 interface ToolbarProps {
   hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
@@ -38,6 +75,79 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
 
+  // 样式状态管理 - 在 Toolbar 中管理，带有默认样式
+  const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>([
+    {
+      isActive: false, // 默认不激活，不显示图例
+      layerId: "junctions",
+      layerName: "节点图层",
+      styleConfig: {
+        property: "pressure",
+        classificationMethod: "pretty_breaks",
+        segments: 6,
+        minSize: 4,
+        maxSize: 12,
+        minStrokeWidth: 2,
+        maxStrokeWidth: 8,
+        fixedStrokeWidth: 3,
+        colorType: "gradient",
+        startColor: "rgba(51, 153, 204, 0.9)",
+        endColor: "rgba(204, 51, 51, 0.9)",
+        showLabels: false,
+        opacity: 0.9,
+        adjustWidthByProperty: true,
+      },
+      legendConfig: {
+        layerId: "junctions",
+        layerName: "节点图层",
+        property: "压力", // 暂时为空，等计算后更新
+        colors: [],
+        type: "point",
+        dimensions: [],
+        breaks: [],
+      },
+    },
+    {
+      isActive: false, // 默认不激活，不显示图例
+      layerId: "pipes",
+      layerName: "管道图层",
+      styleConfig: {
+        property: "flow",
+        classificationMethod: "pretty_breaks",
+        segments: 6,
+        minSize: 4,
+        maxSize: 12,
+        minStrokeWidth: 2,
+        maxStrokeWidth: 8,
+        fixedStrokeWidth: 3,
+        colorType: "gradient",
+        startColor: "rgba(51, 153, 204, 0.9)",
+        endColor: "rgba(204, 51, 51, 0.9)",
+        showLabels: false,
+        opacity: 0.9,
+        adjustWidthByProperty: true,
+      },
+      legendConfig: {
+        layerId: "pipes",
+        layerName: "管道图层",
+        property: "流量", // 暂时为空，等计算后更新
+        colors: [],
+        type: "linestring",
+        dimensions: [],
+        breaks: [],
+      },
+    },
+  ]);
+
+  // 计算激活的图例配置
+  const activeLegendConfigs = layerStyleStates
+    .filter((state) => state.isActive && state.legendConfig.property)
+    .map((state) => ({
+      ...state.legendConfig,
+      layerName: state.layerName,
+      layerId: state.layerId,
+    }));
+
   // 创建高亮图层
   useEffect(() => {
     if (!map) return;
@@ -73,7 +183,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
       map.removeLayer(highLightLayer);
     };
   }, [map]);
-
+  useEffect(() => {
+    console.log(layerStyleStates);
+  }, [layerStyleStates]);
   // 高亮要素的函数
   useEffect(() => {
     if (!highlightLayer) {
@@ -348,7 +460,23 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
       </div>
       {showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
       {showDrawPanel && map && <DrawPanel />}
-      {showStyleEditor && <StyleEditorPanel />}
+      {showStyleEditor && (
+        <StyleEditorPanel
+          layerStyleStates={layerStyleStates}
+          setLayerStyleStates={setLayerStyleStates}
+        />
+      )}
+
+      {/* 图例显示 */}
+      {activeLegendConfigs.length > 0 && (
+        <div className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
+          <div className="flex flex-row gap-3">
+            {activeLegendConfigs.map((config, index) => (
+              <StyleLegend key={`${config.layerId}-${index}`} {...config} />
+            ))}
+          </div>
+        </div>
+      )}
     </>
   );
 };