```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'; // ----------------------------------------------------------------------------- // Data: Wu Song's Journey (Water Margin) // ----------------------------------------------------------------------------- const WU_SONG_PATH = [ { name: "清河县", year: "缘起", type: "home", desc: "武松家乡。因醉酒打架误以为打死人，逃亡在外，后得知误会消除，患思乡病，踏上归途。", coords: [115.65, 37.05] }, { name: "柴进庄", year: "结义", type: "meet", desc: "避难横海郡柴进府上，虽受冷落但偶遇宋江，二人意气相投，结为兄弟，从此开启江湖路。", coords: [116.30, 37.80] }, { name: "景阳冈", year: "成名", type: "tiger", desc: "“三碗不过冈”。武松连喝十八碗酒，赤手空拳在景阳冈打死吊睛白额大虫，威震天下，获任阳谷县都头。", coords: [115.92, 36.12] }, { name: "阳谷县", year: "复仇", type: "revenge", desc: "寻兄武大郎，遭遇潘金莲与西门庆通奸杀兄。武松怒杀奸夫淫妇，血溅狮子楼，随后自首投案。", coords: [115.78, 36.10] }, { name: "孟州道", year: "惊魂", type: "danger", desc: "刺配孟州。途经十字坡，识破母夜叉孙二娘的人肉包子黑店，不打不相识，与张青夫妇结交。", coords: [113.80, 35.00] }, { name: "快活林", year: "醉打", type: "fight", desc: "为报施恩免杀威棒之恩，醉打蒋门神，夺回快活林。施展“玉环步，鸳鸯脚”，名震孟州。", coords: [112.60, 34.78] }, { name: "鸳鸯楼", year: "血溅", type: "kill", desc: "遭张都监陷害，大闹飞云浦后杀回孟州。血溅鸳鸯楼，杀张都监满门，留书“杀人者打虎武松也”。", coords: [112.58, 34.80] }, { name: "蜈蚣岭", year: "试刀", type: "monk", desc: "张青夫妇助其化妆成行者。夜走蜈蚣岭，试戒刀斩杀恶道飞天蜈蚣，从此以行者面目行走江湖。", coords: [113.20, 35.50] }, { name: "二龙山", year: "落草", type: "join", desc: "投奔二龙山，与花和尚鲁智深、青面兽杨志聚义。三山聚义打青州后，同归梁山。", coords: [118.48, 36.68] }, { name: "梁山泊", year: "聚义", type: "star", desc: "梁山大聚义，坐第十四把交椅，天伤星行者武松。任步军头领，南征北战。", coords: [116.05, 35.75] }, { name: "杭州", year: "断臂", type: "tragedy", desc: "征讨方腊，攻打杭州。在战斗中被包道乙暗算失去左臂，后单臂擒方腊。战后不愿回京，于六和塔出家。", coords: [120.15, 30.28], speedMod: 0.5 // Long journey, speed up slightly relative to distance, but slow for impact }, { name: "六和塔", year: "圆寂", type: "end", desc: "听潮而悟，看破红尘。照顾瘫痪的林冲，八十善终，封清忠祖师。一代豪杰，终归寂静。", coords: [120.13, 30.20] } ]; // ----------------------------------------------------------------------------- // Configuration // ----------------------------------------------------------------------------- const CONFIG = { WIDTH: 1200, HEIGHT: 700, BG_COLOR: "#1a1a1d", // Dark ink/charcoal style ACCENT_COLOR: "#f97316", // Tiger Orange BLOOD_COLOR: "#dc2626", // Deep Red TEXT_COLOR: "#e5e5e5", BASE_SPEED: 120, // Pixels per second HOLD_DURATION: 3200, // Time to read card GEOJSON_URL: "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json" }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const WuSongJourneyMap = () => { // 1. Data & Loading State const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); // 2. Visual State const [activeNodeIndex, setActiveNodeIndex] = useState(-1); const [currentLength, setCurrentLength] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // 3. Animation Engine Refs 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: [], // Cumulative length at each node speedModifiers: [] }); const pathRef = useRef(null); // --------------------------------------------------------------------------- // Load Map Data // --------------------------------------------------------------------------- useEffect(() => { let isMounted = true; fetch(CONFIG.GEOJSON_URL) .then(res => res.json()) .then(data => { if (isMounted) { setGeoData(data); setLoading(false); } }) .catch(err => { console.error("Map load error", err); if (isMounted) setLoading(false); }); return () => { isMounted = false; }; }, []); // --------------------------------------------------------------------------- // D3 Projection Logic // --------------------------------------------------------------------------- const { pathGenerator, projectedPath, pathSvgString } = useMemo(() => { if (!geoData) return {}; // Focus on East/Central China (Shandong, Henan, Zhejiang) // Center roughly between Qinghe/Liangshan and Hangzhou const proj = d3.geoMercator() .center([116.5, 34.5]) .scale(2800) .translate([CONFIG.WIDTH / 2, CONFIG.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 }; }); // CatmullRom for smooth trajectory 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 & Initialization // --------------------------------------------------------------------------- useLayoutEffect(() => { if (pathRef.current && projectedPath && projectedPath.length > 0) { const pathEl = pathRef.current; const totalLen = pathEl.getTotalLength(); // Calculate precise length for each node on the curve const lengths = []; const precision = 4000; // High precision sampling 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; } // Find closest point on path to the node coordinate // (Optimization: search forward from previous node's position) let minDist = Infinity; let bestLen = 0; 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; } // Break if we passed the closest point and are moving away significantly if (minDist < 5 && dist > 20) 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 (RAF) // --------------------------------------------------------------------------- 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 = CONFIG.BASE_SPEED * speedMod; const dist = (currentSpeed * deltaTime) / 1000; state.currentLen += dist; // Check if reached target if (state.currentLen >= state.targetLen) { state.currentLen = state.targetLen; state.phase = 'holding'; state.holdStartTime = time; setActiveNodeIndex(state.nodeIndex); setCurrentLength(state.currentLen); } else { // Optimization: throttling setState if needed, but here we need smooth 60fps setCurrentLength(state.currentLen); } } else if (state.phase === 'holding') { if (!state.holdStartTime) state.holdStartTime = time; if (time - state.holdStartTime > CONFIG.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) { // 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); } } }; // Cleanup useEffect(() => { return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --------------------------------------------------------------------------- // Render Helpers // --------------------------------------------------------------------------- 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]); if (loading) { return (

); } return (

{/* Global Styles & Keyframes */} {/* Background Texture */}

{/* Ink/Blood overlay effect */}

{/* Header */}

行者武松

The Pilgrim's Path

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

{/* Header Row */}

{WU_SONG_PATH[activeNodeIndex].year}

{WU_SONG_PATH[activeNodeIndex].name}

{getEventIcon(WU_SONG_PATH[activeNodeIndex].type)}

{/* Description */}

{WU_SONG_PATH[activeNodeIndex].desc}

{/* Timer Bar */}

)} {/* Play/Pause Control */}

{isFinished ? "旅途终了" : (isPlaying ? "行进中..." : "暂停")}

); }; // ----------------------------------------------------------------------------- // Helpers & Utilities // ----------------------------------------------------------------------------- function getEventTypeColor(type) { const map = { 'tiger': '#f97316', // Orange 'kill': '#dc2626', // Red 'revenge': '#dc2626', 'fight': '#ef4444', 'tragedy': '#7f1d1d', // Dark Red 'join': '#16a34a', // Green 'star': '#eab308', // Gold 'monk': '#8b5cf6', // Purple 'end': '#71717a', // Gray 'home': '#3b82f6', // Blue 'meet': '#3b82f6' }; return map[type] || '#fff'; } function getEventIcon(type) { const color = getEventTypeColor(type); const size = 24; switch(type) { case 'tiger': return ; case 'kill': case 'revenge': case 'fight': return ; case 'tragedy': case 'danger': return ; case 'join': case 'meet': return ; case 'star': return ; case 'monk': return ; case 'end': return ; case 'home': return ; default: return ; } } ```