feat: build vehicle data platform and production pipeline

vehicle-data-platform/apps/web/src/v2/map/TrackMap.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { HistoryLocationRow, TrackPlaybackEvent } from '../../api/types';
+import { getAMapConfig, isAMapConfigured } from '../../config/appConfig';
+import { isValidAMapCoordinate, loadAMap, wgs84ToGcj02, type AMapLike, type AMapMap, type AMapOverlay } from '../../integrations/amap';
+
+function markerContent(kind: string, label?: string) {
+  if (kind === 'current') return '<div class="v2-track-current-marker"><span></span></div>';
+  return `<div class="v2-track-marker is-${kind}">${label ?? ''}</div>`;
+}
+
+export function TrackMap({ points, events, activeIndex, onSelectIndex }: {
+  points: HistoryLocationRow[];
+  events: TrackPlaybackEvent[];
+  activeIndex: number;
+  onSelectIndex: (index: number) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<AMapMap | null>(null);
+  const amapRef = useRef<AMapLike | null>(null);
+  const overlaysRef = useRef<AMapOverlay[]>([]);
+  const currentMarkerRef = useRef<AMapOverlay | null>(null);
+  const selectRef = useRef(onSelectIndex);
+  const [state, setState] = useState<'loading' | 'ready' | 'fallback' | 'error'>('loading');
+  const valid = useMemo(() => points.map((point, index) => ({ point, index })).filter(({ point }) => isValidAMapCoordinate(point.longitude, point.latitude)), [points]);
+
+  useEffect(() => { selectRef.current = onSelectIndex; }, [onSelectIndex]);
+
+  useEffect(() => {
+    if (!containerRef.current || !isAMapConfigured(getAMapConfig())) { setState('fallback'); return; }
+    let cancelled = false;
+    loadAMap(['AMap.Scale', 'AMap.ToolBar']).then((AMap) => {
+      if (cancelled || !containerRef.current) return;
+      const first = valid[0]?.point;
+      const map = new AMap.Map(containerRef.current, {
+        zoom: first ? 13 : 5,
+        center: first ? wgs84ToGcj02(first.longitude, first.latitude) : wgs84ToGcj02(105.4, 35.9),
+        viewMode: '2D', mapStyle: 'amap://styles/whitesmoke', showLabel: true, resizeEnable: true
+      });
+      map.addControl(new AMap.Scale());
+      if (AMap.ToolBar) map.addControl(new AMap.ToolBar({ position: { right: '18px', bottom: '22px' } }));
+      mapRef.current = map;
+      amapRef.current = AMap;
+      setState('ready');
+    }).catch(() => { if (!cancelled) setState('error'); });
+    return () => {
+      cancelled = true;
+      overlaysRef.current.forEach((overlay) => overlay.setMap?.(null));
+      currentMarkerRef.current?.setMap?.(null);
+      mapRef.current?.destroy();
+      overlaysRef.current = [];
+      currentMarkerRef.current = null;
+      mapRef.current = null;
+      amapRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    const AMap = amapRef.current;
+    if (state !== 'ready' || !mapRef.current || !valid.length || !AMap) return;
+      overlaysRef.current.forEach((overlay) => overlay.setMap?.(null));
+      currentMarkerRef.current?.setMap?.(null);
+      const path = valid.map(({ point }) => wgs84ToGcj02(point.longitude, point.latitude));
+      const polyline = new AMap.Polyline({ path, strokeColor: '#1268f3', strokeWeight: 5, strokeOpacity: 0.92, lineJoin: 'round', lineCap: 'round', showDir: true, zIndex: 80 });
+      const first = valid[0];
+      const last = valid[valid.length - 1];
+      const overlays: AMapOverlay[] = [polyline];
+      const start = new AMap.Marker({ position: wgs84ToGcj02(first.point.longitude, first.point.latitude), anchor: 'center', content: markerContent('start', '始'), zIndex: 110 });
+      const end = new AMap.Marker({ position: wgs84ToGcj02(last.point.longitude, last.point.latitude), anchor: 'center', content: markerContent('end', '终'), zIndex: 110 });
+      start.on?.('click', () => selectRef.current(first.index));
+      end.on?.('click', () => selectRef.current(last.index));
+      overlays.push(start, end);
+      events.slice(1, -1).forEach((event, eventIndex) => {
+        if (!isValidAMapCoordinate(event.longitude, event.latitude)) return;
+        const exactIndex = points.findIndex((point) => point.deviceTime === event.time);
+        const targetIndex = exactIndex >= 0 ? exactIndex : points.reduce((closest, point, index) => {
+          const best = points[closest];
+          const distance = (point.longitude - event.longitude) ** 2 + (point.latitude - event.latitude) ** 2;
+          const bestDistance = (best.longitude - event.longitude) ** 2 + (best.latitude - event.latitude) ** 2;
+          return distance < bestDistance ? index : closest;
+        }, 0);
+        const marker = new AMap.Marker({ position: wgs84ToGcj02(event.longitude, event.latitude), anchor: 'center', content: markerContent('event', String(eventIndex + 1)), zIndex: 105 });
+        marker.on?.('click', () => selectRef.current(targetIndex));
+        overlays.push(marker);
+      });
+      const active = valid.find(({ index }) => index === activeIndex) ?? first;
+      const current = new AMap.Marker({ position: wgs84ToGcj02(active.point.longitude, active.point.latitude), anchor: 'center', content: markerContent('current'), zIndex: 130 });
+      currentMarkerRef.current = current;
+      overlaysRef.current = overlays;
+      mapRef.current.add([...overlays, current]);
+      mapRef.current.setFitView(overlays, false, [52, 52, 52, 52]);
+  }, [events, points, state, valid]);
+
+  useEffect(() => {
+    const point = points[activeIndex];
+    if (!point || !isValidAMapCoordinate(point.longitude, point.latitude)) return;
+    currentMarkerRef.current?.setPosition?.(wgs84ToGcj02(point.longitude, point.latitude));
+  }, [activeIndex, points]);
+
+  return <div className="v2-track-map">
+    <div ref={containerRef} className="v2-track-map-canvas" aria-label="历史轨迹地图" />
+    {state !== 'ready' ? <div className={`v2-map-state is-${state}`}>
+      {state === 'loading' ? <><span className="v2-spinner" />轨迹地图加载中</> : null}
+      {state === 'fallback' ? `地图未配置，已载入 ${valid.length} 个有效轨迹点` : null}
+      {state === 'error' ? '地图加载失败，请检查高德地图配置' : null}
+    </div> : null}
+    <div className="v2-track-map-legend"><span><i className="is-start" />开始</span><span><i className="is-current" />当前点</span><span><i className="is-end" />结束</span><b>{valid.length} 个有效点位</b></div>
+  </div>;
+}