```javascript import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // 1. 数据与常量配置 // ----------------------------------------------------------------------------- // 历史节点数据：抗日战争关键战役与进程 const HISTORICAL_EVENTS = [ { name: "沈阳", year: 1931, type: "start", desc: "【九一八事变】关东军炸毁柳条湖铁路，炮轰北大营。东北沦陷，抗战序幕拉开。", coords: [123.43, 41.80] }, { name: "长春", year: 1932, type: "occupation", desc: "【伪满洲国】日军扶植傀儡政权，企图永久分裂中国版图。东北抗联在冰天雪地中坚持斗争。", coords: [125.32, 43.81] }, { name: "卢沟桥", year: 1937, type: "escalation", desc: "【七七事变】日军借口演习士兵失踪炮轰宛平城。中国守军奋起还击，全民族抗战爆发。", coords: [116.23, 39.85] }, { name: "上海", year: 1937, type: "battle", desc: "【淞沪会战】“八百壮士”守四行。三个月激战粉碎了日军“三月亡华”的狂妄计划。", coords: [121.47, 31.23] }, { name: "南京", year: 1937, type: "tragedy", desc: "【南京大屠杀】城陷后，日军屠杀我同胞三十余万。血泪历史，永志不忘。", coords: [118.79, 32.06] }, { name: "台儿庄", year: 1938, type: "clash", desc: "【台儿庄大捷】徐州会战中，中国军队重创日军精锐，歼敌万余，极大鼓舞了全国军民士气。", coords: [117.74, 34.56] }, { name: "武汉", year: 1938, type: "turning_point", desc: "【武汉会战】遍及四省的百万兵力大决战。虽武汉失守，但抗战随之进入战略相持阶段。", coords: [114.30, 30.59] }, { name: "长沙", year: 1939, type: "defense", desc: "【长沙会战】薛岳将军指挥“天炉战法”，三次击退日军进犯，歼敌十万余人。", coords: [112.93, 28.23] }, { name: "昆明", year: 1941, type: "logistics", desc: "【飞虎队与驼峰航线】大后方生命线。中美空军并在空战中重创日机，保障物资运输。", coords: [102.83, 24.88] }, { name: "芷江", year: 1945, type: "victory", desc: "【芷江受降】湘西会战胜利。1945年8月，日本代表在芷江向中国军队洽降。抗战最终胜利。", coords: [109.68, 27.44] } ]; // 画布尺寸 (竖屏设计) const CANVAS_WIDTH = 900; const CANVAS_HEIGHT = 1600; // 视觉配色 const COLORS = { bg: "#0f172a", // 深蓝背景 mapFill: "#1e293b", // 地图板块 mapStroke: "#334155", // 地图边界 pathBase: "#475569", // 规划路径底色 pathActive: "#ef4444", // 激活路径(红) accent: "#f87171", // 强调色 victory: "#10b981", // 胜利绿 text: "#f1f5f9", // 主文本 muted: "#94a3b8", // 次要文本 grid: "rgba(148, 163, 184, 0.05)" }; // 动画配置 const ANIMATION_CONFIG = { speed: 250, // 像素/秒 (略微加快) pauseDuration: 3500, // 节点停留时间(ms) }; // 地图数据源 const GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // ----------------------------------------------------------------------------- // 2. 核心组件 // ----------------------------------------------------------------------------- export default function TacticalWarMap() { // --- State --- const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); const [activeIndex, setActiveIndex] = useState(-1); const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // --- Refs (用于高性能动画循环) --- const requestRef = useRef(); const lastTimeRef = useRef(0); const progressRef = useRef(0); const phaseRef = useRef('idle'); // idle, moving, holding, finished const holdStartTimeRef = useRef(0); const isPlayingRef = useRef(false); // Ref 版本的 isPlaying 供 RAF 使用 // DOM Refs const pathElementRef = useRef(null); const headGroupRef = useRef(null); const pulseCircleRef = useRef(null); // Data Refs const pathTotalLengthRef = useRef(0); const nodeStopsRef = useRef([]); const initializationRef = useRef(false); // 确保只初始化一次 path 数据 // 同步 State 到 Ref useEffect(() => { isPlayingRef.current = isPlaying; }, [isPlaying]); // --- 1. 数据加载 --- useEffect(() => { let mounted = true; fetch(GEOJSON_URL) .then(res => res.json()) .then(data => { if (mounted) { setGeoData(data); setLoading(false); } }) .catch(err => { console.error("Map Load Error:", err); if (mounted) setLoading(false); }); return () => { mounted = false; }; }, []); // --- 2. D3 投影计算 (Memoized) --- const { pathGenerator, projectedPoints, pathD } = useMemo(() => { if (!geoData) return { pathGenerator: null, projectedPoints: [], pathD: "" }; // 调整投影以在竖屏完整显示中国地图 // 中国经度范围约 73-135，纬度 18-54 // 竖屏时，宽度是限制因素。 const projection = d3.geoMercator() .center([105, 38]) // 中心点设置在几何中心附近 .scale(850) // 缩放比例适配 900px 宽度 .translate([CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 150]); // 略微上移，留出底部空间 const pathGen = d3.geoPath().projection(projection); const points = HISTORICAL_EVENTS.map(evt => { const [x, y] = projection(evt.coords); return { ...evt, x, y }; }); const lineGen = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); return { pathGenerator: pathGen, projectedPoints: points, pathD: lineGen(points) }; }, [geoData]); // --- 3. 路径预处理 (仅在路径生成后执行一次) --- useEffect(() => { if (pathElementRef.current && pathD && !initializationRef.current) { const totalLen = pathElementRef.current.getTotalLength(); pathTotalLengthRef.current = totalLen; // 计算每个节点在路径上的精确位置 const precision = 1000; const stops = []; projectedPoints.forEach((pt, idx) => { if (idx === 0) { stops.push(0); return; } let bestLen = 0; let minDis = Infinity; const startSearch = stops[idx - 1] || 0; // 搜索该节点对应的路径长度 for (let i = 0; i <= precision; i++) { const l = startSearch + (i / precision) * (totalLen - startSearch); const p = pathElementRef.current.getPointAtLength(l); const dx = p.x - pt.x; const dy = p.y - pt.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < minDis) { minDis = dist; bestLen = l; } if (minDis < 2 && dist > 5) break; // 优化：找到极小值后若距离变大则停止 } stops.push(bestLen); }); nodeStopsRef.current = stops; initializationRef.current = true; // 初始状态设置 progressRef.current = 0; phaseRef.current = 'holding'; holdStartTimeRef.current = performance.now(); setActiveIndex(0); setIsPlaying(true); } }, [pathD, projectedPoints]); // --- 4. 动画主循环 (单次启动) --- useEffect(() => { const loop = (time) => { if (!lastTimeRef.current) lastTimeRef.current = time; const dt = time - lastTimeRef.current; lastTimeRef.current = time; // 仅当isPlaying且数据初始化完成后运行逻辑 if (isPlayingRef.current && initializationRef.current && !phaseRef.current.includes('finished')) { const totalLen = pathTotalLengthRef.current; const stops = nodeStopsRef.current; // --- 状态机逻辑 --- if (phaseRef.current === 'moving') { const moveDist = (ANIMATION_CONFIG.speed * dt) / 1000; progressRef.current += moveDist; // 寻找当前应该到达的目标节点索引 // activeIndex 是当前显示的卡片，目标是 activeIndex + 1 // 这里我们需要通过 state 的 setter 获取最新值比较困难，所以利用 DOM 或 Ref 状态推导 // 简单起见，我们假设 DOM 更新是同步的，但在 React 中 activeIndex 是异步的 // 所以我们依赖 stops 数组和 progressRef 来判断 let foundNext = false; for (let i = 0; i < stops.length; i++) { if (progressRef.current < stops[i]) { // 还没到这个点 break; } // 已经超过这个点，检查是否需要触发暂停 // 我们需要一个 ref 来记录上一次处理过的节点索引，避免重复触发 // 这里简化逻辑：检查当前 progress 是否刚刚跨越某个 stop } // 重新逻辑：基于当前 activeIndex 寻找下一个 stop // 为了避免 state 闭包问题，我们不直接读取 activeIndex，而是根据 progress 推算 // 但为了 UI 同步，我们需要 setState。 // 查找当前 progress 所在的段落 let currentSegmentEndIndex = -1; for(let i=0; i= stops[i]) { currentSegmentEndIndex = i; } else { break; } } // 如果计算出的位置比当前显示的节点更靠后，说明到达了新节点 // 注意：这里需要一种方式读取当前的 "React State Index" 而不依赖闭包 // 我们使用 setState 的回调函数来做判断，或者在外部记录一个 indexRef // 简化方案：我们只关注“下一个目标” // 假设我们有一个 localIndexRef 记录逻辑上的 index // 由于不能在 loop 里频繁 setState，我们只在到达 stop 时 set } else if (phaseRef.current === 'holding') { if (time - holdStartTimeRef.current > ANIMATION_CONFIG.pauseDuration) { phaseRef.current = 'moving'; } } // ---------------------------------------------------- // 修正后的逻辑：使用显式的逻辑索引 // ---------------------------------------------------- } // 实际执行逻辑 (重写以确保清晰) if (isPlayingRef.current && initializationRef.current) { if (phaseRef.current === 'moving') { progressRef.current += (ANIMATION_CONFIG.speed * dt) / 1000; // 检查有没有撞线 const stops = nodeStopsRef.current; // 找到大于当前 progress 的最小 stop let nextStopIdx = -1; for(let i=0; i progressRef.current + 0.1) { // +0.1 容差 nextStopIdx = i; break; } } if (nextStopIdx !== -1) { // 正在前往 nextStopIdx const targetLen = stops[nextStopIdx]; if (progressRef.current >= targetLen - 1) { // 快到了 progressRef.current = targetLen; phaseRef.current = 'holding'; holdStartTimeRef.current = time; // 触发 React 更新 setActiveIndex(nextStopIdx); } } else { // 没有下一个点了，说明到了终点 if (progressRef.current >= pathTotalLengthRef.current) { progressRef.current = pathTotalLengthRef.current; phaseRef.current = 'finished'; setIsFinished(true); setIsPlaying(false); } } } else if (phaseRef.current === 'holding') { if (time - holdStartTimeRef.current > ANIMATION_CONFIG.pauseDuration) { // 检查是否还有下一站 if (progressRef.current < pathTotalLengthRef.current - 1) { phaseRef.current = 'moving'; } else { phaseRef.current = 'finished'; setIsFinished(true); setIsPlaying(false); } } } // --- DOM 更新 --- if (pathElementRef.current && headGroupRef.current) { const len = progressRef.current; const total = pathTotalLengthRef.current; // 绘制路径 pathElementRef.current.style.strokeDashoffset = total - len; // 移动头部 const p = pathElementRef.current.getPointAtLength(len); headGroupRef.current.setAttribute('transform', `translate(${p.x}, ${p.y})`); // 雷达波纹 if (pulseCircleRef.current) { pulseCircleRef.current.style.opacity = phaseRef.current === 'holding' ? 1 : 0; } } } requestRef.current = requestAnimationFrame(loop); }; requestRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(requestRef.current); }, []); // 依赖为空，确保只启动一次 // 播放控制 const handleToggle = () => { if (isFinished) { progressRef.current = 0; phaseRef.current = 'holding'; holdStartTimeRef.current = performance.now(); setActiveIndex(0); setIsFinished(false); setIsPlaying(true); } else { setIsPlaying(!isPlaying); } }; // --- Render --- if (loading) { return (

); } const currentEvent = HISTORICAL_EVENTS[activeIndex] || HISTORICAL_EVENTS[0]; const isVictory = currentEvent.type === 'victory'; const themeColor = isVictory ? COLORS.victory : COLORS.accent; return (

{/* 背景层 */}

{/* 标题层 */}

铭记历史

日本侵华历史轨迹（1931-1945）

{/* SVG 容器 */}

{/* 信息面板 (稍微上移) */} {/* 顶部栏 */}

{currentEvent.year} HISTORICAL EVENT

e.currentTarget.style.background = 'rgba(255,255,255,0.15)'} onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'} > {isFinished ? : (isPlaying ? : )}

{/* 内容 */}

{currentEvent.name}

{currentEvent.desc}

{/* 进度条 */}

{/* 装饰边框 */}

); } ```