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

src/app/OlMap/MapComponent.tsx

@@ -18,15 +18,12 @@ import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
 import MVT from "ol/format/MVT";
 import { FlatStyleLike } from "ol/style/flat";
 import { toLonLat } from "ol/proj";
-import { center } from "@turf/center";
-import { bearing } from "@turf/turf";
+import { along, bearing, lineString, length } from "@turf/turf";
 import { Deck } from "@deck.gl/core";
 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;
 }
@@ -47,7 +44,6 @@ interface DataContextType {
   pipeText: string;
   setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
-  updateLegendConfigs?: (configs: any[]) => void;
 }
 
 // 创建自定义Layer类来包装deck.gl
@@ -128,12 +124,7 @@ 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(() => {
@@ -297,16 +288,19 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
                     const [lon, lat] = toLonLat(coord);
                     return [lon, lat];
                   });
+                  // 添加验证：确保至少有 2 个坐标点
+                  if (lineCoordsWGS84.length < 2) return; // 跳过此特征
                   // 计算中点
-                  const midPoint = center({
-                    type: "LineString",
-                    coordinates: lineCoordsWGS84,
-                  }).geometry.coordinates;
+                  const lineStringFeature = lineString(lineCoordsWGS84);
+                  const lineLength = length(lineStringFeature);
+                  const midPoint = along(lineStringFeature, lineLength / 2)
+                    .geometry.coordinates;
                   // 计算角度
-                  let lineAngle = bearing(
-                    lineCoordsWGS84[0],
-                    lineCoordsWGS84[lineCoordsWGS84.length - 1]
-                  );
+                  const prevPoint = along(lineStringFeature, lineLength * 0.49)
+                    .geometry.coordinates;
+                  const nextPoint = along(lineStringFeature, lineLength * 0.51)
+                    .geometry.coordinates;
+                  let lineAngle = bearing(prevPoint, nextPoint);
                   lineAngle = -lineAngle + 90;
                   if (lineAngle < -90 || lineAngle > 90) {
                     lineAngle += 180;
@@ -611,28 +605,16 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           showPipeText,
           junctionText,
           pipeText,
-          updateLegendConfigs,
         }}
       >
         <MapContext.Provider value={map}>
           <div className="relative w-full h-full">
             <div ref={mapRef} className="w-full h-full"></div>
             <MapTools />
-
             {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>
     </>
   );