```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Constants & Data // ----------------------------------------------------------------------------- const LONG_MARCH_PATH = [ { name: "瑞金", year: "1934.10", type: "start", desc: "中央红军主力八万六千余人从江西瑞金、于都等地出发，开始战略转移。长征由此拉开序幕。", coords: [116.03, 25.88] }, { name: "湘江", year: "1934.11", type: "battle", desc: "突破第四道封锁线。湘江战役是长征中最惨烈的一战，红军以巨大代价渡过湘江，兵力折损过半。", coords: [110.50, 25.50] }, { name: "遵义", year: "1935.01", type: "turning_point", desc: "攻克遵义。在此召开的遵义会议，确立了新的领导核心，成为中国革命生死攸关的转折点。", coords: [106.92, 27.72] }, { name: "四渡赤水", year: "1935.01", type: "tactic", desc: "在赤水河畔穿插迂回，四渡赤水出奇兵，摆脱了几十万敌军的围追堵截，取得战略主动。", coords: [106.00, 28.50], curveFactor: 0.8 // Special curve handling for loop visuals }, { name: "巧渡金沙江", year: "1935.05", type: "maneuver", desc: "红军主力在七天七夜间，依靠七只小船渡过金沙江，彻底跳出了敌人的包围圈。", coords: [102.50, 26.50] }, { name: "飞夺泸定桥", year: "1935.05", type: "heroic", desc: "二十二名勇士冒着枪林弹雨，攀踏铁索，夺下大渡河上的泸定桥，粉碎了成为“石达开第二”的预言。", coords: [102.24, 29.91] }, { name: "雪山草地", year: "1935.06", type: "hardship", desc: "翻越终年积雪的夹金山，穿越渺无人烟的松潘草地。红军战胜了极端恶劣的自然环境，挑战人类极限。", coords: [102.60, 32.00] }, { name: "腊子口", year: "1935.09", type: "breach", desc: "攻克天险腊子口，打通了北上抗日的通道。随后翻越六盘山，以此为背景诞生了《清平乐·六盘山》。", coords: [103.90, 34.00] }, { name: "吴起镇", year: "1935.10", type: "victory", desc: "中央红军到达陕北吴起镇，与陕北红军胜利会师。行程二万五千里，长征胜利结束。", coords: [108.17, 36.92] } ]; // Visual Configuration const BASE_SPEED = 120; // Pixels per second const HOLD_DURATION = 3200; const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#1a1a1d"; // Dark tactical background const MAP_COLOR = "#2a2a30"; const MAP_STROKE = "#3a3a40"; const ACCENT_RED = "#de2910"; // China Red const ACCENT_GOLD = "#ffde00"; // Star Gold // GeoJSON Source (Standard China Map Simplified) const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const LongMarchMap = () => { // 1. Data State const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); // 2. Animation State const [activeNodeIndex, setActiveNodeIndex] = useState(-1); const [currentLength, setCurrentLength] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // 3. Mutable Refs for Animation Loop const requestRef = useRef(); const lastTimeRef = useRef(0); const hasStartedRef = useRef(false); const stateRef = useRef({ phase: 'idle', // idle, moving, holding, finished currentLen: 0, targetLen: 0, nodeIndex: 0, holdStartTime: 0, totalPathLength: 0, nodeLengths: [], }); const pathRef = useRef(null); // --------------------------------------------------------------------------- // Data Loading // --------------------------------------------------------------------------- useEffect(() => { let isMounted = true; fetch(CHINA_GEOJSON_URL) .then(res => res.json()) .then(data => { if (isMounted) { setGeoData(data); setLoading(false); } }) .catch(err => { console.error("Map load failed", err); if (isMounted) setLoading(false); }); return () => { isMounted = false; }; }, []); // --------------------------------------------------------------------------- // D3 Projection & Path Generation // --------------------------------------------------------------------------- const { pathGenerator, projectedPath, pathSvgString } = useMemo(() => { if (!geoData) return {}; // Focus on Central/South China const proj = d3.geoMercator() .center([106.5, 30.5]) .scale(1800) .translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); const projectedPoints = LONG_MARCH_PATH.map(p => { const [x, y] = proj(p.coords); return { ...p, x, y }; }); const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); const pathString = lineGenerator(projectedPoints); return { pathGenerator: pathGen, projectedPath: projectedPoints, pathSvgString: pathString }; }, [geoData]); // --------------------------------------------------------------------------- // Path Measurement & Auto Start // --------------------------------------------------------------------------- useLayoutEffect(() => { if (pathRef.current && projectedPath && projectedPath.length > 0) { const pathEl = pathRef.current; const totalLen = pathEl.getTotalLength(); // Calculate length at each node point on the curve const lengths = []; const precision = 2000; const pathPoints = []; // Sample points along the SVG path to find nearest matches to our nodes for (let i = 0; i <= precision; i++) { const l = (i / precision) * totalLen; const p = pathEl.getPointAtLength(l); pathPoints.push({ l, x: p.x, y: p.y }); } projectedPath.forEach((node, i) => { if (i === 0) { lengths.push(0); return; } // Find closest point on the spline to the actual node coordinate // This handles the discrepancy between the CatmullRom curve and strict linear points let minDist = Infinity; let bestLen = 0; // Optimization: Start searching from previous node's length const startSearchIdx = lengths[i-1] ? Math.floor((lengths[i-1] / totalLen) * precision) : 0; for (let j = startSearchIdx; j < pathPoints.length; j++) { const pp = pathPoints[j]; const dist = Math.sqrt((pp.x - node.x)**2 + (pp.y - node.y)**2); if (dist < minDist) { minDist = dist; bestLen = pp.l; } // Optimization: Stop if we move away too far after finding a close point if (minDist < 5 && dist > 30) break; } lengths.push(bestLen); }); stateRef.current.totalPathLength = totalLen; stateRef.current.nodeLengths = lengths; // Initialize Animation State if (!hasStartedRef.current) { hasStartedRef.current = true; stateRef.current.currentLen = 0; stateRef.current.nodeIndex = 0; stateRef.current.targetLen = 0; stateRef.current.phase = 'holding'; stateRef.current.holdStartTime = null; setActiveNodeIndex(0); setIsPlaying(true); requestRef.current = requestAnimationFrame(animate); } } }, [projectedPath, pathSvgString]); // --------------------------------------------------------------------------- // Animation Loop // --------------------------------------------------------------------------- const animate = useCallback((time) => { if (!lastTimeRef.current) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; lastTimeRef.current = time; const state = stateRef.current; if (state.phase === 'moving') { // Variable speed could be implemented here based on terrain difficulty const currentSpeed = BASE_SPEED; const dist = (currentSpeed * deltaTime) / 1000; state.currentLen += dist; if (state.currentLen >= state.targetLen) { state.currentLen = state.targetLen; state.phase = 'holding'; state.holdStartTime = time; setActiveNodeIndex(state.nodeIndex); setCurrentLength(state.currentLen); } else { setCurrentLength(state.currentLen); } } else if (state.phase === 'holding') { if (!state.holdStartTime) state.holdStartTime = time; if (time - state.holdStartTime > HOLD_DURATION) { const nextIndex = state.nodeIndex + 1; if (nextIndex < state.nodeLengths.length) { state.nodeIndex = nextIndex; state.targetLen = state.nodeLengths[nextIndex]; state.phase = 'moving'; } else { state.phase = 'finished'; setIsFinished(true); setIsPlaying(false); } } } if (state.phase !== 'finished') { requestRef.current = requestAnimationFrame(animate); } }, []); // Controls const togglePlay = () => { if (isFinished) { // Reset stateRef.current.currentLen = 0; stateRef.current.nodeIndex = 0; stateRef.current.targetLen = 0; stateRef.current.phase = 'holding'; stateRef.current.holdStartTime = performance.now(); setActiveNodeIndex(0); setIsFinished(false); setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } else { if (isPlaying) { setIsPlaying(false); if (requestRef.current) cancelAnimationFrame(requestRef.current); } else { setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } } }; useEffect(() => { return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // Head Position Calculation const headPos = useMemo(() => { if (!pathRef.current || currentLength < 0) return projectedPath?.[0] || {x:0, y:0}; const p = pathRef.current.getPointAtLength(Math.max(0, currentLength)); return { x: p.x, y: p.y }; }, [currentLength, projectedPath]); // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- if (loading) { return (

历史数据载入中...

); } return (

{/* Map Texture & Grid */}

{/* Vignette */}

{/* Main Title */}

长征

THE LONG MARCH (1934-1935)

{/* Compass / Scale Decoration */}

{/* Dynamic Info Panel */} {activeNodeIndex >= 0 && LONG_MARCH_PATH[activeNodeIndex] && ( {/* Background Decoration */}

{getEventIcon(LONG_MARCH_PATH[activeNodeIndex].type, 120)}

{/* Header Row */}

{LONG_MARCH_PATH[activeNodeIndex].year}

{LONG_MARCH_PATH[activeNodeIndex].name}

{/* Title */}

{getEventTitle(LONG_MARCH_PATH[activeNodeIndex])}

{/* Description */}

{LONG_MARCH_PATH[activeNodeIndex].desc}

{/* Progress Line */}

)} {/* Playback Control */}

); }; // ----------------------------------------------------------------------------- // Helper Functions // ----------------------------------------------------------------------------- function getEventTypeColor(type) { switch(type) { case 'start': return '#3b82f6'; case 'victory': return '#eab308'; case 'battle': return '#ef4444'; case 'heroic': return '#f97316'; case 'hardship': return '#94a3b8'; // Cold color for snow case 'turning_point': return '#eab308'; default: return '#ef4444'; } } function getEventTitle(node) { const typeMap = { 'start': '战略转移', 'battle': '血战突围', 'turning_point': '伟大转折', 'tactic': '出奇制胜', 'maneuver': '跳出包围', 'heroic': '大渡桥横', 'hardship': '雪山草地', 'breach': '雄关漫道', 'victory': '三军会师' }; return typeMap[node.type] || node.name; } function getEventIcon(type, size=24) { const color = getEventTypeColor(type); switch(type) { case 'start': return ; case 'victory': return ; case 'battle': return ; case 'heroic': return ; case 'hardship': return ; case 'turning_point': return ; case 'maneuver': return ; default: return ; } } ```