```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Ship, Anchor, Map as MapIcon, Compass, Coins, Skull, Globe, Navigation, Crosshair, Target, Activity } from 'lucide-react'; import * as d3 from 'd3'; const AgeOfDiscoveryTech = () => { // --------------------------------------------------------------------------- // 1. 数据配置 (Data Configuration) // --------------------------------------------------------------------------- const EVENTS = useMemo(() => [ { year: 1415, title: "攻占休达", subtitle: "Conquest of Ceuta", person: "亨利王子 (Prince Henry)", type: "exploration", desc: "葡萄牙占领北非重镇休达，标志着大航海时代的序幕开启，欧洲开始向外扩张。", coords: [-5.3, 35.8], // Long, Lat color: "#38bdf8", icon: }, { year: 1488, title: "发现好望角", subtitle: "Cape of Good Hope", person: "巴尔托洛梅乌·迪亚士 (Dias)", type: "exploration", desc: "迪亚士船队绕过非洲最南端，打开了通往印度洋的通道，名为'风暴角'后改称'好望角'。", coords: [18.4, -34.3], color: "#38bdf8", icon: }, { year: 1492, title: "发现新大陆", subtitle: "Discovery of the Americas", person: "克里斯托弗·哥伦布 (Columbus)", type: "discovery", desc: "在西班牙王室资助下，哥伦布横渡大西洋抵达巴哈马群岛，误认为是印度，开启美洲殖民史。", coords: [-74.5, 24.0], color: "#fbbf24", icon: }, { year: 1494, title: "托尔德西利亚斯条约", subtitle: "Treaty of Tordesillas", person: "教皇亚历山大六世", type: "politics", desc: "教皇划定'教皇子午线'，瓜分世界。线东属葡萄牙，线西属西班牙，确立两国海上霸权。", coords: [-46.0, 0], // Abstract point on the line color: "#f472b6", icon: }, { year: 1498, title: "抵达印度", subtitle: "Reach India", person: "瓦斯科·达·伽马 (Da Gama)", type: "trade", desc: "达·伽马绕过好望角抵达印度卡利卡特，开辟了欧洲直通东方的香料贸易航路。", coords: [75.7, 11.2], color: "#38bdf8", icon: }, { year: 1519, title: "环球航行", subtitle: "Circumnavigation", person: "麦哲伦 (Magellan)", type: "exploration", desc: "麦哲伦船队向西航行，穿越麦哲伦海峡进入太平洋。虽麦哲伦死于菲律宾，船队完成了环球壮举。", coords: [-70.0, -52.0], // Strait of Magellan color: "#fbbf24", icon: }, { year: 1521, title: "征服阿兹特克", subtitle: "Fall of Tenochtitlan", person: "埃尔南·科尔特斯 (Cortés)", type: "conquest", desc: "西班牙征服者攻陷特诺奇蒂特兰，阿兹特克帝国灭亡，西班牙在墨西哥建立殖民统治。", coords: [-99.1, 19.4], color: "#ef4444", icon: }, { year: 1545, title: "波托西银矿", subtitle: "Silver Mines of Potosí", person: "西班牙殖民当局", type: "economy", desc: "在现玻利维亚发现巨型银矿。白银大量流入中国和欧洲，推动了全球贸易网络的形成。", coords: [-65.7, -19.5], color: "#fbbf24", icon: }, { year: 1571, title: "马尼拉大帆船", subtitle: "Manila Galleon Trade", person: "米格尔·洛佩斯 (Legazpi)", type: "trade", desc: "连接马尼拉与阿卡普尔科的航线建立，美洲白银换取中国丝绸瓷器，太平洋贸易闭环形成。", coords: [120.9, 14.5], color: "#fbbf24", icon: }, { year: 1600, title: "三角贸易兴盛", subtitle: "Triangular Trade System", person: "欧洲商船队", type: "system", desc: "欧洲(工业品)→非洲(奴隶)→美洲(原料)→欧洲的罪恶贸易闭环成型，资本主义原始积累加速。", coords: [-30.0, 20.0], // Middle of Atlantic color: "#ef4444", icon: } ], []); // --------------------------------------------------------------------------- // 2. 状态与常量 (State & Constants) // --------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const START_YEAR = 1400; const END_YEAR = 1620; const PIXELS_PER_YEAR = 40; const MOVE_SPEED = 0.3; // 慢速 const PAUSE_DURATION = 2000; // 2秒 // 动画核心状态引用 const stateRef = useRef({ currentYear: START_YEAR, isPlaying: true, isPaused: false, pauseStartTime: 0, lastPausedIndex: -1, globeRotation: [0, 0], targetRotation: [0, 0] }); // 渲染状态 const [renderState, setRenderState] = useState({ year: START_YEAR, rotation: [0, 0] }); // --------------------------------------------------------------------------- // 3. 辅助计算 (Helper Calculations) // --------------------------------------------------------------------------- // D3 Geo Projection for the Globe Wireframe const projection = useMemo(() => { return d3.geoOrthographic() .scale(220) .translate([WIDTH - 250, 250]) .clipAngle(90); }, []); const pathGenerator = useMemo(() => { return d3.geoPath().projection(projection); }, [projection]); const graticule = useMemo(() => { return d3.geoGraticule10(); }, []); // --------------------------------------------------------------------------- // 4. 动画循环 (Animation Loop) // --------------------------------------------------------------------------- useEffect(() => { let requestID; const loop = (timestamp) => { const state = stateRef.current; if (state.isPlaying) { // 1. 时间逻辑 if (state.isPaused) { const elapsed = timestamp - state.pauseStartTime; if (elapsed > PAUSE_DURATION) { state.isPaused = false; } } else { state.currentYear += MOVE_SPEED; // 检查事件触发 const activeEventIndex = EVENTS.findIndex(evt => { return Math.abs(state.currentYear - evt.year) < (MOVE_SPEED * 1.5); }); if (activeEventIndex !== -1 && activeEventIndex > state.lastPausedIndex) { state.isPaused = true; state.pauseStartTime = timestamp; state.lastPausedIndex = activeEventIndex; state.currentYear = EVENTS[activeEventIndex].year; // 吸附 // 设置地球目标旋转角度 (Invert coordinates for rotation) const [long, lat] = EVENTS[activeEventIndex].coords; state.targetRotation = [-long, -lat]; } // 循环播放 if (state.currentYear > END_YEAR + 5) { state.currentYear = START_YEAR; state.lastPausedIndex = -1; state.targetRotation = [-EVENTS[0].coords[0], -EVENTS[0].coords[1]]; } } // 2. 地球旋转插值 (Smooth Damp) const rotSpeed = 0.05; state.globeRotation[0] += (state.targetRotation[0] - state.globeRotation[0]) * rotSpeed; state.globeRotation[1] += (state.targetRotation[1] - state.globeRotation[1]) * rotSpeed; // 3. 触发渲染 setRenderState({ year: state.currentYear, rotation: [...state.globeRotation] }); } requestID = requestAnimationFrame(loop); }; requestID = requestAnimationFrame(loop); return () => cancelAnimationFrame(requestID); }, [EVENTS]); // 更新投影旋转 projection.rotate([renderState.rotation[0], renderState.rotation[1], 0]); // --------------------------------------------------------------------------- // 5. 渲染计算 (Render Calculations) // --------------------------------------------------------------------------- // Timeline Offset const timelineOffsetX = (WIDTH * 0.2); // 固定焦点在屏幕左侧20% const timelineCurrentX = (renderState.year - START_YEAR) * PIXELS_PER_YEAR; const timelineTranslateX = timelineOffsetX - timelineCurrentX; // Background Grid const gridLines = useMemo(() => { const lines = []; for(let x=0; x ); }; export default AgeOfDiscoveryTech; ```