```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Constants & Data // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const ANIMATION_DURATION = 18000; // 18 seconds for full voyage // A simplified SVG path representing the coastline of Europe, Africa, and part of Asia. // This ensures the map renders instantly without external GeoJSON dependencies. const LAND_PATH = ` M 540 160 L 560 160 L 570 170 L 590 170 L 600 190 L 620 190 L 630 200 L 650 200 L 660 220 L 680 230 L 680 250 L 700 260 L 720 260 L 730 280 L 730 350 L 750 380 L 800 360 L 830 320 L 850 310 L 880 310 L 900 330 L 900 380 L 880 400 L 850 380 L 830 380 L 800 400 L 750 450 L 730 480 L 720 520 L 680 580 L 640 620 L 600 620 L 580 600 L 560 550 L 550 500 L 520 450 L 480 400 L 480 350 L 500 300 L 520 280 L 520 250 L 500 220 L 500 190 L 520 170 L 540 160 Z `; // Major Waypoints for the Voyage (Da Gama's Route style) const WAYPOINTS = [ { id: 'lisbon', name: '里斯本 (Lisbon)', date: '1497年7月8日', desc: '启航之地，大航海时代的辉煌起点。', x: 520, y: 190, align: 'right' }, { id: 'cape_verde', name: '佛得角 (Cape Verde)', date: '1497年7月27日', desc: '大西洋上的重要补给站，在此转向南大西洋深处。', x: 460, y: 320, align: 'left' }, { id: 'cape_good_hope', name: '好望角 (Cape of Good Hope)', date: '1497年11月22日', desc: '迪亚士曾抵达的极限。风暴角，亦是希望之角。', x: 600, y: 640, align: 'top' }, { id: 'mozambique', name: '莫桑比克 (Mozambique)', date: '1498年3月2日', desc: '进入印度洋贸易圈，与当地苏丹接触。', x: 730, y: 500, align: 'right' }, { id: 'malindi', name: '马林迪 (Malindi)', date: '1498年4月14日', desc: '雇佣经验丰富的领航员，横渡印度洋。', x: 750, y: 440, align: 'right' }, { id: 'calicut', name: '卡利卡特 (Calicut)', date: '1498年5月20日', desc: '抵达印度！开辟了欧洲通往东方的海上航线。', x: 860, y: 360, align: 'left' } ]; // Generate route points for smooth curve interpolation // Note: We deliberately curve "wide" in the Atlantic (Volta do mar) const ROUTE_POINTS = [ [520, 190], // Lisbon [480, 250], [460, 320], // Cape Verde [400, 450], // Wide turn in Atlantic [480, 580], [600, 640], // Good Hope [680, 580], [730, 500], // Mozambique [750, 440], // Malindi [800, 400], // Indian Ocean crossing [860, 360] // Calicut ]; // ----------------------------------------------------------------------------- // Helper Components // ----------------------------------------------------------------------------- // The glowing compass rose background const CompassRose = () => ( ); // Animated Water Particles const OceanCurrents = () => { // Static random generation for stability const currents = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => ({ id: i, x: 300 + Math.random() * 600, y: 300 + Math.random() * 300, length: 20 + Math.random() * 40, angle: (Math.random() * 30) - 15 })); }, []); return ( {currents.map((c) => ( ))} ); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const VoyageMap = () => { // State for animation progress (0 to 1) const [progress, setProgress] = useState(0); // State for active waypoint (index) const [activeIndex, setActiveIndex] = useState(-1); // Ref for ship position and angle to avoid heavy state updates const shipRef = useRef(null); const rafRef = useRef(null); // Generate the smooth path string const routePathString = useMemo(() => { const lineGen = d3.line() .curve(d3.curveCatmullRom.alpha(0.5)); return lineGen(ROUTE_POINTS); }, []); // Calculate total path length for interpolation const pathTotalLength = useMemo(() => { if (typeof document === 'undefined') return 1000; // Create a temporary path to measure length (standard SVG technique) const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", routePathString); return path.getTotalLength(); }, [routePathString]); // Animation Loop useEffect(() => { const startTime = performance.now(); let lastIndex = -1; const loop = (time) => { const elapsed = time - startTime; const t = Math.min(elapsed / ANIMATION_DURATION, 1); setProgress(t); // Calculate current position along the path // Since we can't access the DOM element created in render easily inside RAF without ref callback mess, // we use a shadow calculation or just assume linear progress mapping to waypoints for simplicity // in this specific "no-dependency" constraint environment. // However, to be precise, let's map 't' to the waypoints based on rough distance percentages. // Rough estimation of waypoint hit times based on index in ROUTE_POINTS vs WAYPOINTS // 0.0 -> Lisbon // 0.2 -> Cape Verde // 0.55 -> Good Hope // 0.75 -> Mozambique // 0.85 -> Malindi // 1.0 -> Calicut // Simple proximity check logic: // We will let the rendering phase determine which waypoint is "active" // based on the progress value `t` and hardcoded thresholds for smoother UX. // Define thresholds manually for better pacing const thresholds = [0.01, 0.15, 0.50, 0.75, 0.85, 0.98]; let currentActive = -1; for (let i = 0; i < thresholds.length; i++) { if (t >= thresholds[i]) { currentActive = i; } } if (currentActive !== lastIndex) { setActiveIndex(currentActive); lastIndex = currentActive; } if (t < 1) { rafRef.current = requestAnimationFrame(loop); } }; rafRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafRef.current); }, []); // Empty dependency array enforced // Derived ship position for rendering const getShipTransform = () => { // We need to sample the path. // Since we are inside React render, we can use a memoized path element if needed, // or use a separate helper. // For smoothness in React without direct DOM `getPointAtLength` inside render (which is slow), // we can interpolate the POINTS array directly using D3. // Create an interpolator // Note: Re-creating interpolator every frame is bad, but d3.line is cheap. // Better: use the path element logic if available. // Let's use a custom interpolation for maximum performance without DOM reads. // Actually, for this specific request, let's use the SVG path approach // but we need to do it cleanly. // We will use a hidden path in the SVG to get the point. // But since we can't query it easily in render... // We will assume the component mounts and we can query the path ref. return { x: 0, y: 0, rot: 0 }; // Placeholder, logic handled in effect below }; // Real-time ship movement via Ref manipulation (High Performance) // We attach a ref to the actual SVG path element to read geometry const pathRef = useRef(null); useEffect(() => { if (!pathRef.current || !shipRef.current) return; const updateShip = () => { const len = pathRef.current.getTotalLength(); const currentLen = len * progress; // progress is state, but we can access latest via closure if we were in the loop. // Wait, 'progress' is state. This effect runs on progress change. // That's acceptable for 60fps if the component isn't too heavy. const point = pathRef.current.getPointAtLength(currentLen); const nextPoint = pathRef.current.getPointAtLength(Math.min(currentLen + 2, len)); const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x) * (180 / Math.PI); shipRef.current.setAttribute( "transform", `translate(${point.x}, ${point.y}) rotate(${angle})` ); }; updateShip(); }, [progress]); return (

{/* Background Gradient */}

{/* Grid Overlay */}

{/* Header */}

大航海时代：通往印度的航路

THE AGE OF DISCOVERY • VASCO DA GAMA'S VOYAGE (1497-1498)

{/* Main SVG Layer */} {/* Info Cards Overlay */}

{activeIndex >= 0 && WAYPOINTS[activeIndex] && ( {/* Connecting Line to Dot */}

Log Entry #{activeIndex + 1}

{WAYPOINTS[activeIndex].name}

{WAYPOINTS[activeIndex].date}

{WAYPOINTS[activeIndex].desc}

)}

{/* Progress Bar (Bottom) */}

{/* Status Indicators */}

Wind: NE 12kts

Heading: {(progress * 360).toFixed(0)}°

); }; ```