持久化样式状态；分离样式设置和图例显示；完成时间轴组件代码修复建议

src/app/OlMap/MapComponent.tsx

@@ -25,6 +25,8 @@ import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
 import { CollisionFilterExtension } from "@deck.gl/extensions";
 
+import StyleLegend from "./Controls/StyleLegend"; // 假设 StyleLegend 在同一目录
+
 interface MapComponentProps {
   children?: React.ReactNode;
 }
@@ -45,6 +47,7 @@ interface DataContextType {
   pipeText: string;
   setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
+  updateLegendConfigs?: (configs: any[]) => void;
 }
 
 // 创建自定义Layer类来包装deck.gl
@@ -125,6 +128,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [pipeText, setPipeText] = useState("");
   const flowAnimation = useRef(false); // 添加动画控制标志
   const [currentZoom, setCurrentZoom] = useState(12); // 当前缩放级别
+  // 图例配置
+  const [activeLegendConfigs, setActiveLegendConfigs] = useState<any[]>([]); // 存储图例配置
+  // 从 StyleEditorPanel 接收图例配置的回调
+  const updateLegendConfigs = (configs: any[]) => {
+    setActiveLegendConfigs(configs);
+  };
   // 防抖更新函数
   const debouncedUpdateData = useRef(
     debounce(() => {
@@ -616,6 +625,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           showPipeText,
           junctionText,
           pipeText,
+          updateLegendConfigs,
         }}
       >
         <MapContext.Provider value={map}>
@@ -626,6 +636,16 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           </div>
           <canvas id="deck-canvas" />
         </MapContext.Provider>
+        {/* 图例始终渲染 */}
+        {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>
+        )}
       </DataContext.Provider>
     </>
   );