import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const GLOBE_RADIUS = 220; const DOT_SIZE = 4; const COLOR_BG = "#0f172a"; const COLOR_GLOBE_WIRE = "rgba(56, 189, 248, 0.3)"; // Sky blue transparent const COLOR_GLOBE_FILL = "rgba(15, 23, 42, 0.9)"; // Dark fill to hide back const COLOR_CITY = "#ffffff"; const COLOR_ROUTE = "#f43f5e"; // Rose const COLOR_ROUTE_DIM = "rgba(244, 63, 94, 0.2)"; const COLOR_PLANE = "#fbbf24"; // Amber // Math Helpers const DEG2RAD = Math.PI / 180; // 3D Point Type interface Point3D { x: number; y: number; z: number; } interface City { id: string; name: string; lat: number; lon: number; } interface Route { from: string; to: string; } // Basic Cities Data const CITIES: City[] = [ { id: 'bj', name: '北京', lat: 39.9, lon: 116.4 }, { id: 'sh', name: '上海', lat: 31.2, lon: 121.5 }, { id: 'tk', name: '东京', lat: 35.7, lon: 139.7 }, { id: 'sg', name: '新加坡', lat: 1.3, lon: 103.8 }, { id: 'ld', name: '伦敦', lat: 51.5, lon: -0.1 }, { id: 'ny', name: '纽约', lat: 40.7, lon: -74.0 }, { id: 'sf', name: '旧金山', lat: 37.8, lon: -122.4 }, { id: 'sy', name: '悉尼', lat: -33.9, lon: 151.2 }, { id: 'db', name: '迪拜', lat: 25.2, lon: 55.3 }, { id: 'pr', name: '巴黎', lat: 48.9, lon: 2.3 }, { id: 'ct', name: '开普敦', lat: -33.9, lon: 18.4 }, { id: 'rio',name: '里约热内卢', lat: -22.9, lon: -43.2 }, ]; // Travel Routes const ROUTES: Route[] = [ { from: 'bj', to: 'tk' }, { from: 'bj', to: 'ld' }, { from: 'sh', to: 'sg' }, { from: 'tk', to: 'sf' }, { from: 'ny', to: 'ld' }, { from: 'ny', to: 'sf' }, { from: 'sg', to: 'sy' }, { from: 'db', to: 'bj' }, { from: 'ld', to: 'ct' }, { from: 'rio', to: 'ny' }, { from: 'pr', to: 'db' }, ]; export default function GlobalTravelMap() { // --- State & Refs --- // Using a tick state to trigger re-renders from RAF const [tick, setTick] = useState(0); // Rotation state stored in ref to avoid re-render loops, updated by drag or auto-rotation const rotationRef = useRef({ lambda: 0, phi: 0 }); // lambda (lon), phi (lat) const dragRef = useRef({ active: false, startX: 0, startY: 0, startLambda: 0, startPhi: 0 }); // Animation loop ref const frameRef = useRef(0); // --- Helpers --- // Convert Lat/Lon to 3D Unit Vector const getVector = (lat: number, lon: number): Point3D => { const phi = lat * DEG2RAD; const theta = (lon - 180) * DEG2RAD; // Adjust for texture mapping logic usually const x = -(Math.cos(phi) * Math.cos(theta)); const y = Math.sin(phi); const z = Math.cos(phi) * Math.sin(theta); return { x, y, z }; }; // Apply Rotation Matrix const rotatePoint = (p: Point3D, lambda: number, phi: number): Point3D => { // Rotate around Y axis (Longitude) const x1 = p.x * Math.cos(lambda) - p.z * Math.sin(lambda); const z1 = p.x * Math.sin(lambda) + p.z * Math.cos(lambda); const y1 = p.y; // Rotate around X axis (Latitude/Tilt) const y2 = y1 * Math.cos(phi) - z1 * Math.sin(phi); const z2 = y1 * Math.sin(phi) + z1 * Math.cos(phi); const x2 = x1; return { x: x2, y: y2, z: z2 }; }; // --- Data Generation (Memoized) --- // 1. Generate Wireframe Grid (Meridians & Parallels) const gridLines = useMemo(() => { const lines: Point3D[][] = []; const steps = 60; // Meridians (Longitude lines) for (let i = 0; i < 12; i++) { const lon = (i * 30) - 180; const line: Point3D[] = []; for (let j = 0; j <= steps; j++) { const lat = (j / steps) * 180 - 90; line.push(getVector(lat, lon)); } lines.push(line); } // Parallels (Latitude lines) for (let i = 1; i < 10; i++) { const lat = (i * 18) - 90; const line: Point3D[] = []; for (let j = 0; j <= steps; j++) { const lon = (j / steps) * 360 - 180; line.push(getVector(lat, lon)); } lines.push(line); } return lines; }, []); // 2. Prepare City Points const cityPoints = useMemo(() => { return CITIES.map(c => ({ ...c, pos: getVector(c.lat, c.lon) })); }, []); // 3. Prepare Routes (Bezier Curves in 3D) const routePaths = useMemo(() => { return ROUTES.map(r => { const c1 = CITIES.find(c => c.id === r.from); const c2 = CITIES.find(c => c.id === r.to); if (!c1 || !c2) return null; const p1 = getVector(c1.lat, c1.lon); const p2 = getVector(c2.lat, c2.lon); // Midpoint for Quadratic Bezier const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2, z: (p1.z + p2.z) / 2 }; // Normalize midpoint and push it out to create an arc height const len = Math.sqrt(mid.x*mid.x + mid.y*mid.y + mid.z*mid.z); const arcHeight = 1.3; // Height of the flight path const control = { x: (mid.x / len) * arcHeight, y: (mid.y / len) * arcHeight, z: (mid.z / len) * arcHeight }; // Generate points along curve for smoother 3D projection const segments = 20; const curvePoints: Point3D[] = []; for (let i = 0; i <= segments; i++) { const t = i / segments; const mt = 1 - t; // Quadratic Bezier Formula: (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2 const x = mt*mt*p1.x + 2*mt*t*control.x + t*t*p2.x; const y = mt*mt*p1.y + 2*mt*t*control.y + t*t*p2.y; const z = mt*mt*p1.z + 2*mt*t*control.z + t*t*p2.z; curvePoints.push({ x, y, z }); } return { p1, p2, control, curvePoints, id: `${r.from}-${r.to}` }; }).filter(Boolean) as { p1: Point3D, p2: Point3D, control: Point3D, curvePoints: Point3D[], id: string }[]; }, []); // 4. Background Stars const stars = useMemo(() => { return Array.from({ length: 100 }).map(() => ({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.5 + 0.1 })); }, []); // --- Animation Loop --- useEffect(() => { const loop = () => { // Auto rotate if not dragging if (!dragRef.current.active) { rotationRef.current.lambda += 0.003; // Spin longitude } setTick(t => t + 1); frameRef.current = requestAnimationFrame(loop); }; // Initial start rotationRef.current.lambda = 1.0; rotationRef.current.phi = 0.2; loop(); return () => cancelAnimationFrame(frameRef.current); }, []); // --- Interaction Handlers --- const handlePointerDown = useCallback((e: React.PointerEvent) => { const svg = e.currentTarget; svg.setPointerCapture(e.pointerId); dragRef.current = { active: true, startX: e.clientX, startY: e.clientY, startLambda: rotationRef.current.lambda, startPhi: rotationRef.current.phi }; }, []); const handlePointerMove = useCallback((e: React.PointerEvent) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; const dy = e.clientY - dragRef.current.startY; // Sensitivity const sensitivity = 0.005; rotationRef.current.lambda = dragRef.current.startLambda + dx * sensitivity; rotationRef.current.phi = Math.max(-1, Math.min(1, dragRef.current.startPhi - dy * sensitivity)); }, []); const handlePointerUp = useCallback((e: React.PointerEvent) => { dragRef.current.active = false; e.currentTarget.releasePointerCapture(e.pointerId); }, []); // --- Render Calculation (Inside Render) --- // Memoize the projection to keep render fast, though it runs every frame due to rotation change const projectedData = useMemo(() => { const { lambda, phi } = rotationRef.current; // Project Grid const visibleGridPaths: string[] = []; const backGridPaths: string[] = []; gridLines.forEach(line => { const projPoints = line.map(p => rotatePoint(p, lambda, phi)); // Simple visibility check: split line into segments // Or simply check if the average Z of the line is positive for front/back // For better quality, we just draw segments. let currentPath = ""; let isFront = false; // Draw as a single polyline for performance, but need to handle wrapping/Z-culling // A simpler approach for this style: Check midpoint of line. // Better: Iterate segments. for(let i=0; i 0) { visibleGridPaths.push(d); } else { backGridPaths.push(d); } } }); // Project Cities const visibleCities = cityPoints.map(c => { const p = rotatePoint(c.pos, lambda, phi); const x = p.x * GLOBE_RADIUS + WIDTH/2; const y = p.y * GLOBE_RADIUS + HEIGHT/2; return { ...c, x, y, z: p.z }; }).sort((a, b) => a.z - b.z); // Draw back to front // Project Routes const visibleRoutes = routePaths.map(r => { const projCurve = r.curvePoints.map(p => rotatePoint(p, lambda, phi)); // Generate SVG Path let d = ""; let allHidden = true; let hasVisible = false; projCurve.forEach((p, i) => { const x = p.x * GLOBE_RADIUS + WIDTH/2; const y = p.y * GLOBE_RADIUS + HEIGHT/2; if (i === 0) d += `M${x.toFixed(1)},${y.toFixed(1)}`; else d += ` L${x.toFixed(1)},${y.toFixed(1)}`; if (p.z > -0.2) hasVisible = true; // Allow slightly behind horizon for continuity }); // Calculate particle position // Speed depends on route length approx, let's normalize const speed = 0.005; const t = (tick * speed + (r.id.length * 0.1)) % 1; // Offset start const idx = Math.floor(t * (projCurve.length - 1)); const nextIdx = Math.min(idx + 1, projCurve.length - 1); const rem = (t * (projCurve.length - 1)) - idx; const pCurrent = projCurve[idx]; const pNext = projCurve[nextIdx]; const planePos = { x: (pCurrent.x + (pNext.x - pCurrent.x) * rem) * GLOBE_RADIUS + WIDTH/2, y: (pCurrent.y + (pNext.y - pCurrent.y) * rem) * GLOBE_RADIUS + HEIGHT/2, z: pCurrent.z + (pNext.z - pCurrent.z) * rem }; return { id: r.id, d, planePos, visible: hasVisible, avgZ: (projCurve[0].z + projCurve[projCurve.length-1].z)/2 }; }); return { visibleGridPaths, backGridPaths, visibleCities, visibleRoutes }; }, [tick, gridLines, cityPoints, routePaths]); // Re-calc on tick or rotation change (tick drives rotation via ref) return (

{/* UI Overlay */}

全球旅行线路监控

实时数据连接中...

SYSTEM STATUS

OPTIMAL

ROTATION

λ: {rotationRef.current.lambda.toFixed(2)} φ: {rotationRef.current.phi.toFixed(2)}

); }