```javascript 'use client'; 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'; // ----------------------------------------------------------------------------- // 数据定义：毛泽东生平关键节点 (1893-1976) // ----------------------------------------------------------------------------- const MAO_PATH = [ { name: "湖南韶山", year: 1893, type: "birth", desc: "1893年12月26日出生于湖南湘潭韶山冲一个农民家庭。在此度过童年及少年时代，接受传统私塾教育。", coords: [112.53, 27.91] }, { name: "长沙", year: 1911, type: "study", desc: "考入湘乡驻省中学，投笔从戎参加辛亥革命湖南新军。后入读湖南第一师范，师从杨昌济，创办《湘江评论》。", coords: [112.93, 28.23] }, { name: "北京", year: 1918, type: "awakening", desc: "在北京大学图书馆任助理员，结识李大钊、陈独秀，开始接触并信仰马克思主义。", coords: [116.40, 39.90] }, { name: "上海", year: 1921, type: "party", desc: "出席中国共产党第一次全国代表大会，成为党的创始人之一。", coords: [121.47, 31.23] }, // Added logical step for context { name: "广州", year: 1924, type: "coop", desc: "出席国民党一大，任国民党中央宣传部代理部长，主办农民运动讲习所。", coords: [113.26, 23.13] }, // Added logical step { name: "井冈山", year: 1927, type: "base", desc: "秋收起义失败后，率部进军井冈山，创建第一个农村革命根据地，点燃“工农武装割据”的星星之火。", coords: [114.17, 26.57] }, { name: "江西瑞金", year: 1931, type: "soviet", desc: "当选为中华苏维埃共和国临时中央政府主席，“毛主席”的称呼由此开始。", coords: [116.03, 25.88] }, { name: "贵州遵义", year: 1935, type: "turning", desc: "长征途中召开遵义会议，确立了在党中央和红军的领导地位，挽救了党和红军。", coords: [106.92, 27.72] }, { name: "陕北延安", year: 1937, type: "resistance", desc: "抗日战争时期的大后方。在此撰写《论持久战》，领导敌后抗战，开展整风运动。", coords: [109.48, 36.58] }, { name: "重庆", year: 1945, type: "negotiation", desc: "抗战胜利后，赴重庆同国民党进行谈判，签订《双十协定》，以此争取和平民主。", coords: [106.55, 29.57] }, { name: "西柏坡", year: 1948, type: "command", desc: "指挥辽沈、淮海、平津三大战役，召开七届二中全会，描绘新中国蓝图。", coords: [113.93, 38.42] }, { name: "北京双清别墅", year: 1949, type: "preparation", desc: "进驻香山，指挥渡江战役，筹备新政协，起草《论人民民主专政》。", coords: [116.20, 39.99] }, { name: "天安门", year: 1949, type: "founding", desc: "10月1日，宣告中华人民共和国成立：“中国人民从此站起来了！”", coords: [116.39, 39.90] }, { name: "杭州", year: 1954, type: "constitution", desc: "率宪法起草小组赴杭州，完成新中国第一部宪法草案。晚年喜爱居留杭州。", coords: [120.15, 30.27] }, { name: "武汉", year: 1956, type: "inspection", desc: "巡视南方，“才饮长沙水，又食武昌鱼”，畅游长江，关注经济建设。", coords: [114.30, 30.59] }, { name: "韶山滴水洞", year: 1966, type: "return", desc: "秘密回乡，在滴水洞居住11天，深思政治风云，随后发动“文化大革命”。", coords: [112.49, 27.93] }, { name: "北京中南海", year: 1976, type: "death", desc: "1976年9月9日零时10分在北京逝世，享年83岁。一个时代就此落幕。", coords: [116.38, 39.91] } ]; // 动画总时长 (毫秒) const ANIMATION_DURATION = 65000; const CANVAS_WIDTH = 1200; const CANVAS_HEIGHT = 700; export default function MaoZedongLifeMap() { const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); const [progress, setProgress] = useState(0); // 0.0 to 1.0 const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // Refs const requestRef = useRef(null); const startTimeRef = useRef(null); const pausedProgressRef = useRef(0); // 1. Data Loading useEffect(() => { // 使用稳定的 GeoJSON 源 const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; fetch(CHINA_GEOJSON_URL) .then(res => res.json()) .then(data => { setGeoData(data); setLoading(false); }) .catch(err => { console.error("Map load failed", err); setLoading(false); }); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 2. D3 Logic (Memoized) const { projection, pathGenerator, projectedPath, pathLength, pathSvgString } = useMemo(() => { if (!geoData) return {}; // 调整投影以聚焦中国中心并适配画布 const proj = d3.geoMercator() .center([105, 36]) // 中心点调整 .scale(900) // 缩放 .translate([CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); // 转换路径点坐标 const projectedPoints = MAO_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); // 计算路径长度 (用于 stroke-dasharray) let length = 0; // SSR safe check if (typeof document !== 'undefined') { const pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path"); pathEl.setAttribute("d", pathString); length = pathEl.getTotalLength(); } return { projection: proj, pathGenerator: pathGen, projectedPath: projectedPoints, pathLength: length, pathSvgString: pathString }; }, [geoData]); // 3. Animation Loop const animate = useCallback((time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // 计算当前进度 = 之前暂停的进度 + (流逝时间 / 总时间) const deltaProgress = elapsed / ANIMATION_DURATION; const newProgress = Math.min(pausedProgressRef.current + deltaProgress, 1); setProgress(newProgress); if (newProgress < 1) { requestRef.current = requestAnimationFrame(animate); } else { setIsFinished(true); setIsPlaying(false); pausedProgressRef.current = 1; } }, []); const startAnimation = () => { if (isFinished) { setProgress(0); pausedProgressRef.current = 0; setIsFinished(false); } setIsPlaying(true); startTimeRef.current = null; // Reset start time for the new frame batch requestRef.current = requestAnimationFrame(animate); }; const pauseAnimation = () => { setIsPlaying(false); pausedProgressRef.current = progress; // Save current progress if (requestRef.current) cancelAnimationFrame(requestRef.current); }; const resetAnimation = () => { pauseAnimation(); setProgress(0); pausedProgressRef.current = 0; setIsFinished(false); }; // 4. Calculate Current Status (Head Position & Active Event) const currentStatus = useMemo(() => { if (!projectedPath || projectedPath.length === 0) return null; const totalPoints = projectedPath.length; // 找出当前进度对应的“段” // 使用简单的分段插值 (更精确的方法是使用 path.getPointAtLength，但为了性能和SSR兼容，这里使用数学插值) // 虚拟的分段数 (points - 1) const maxIndex = totalPoints - 1; // 当前应该经过了多少个点 const virtualIndex = progress * maxIndex; const currentIndex = Math.floor(virtualIndex); // 当前起点的索引 const nextIndex = Math.min(currentIndex + 1, maxIndex); // 当前段内的进度 (0-1) const segmentProgress = virtualIndex - currentIndex; const p1 = projectedPath[currentIndex]; const p2 = projectedPath[nextIndex]; // 简单的线性插值 (Linear Lerp) - 虽然路径是曲线，但点够密或者只作示意时足够 // 如果要完全贴合曲线，需要更复杂的逻辑，但这里为了视觉流畅，我们可以假设点之间是直线移动， // 或者使用 CatmullRom 插值公式。为了代码简洁且性能高，这里采用线性插值， // 因为 d3.curveCatmullRom 产生的路径在点之间偏移不大。 const curX = p1.x + (p2.x - p1.x) * segmentProgress; const curY = p1.y + (p2.y - p1.y) * segmentProgress; return { activeEvent: projectedPath[currentIndex], nextEvent: projectedPath[nextIndex], headX: curX, headY: curY, visitedIndex: currentIndex }; }, [progress, projectedPath]); // 5. Render Helpers if (loading) { return (

载入历史地图...

); } return (

{/* Texture Overlay */}

{/* Main Content Wrapper */}

{/* Title */}

伟人足迹

毛泽东生平地理时间线 (1893-1976)

{/* Playback Controls */}

当前年份 {currentStatus ? currentStatus.activeEvent.year : 1893}

{/* Map SVG */} {/* Info Card */} {currentStatus && (

{getEventTypeLabel(currentStatus.activeEvent.type)}

{currentStatus.activeEvent.name}

{currentStatus.activeEvent.year}年

{currentStatus.activeEvent.desc}

{/* Decorative elements */}

)} {/* Start Overlay */} {!isPlaying && progress === 0 && (

开启历史篇章

)}

); } // 辅助函数：事件类型映射 function getEventTypeLabel(type) { const map = { 'birth': '诞生', 'study': '求学', 'awakening': '觉醒', 'party': '建党', 'coop': '国共合作', 'base': '根据地', 'soviet': '瑞金时期', 'turning': '历史转折', 'resistance': '抗日烽火', 'negotiation': '重庆谈判', 'command': '决胜千里', 'preparation': '筹建新中国', 'founding': '开国大典', 'constitution': '宪法起草', 'inspection': '视察大江', 'return': '故地重游', 'death': '巨星陨落' }; return map[type] || '历史时刻'; } ```