```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: Wu Song's Journey (Water Margin) // ----------------------------------------------------------------------------- const WU_SONG_PATH = [ { name: "清河县", year: "起点", type: "origin", desc: "武松家乡。因醉酒争执误以为打死人，避祸逃离，后得知误会消除，踏上归途。", coords: [115.66, 37.06] }, { name: "柴进庄", year: "初识", type: "meeting", desc: "避难沧州柴进庄上，虽受冷落，却因祸得福，结识了落难的“及时雨”宋江，结为兄弟。", coords: [116.86, 38.30] }, { name: "景阳冈", year: "扬名", type: "tiger", desc: "“三碗不过岗”，醉酒过景阳冈。赤手空拳打死吊睛白额大虫，威震天下，被阳谷县聘为都头。", coords: [115.93, 36.11], speedMod: 0.6 }, { name: "阳谷县", year: "复仇", type: "revenge", desc: "寻兄武大郎，却见兄长被害。怒杀潘金莲与西门庆，提头祭奠。事后自首，刺配孟州。", coords: [115.78, 36.11] }, { name: "十字坡", year: "遇险", type: "clash", desc: "押解途中过十字坡，识破孙二娘蒙汗药计谋，不打不相识，与其夫张青结拜。", coords: [113.50, 34.80] }, { name: "孟州", year: "恩怨", type: "brawl", desc: "得施恩照顾，醉打蒋门神，夺回快活林。后遭张都监陷害，再度入狱被刺配恩州。", coords: [112.94, 34.90] }, { name: "飞云浦", year: "绝境", type: "ambush", desc: "押解途中遭遇杀手伏击，武松绝境反击，杀差拨与杀手，折返孟州复仇。", coords: [113.10, 34.95], speedMod: 0.8 }, { name: "鸳鸯楼", year: "血溅", type: "massacre", desc: "夜入鸳鸯楼，手刃张都监、蒋门神等十余人。墙上留书“杀人者打虎武松也”，从此亡命天涯。", coords: [112.94, 34.92] }, { name: "蜈蚣岭", year: "化缘", type: "transform", desc: "在张青处改装头陀，号“行者”。过蜈蚣岭试刀，斩杀恶道飞天蜈蚣。", coords: [114.20, 35.50] }, { name: "二龙山", year: "落草", type: "bandit", desc: "投奔二龙山，与鲁智深、杨志聚义，成为威震一方的义军首领。", coords: [118.60, 36.60] }, { name: "梁山泊", year: "聚义", type: "union", desc: "三山聚义打青州后，同归梁山泊。坐第十四把交椅，任步军头领，南征北战。", coords: [116.08, 35.78] }, { name: "杭州", year: "断臂", type: "war", desc: "征方腊之战，攻打杭州。激战中痛失左臂，最终擒获方腊（演义版）。战后看破红尘，不愿回京。", coords: [120.15, 30.28], speedMod: 0.5 }, { name: "六和塔", year: "归宿", type: "end", desc: "封清忠祖师，在杭州六和塔出家为僧，颐养天年，八十善终。", coords: [120.13, 30.20] } ]; // Configuration const BASE_SPEED = 120; // Pixels per second const HOLD_DURATION = 3200; // Time to read card const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#1a1a1d"; const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const WuSongJourneyMap = () => { // 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 Animation State 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: [], speedModifiers: [] }); 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("Failed to load map", err); if (isMounted) setLoading(false); }); return () => { isMounted = false; }; }, []); // --------------------------------------------------------------------------- // D3 Projection & Path Generation // --------------------------------------------------------------------------- const { pathGenerator, projectedPath, pathSvgString } = useMemo(() => { if (!geoData) return {}; // Focus on East/Central China (Hebei, Shandong, Henan, Zhejiang) const proj = d3.geoMercator() .center([116.5, 34.5]) // Centered roughly between Hebei and Zhejiang .scale(2800) .translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); const projectedPoints = WU_SONG_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)); // Smooth curve 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(); const lengths = []; const precision = 4000; // Sample the path to find the length corresponding to each node const pathPoints = []; 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; } let minDist = Infinity; let bestLen = 0; // Optimization: Start search from previous node's position 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; } // Early exit if we moved away significantly after finding a close point if (minDist < 5 && dist > 30) break; } lengths.push(bestLen); }); stateRef.current.totalPathLength = totalLen; stateRef.current.nodeLengths = lengths; stateRef.current.speedModifiers = projectedPath.map(p => p.speedMod || 1.0); // Auto Start Logic 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') { const speedMod = state.speedModifiers[state.nodeIndex] || 1.0; const currentSpeed = BASE_SPEED * speedMod; 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); } }, []); const togglePlay = () => { if (isFinished) { // Restart 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); }; }, []); // --------------------------------------------------------------------------- // Derived Render Data // --------------------------------------------------------------------------- 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 (

{/* Background Texture (Traditional Pattern) */}

{/* Vignette */}

{/* Title Area */}

行者武松

水浒传个人轨迹

"平生不修善果，只爱杀人放火。忽地顿开金绳，这里扯断玉锁。"

{/* Info Card */} {activeNodeIndex >= 0 && WU_SONG_PATH[activeNodeIndex] && ( {/* Header */}

{WU_SONG_PATH[activeNodeIndex].year}

{getEventIcon(WU_SONG_PATH[activeNodeIndex].type, 28)}

{/* Content */}

{WU_SONG_PATH[activeNodeIndex].name}

{WU_SONG_PATH[activeNodeIndex].desc}

{/* Progress Indicator */}

)} {/* Controls */}

{isPlaying ? "PLAYING" : (isFinished ? "FINISHED" : "PAUSED")}

); }; // ----------------------------------------------------------------------------- // Helpers // ----------------------------------------------------------------------------- function getEventIcon(type, size=24) { switch(type) { case 'origin': return ; case 'meeting': return ; case 'tiger': return ; case 'revenge': return ; case 'clash': case 'brawl': return ; case 'ambush': return ; case 'massacre': return ; case 'transform': return ; case 'bandit': return ; case 'union': return ; case 'war': return ; case 'end': return ; // Lotus/Peace default: return ; } } ```