```javascript import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { MapPin, Scroll, Wind, Play, Pause, RefreshCw, ChevronRight, BookOpen } from 'lucide-react'; import * as d3 from 'd3'; // --- Configuration & Data --- const WIDTH = 1200; const HEIGHT = 700; const ANIMATION_SPEED_BASE = 0.5; // Base movement speed // Li Bai's Journey Data (Approximate Coordinates for 1200x700 Canvas) // Coordinates are manually tuned to resemble a stylized map of China within the canvas const JOURNEY_NODES = [ { id: 'birth', name: '碎叶/江油', desc: '出生与成长', x: 340, y: 460, year: '701-724', poem: "郎骑竹马来，绕床弄青梅。", source: "《长干行》", type: 'start' }, { id: 'emei', name: '峨眉山', desc: '初出蜀地', x: 360, y: 490, year: '724', poem: "峨眉山月半轮秋，影入平羌江水流。", source: "《峨眉山月歌》", type: 'node' }, { id: 'chongqing', name: '渝州 (重庆)', desc: '辞亲远游', x: 440, y: 480, year: '725', poem: "夜发清溪向三峡，思君不见下渝州。", source: "《峨眉山月歌》", type: 'node' }, { id: 'baidi', name: '白帝城', desc: '长江三峡', x: 500, y: 465, year: '725', poem: "两岸猿声啼不住，轻舟已过万重山。", source: "《早发白帝城》", type: 'node' }, { id: 'jingmen', name: '荆门', desc: '初入楚地', x: 580, y: 460, year: '725', poem: "山随平野尽，江入大荒流。", source: "《渡荆门送别》", type: 'node' }, { id: 'hubei', name: '安陆', desc: '娶妻隐居', x: 640, y: 440, year: '727-738', poem: "问余何意栖碧山，笑而不答心自闲。", source: "《山中问答》", type: 'stay' }, { id: 'xiangyang', name: '襄阳', desc: '拜访孟浩然', x: 620, y: 410, year: '730', poem: "吾爱孟夫子，风流天下闻。", source: "《赠孟浩然》", type: 'node' }, { id: 'changan_1', name: '长安 (西安)', desc: '供奉翰林', x: 540, y: 340, year: '742-744', poem: "云想衣裳花想容，春风拂槛露华浓。", source: "《清平调》", type: 'major' }, { id: 'luoyang', name: '洛阳', desc: '遇杜甫', x: 620, y: 350, year: '744', poem: "飞蓬各自远，且尽手中杯。", source: "《鲁郡东石门送杜二甫》", type: 'major' }, { id: 'shandong', name: '山东 (任城)', desc: '漫游齐鲁', x: 750, y: 320, year: '745', poem: "兰陵美酒郁金香，玉碗盛来琥珀光。", source: "《客中行》", type: 'stay' }, { id: 'anhui_jingting', name: '宣城', desc: '独坐敬亭山', x: 800, y: 450, year: '753', poem: "相看两不厌，只有敬亭山。", source: "《独坐敬亭山》", type: 'stay' }, { id: 'lushan', name: '庐山', desc: '隐居避乱', x: 720, y: 480, year: '755', poem: "飞流直下三千尺，疑是银河落九天。", source: "《望庐山瀑布》", type: 'node' }, { id: 'yelang', name: '流放夜郎', desc: '逆流而上', x: 400, y: 520, year: '758', poem: "我寄愁心与明月，随君直到夜郎西。", source: "《闻王昌龄左迁》", type: 'node' }, { id: 'dangtu', name: '当涂', desc: '醉酒捉月', x: 820, y: 460, year: '762', poem: "举杯邀明月，对影成三人。", source: "《月下独酌》", type: 'end' } ]; // --- Helper Components --- // Simplified map generation using a rough polygon of China for visualization // Since we can't load external GeoJSON, we use a predefined path string scaled to our canvas const CHINA_OUTLINE_PATH = "M 250 150 L 400 120 L 550 100 L 700 80 L 850 120 L 950 200 L 1000 300 L 950 450 L 850 550 L 750 600 L 600 650 L 450 620 L 300 550 L 200 450 L 150 300 Z"; // --- Main Component --- export default function LiBaiLifeMap() { // --- Refs for Animation Engine --- const requestRef = useRef(); const startTimeRef = useRef(null); const previousTimeRef = useRef(null); // Animation State (Mutable, non-rendering) const animState = useRef({ totalLength: 0, currentDistance: 0, targetDistance: 0, speed: 0, nodeIndex: 0, isPaused: false, mode: 'TRAVEL', // 'TRAVEL' or 'READING' waitTimer: 0, trailPoints: [] }); // DOM Refs const svgPathRef = useRef(null); // The invisible path to trace const trailPathRef = useRef(null); // The visible trail const cursorRef = useRef(null); // The moving dot const rippleRef = useRef(null); // Ripple effect at current location const progressBarRef = useRef(null); // Reading progress // --- React State for UI --- const [currentNode, setCurrentNode] = useState(JOURNEY_NODES[0]); const [isPaused, setIsPaused] = useState(false); const [hasStarted, setHasStarted] = useState(false); const [visitedNodes, setVisitedNodes] = useState([0]); // Store indices of visited nodes // --- Initialization --- // Generate the smooth path string using D3 const pathData = useMemo(() => { const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); // Smooth curve return lineGenerator(JOURNEY_NODES); }, []); // Generate background map grid (Tech style) const mapGrid = useMemo(() => { const points = []; const polygon = [ [200, 250], [400, 100], [800, 80], [1050, 250], [1000, 500], [800, 600], [400, 620], [200, 500] ]; // Rough bounding polygon for visual dots // Create a hexagonal grid pattern for (let y = 50; y < HEIGHT; y += 25) { for (let x = 50; x < WIDTH; x += 25) { // Simple distance check to create a "cloud" of points resembling land // This is a procedural approximation since we don't have GeoJSON const dx = x - 600; const dy = y - 380; const dist = Math.sqrt(dx*dx + dy*dy); const noise = Math.sin(x * 0.05) * 20 + Math.cos(y * 0.05) * 20; if (dist + noise < 380) { points.push( ); } } } return points; }, []); // --- Animation Loop --- const animate = useCallback((time) => { if (!startTimeRef.current) startTimeRef.current = time; if (!previousTimeRef.current) previousTimeRef.current = time; const deltaTime = time - previousTimeRef.current; previousTimeRef.current = time; const state = animState.current; if (state.isPaused || !hasStarted) { requestRef.current = requestAnimationFrame(animate); return; } // Initialize total length if needed if (state.totalLength === 0 && svgPathRef.current) { state.totalLength = svgPathRef.current.getTotalLength(); } if (state.mode === 'TRAVEL') { // Move along path const speed = ANIMATION_SPEED_BASE * deltaTime * 0.2; // Pixels per frame factor state.currentDistance += speed; // Check if we reached the next node // We need to find the length at the next node index // Since getPointAtLength is expensive to reverse, we approximate by checking distance to next node coordinate const nextNode = JOURNEY_NODES[state.nodeIndex + 1]; if (nextNode) { const currentPoint = svgPathRef.current.getPointAtLength(state.currentDistance); const dx = nextNode.x - currentPoint.x; const dy = nextNode.y - currentPoint.y; const dist = Math.sqrt(dx*dx + dy*dy); // If close enough to the next node, snap and switch to READING if (dist < 5) { state.nodeIndex++; state.mode = 'READING'; state.waitTimer = 0; // Trigger React Update setCurrentNode(JOURNEY_NODES[state.nodeIndex]); setVisitedNodes(prev => [...prev, state.nodeIndex]); } } else { // End of journey state.mode = 'FINISHED'; state.isPaused = true; setIsPaused(true); } // Update DOM for Cursor const p = svgPathRef.current.getPointAtLength(state.currentDistance); if (cursorRef.current) { cursorRef.current.setAttribute('transform', `translate(${p.x}, ${p.y})`); } // Update Trail (reveal path) if (trailPathRef.current) { // stroke-dasharray is set to totalLength // stroke-dashoffset reveals the line trailPathRef.current.style.strokeDashoffset = state.totalLength - state.currentDistance; } // Update Ripple position if (rippleRef.current) { rippleRef.current.setAttribute('transform', `translate(${p.x}, ${p.y})`); } } else if (state.mode === 'READING') { // Wait at the node state.waitTimer += deltaTime; const duration = 3000; // 3 seconds per poem // Update progress bar width directly if (progressBarRef.current) { const progress = Math.min(state.waitTimer / duration, 1); progressBarRef.current.style.width = `${progress * 100}%`; } if (state.waitTimer >= duration) { state.mode = 'TRAVEL'; // Reset progress bar if (progressBarRef.current) progressBarRef.current.style.width = '0%'; } } requestRef.current = requestAnimationFrame(animate); }, [hasStarted]); // --- Side Effects --- // Start Loop useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // Handle Pause Toggle useEffect(() => { animState.current.isPaused = isPaused; }, [isPaused]); // --- Handlers --- const handleStart = () => { setHasStarted(true); setIsPaused(false); }; const handleReset = () => { setHasStarted(false); setIsPaused(false); setCurrentNode(JOURNEY_NODES[0]); setVisitedNodes([0]); animState.current = { totalLength: 0, currentDistance: 0, targetDistance: 0, speed: 0, nodeIndex: 0, isPaused: false, mode: 'TRAVEL', waitTimer: 0, trailPoints: [] }; // Reset visual elements if (trailPathRef.current) trailPathRef.current.style.strokeDashoffset = svgPathRef.current.getTotalLength(); if (cursorRef.current) cursorRef.current.setAttribute('transform', `translate(${JOURNEY_NODES[0].x}, ${JOURNEY_NODES[0].y})`); if (progressBarRef.current) progressBarRef.current.style.width = '0%'; // Small timeout to restart setTimeout(() => { setHasStarted(true); }, 100); }; return (

{/* 1. Map Layer (SVG) */} {/* 2. UI Overlay Layer */} {/* Header */}

李白 · 诗酒人生

HISTORICAL TRAJECTORY OF LI BAI (701-762)

{/* Control Panel */}

{!hasStarted ? ( ) : ( <> )}

{/* Info Card (Bottom Left) */}

{/* Timeline Indicator */}

{currentNode.year} 年

{/* Location Header */}

{currentNode.name} {currentNode.desc}

{/* Reading Progress Bar (Thin line) */}

{/* Poem Content */}

{currentNode.poem.split('，').map((line, i) => (

{line}{i < currentNode.poem.split('，').length - 1 ? '，' : ''}

))}

{currentNode.source}

{/* Start Screen Overlay (Initial State) */} {!hasStarted && (

大唐诗仙的足迹

通过数据可视化重现李白一生的漫游轨迹。
从巴蜀到长安，从长江到黄河，感受“绣口一吐，就半个盛唐”的壮丽篇章。

18 省份足迹

1000+ 传世诗作

61 传奇人生

)} {/* Footer Credits */}

); } ```