'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 // ----------------------------------------------------------------------------- const VOYAGE_PATH = [ { name: "刘家港", year: 1405, type: "departure", desc: "明永乐三年，郑和率领二万七千余人、宝船六十余艘，从苏州太仓刘家港启程，开启了人类历史上伟大的远航。", coords: [121.27, 31.45] }, { name: "长乐", year: 1405, type: "stop", desc: "船队驻泊福建长乐太平港，伺风开洋。在此勒石以此铭记，祈求妈祖保佑，随后穿越台湾海峡南下。", coords: [119.52, 25.96] }, { name: "占城", year: 1405, type: "diplomacy", desc: "抵达占城（今越南归仁），国王骑象欢迎。郑和宣读诏书，赏赐丝绸瓷器，建立友好邦交。", coords: [109.22, 13.77] }, { name: "爪哇", year: 1406, type: "trade", desc: "抵达爪哇（今印尼），正值当地东王与西王内战。船队在此进行贸易，展示大明国威，调解争端。", coords: [112.75, -7.25] }, { name: "旧港", year: 1407, type: "battle", desc: "在旧港（今巨港）遭遇海盗陈祖义诈降袭击。郑和指挥若定，大败海盗，生擒陈祖义，肃清海道。", coords: [104.75, -2.99] }, { name: "满刺加", year: 1407, type: "foundation", desc: "抵达满刺加（马六甲）。在此建立官厂，构筑城墙栅栏，作为往来船队储存物资、中转休整的战略基地。", coords: [102.25, 2.19] }, { name: "苏门答腊", year: 1407, type: "wait", desc: "由于季风未至，船队在苏门答腊（今亚齐附近）停留休整，与当地首领互赠礼物，等待信风。", coords: [97.14, 5.18] }, { name: "锡兰山", year: 1407, type: "culture", desc: "抵达锡兰山（今斯里兰卡）。郑和向当地佛寺布施金银织金宝幡，立《布施锡兰山佛寺碑》，尊重当地宗教。", coords: [80.21, 6.05] }, { name: "古里", year: 1407, type: "destination", desc: "终抵古里（今印度卡利卡特），此为西洋大国。郑和在此宣诏立碑：“去中国十万余里...刻石于兹，永示万世”。", coords: [75.78, 11.25] }, { name: "返航", year: 1407, type: "return", desc: "完成外交使命后，郑和率领庞大的宝船舰队满载异域珍宝与各国使节，浩浩荡荡踏上归途。", coords: [85.00, 10.00], speedMod: 0.5 } ]; // Configuration const BASE_SPEED = 120; // Pixels per second const HOLD_DURATION = 3200; const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#0f172a"; // Deep Ocean Blue const WORLD_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/world_110m.json"; // Note: Using a reliable low-res world map or similar for the region. // If specific URL fails, fallback shapes will be rendered. // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const ZhengHeVoyageMap = () => { // 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', currentLen: 0, targetLen: 0, nodeIndex: 0, holdStartTime: 0, totalPathLength: 0, nodeLengths: [], speedModifiers: [] }); const pathRef = useRef(null); // --------------------------------------------------------------------------- // Data Loading // --------------------------------------------------------------------------- useEffect(() => { let isMounted = true; // Using a simplified world map hosted on GitHub Gist or similar reliable source // Fallback to fetching a standard world topojson/geojson if needed fetch("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson") .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 Southeast Asia / Indian Ocean const proj = d3.geoMercator() .center([100, 15]) .scale(850) .translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); const projectedPoints = VOYAGE_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); 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 = 3000; 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 searching 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 passed the closest point 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 // --------------------------------------------------------------------------- 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); } }, []); // Control handlers const togglePlay = () => { if (isFinished) { 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)); // Calculate rotation angle for ship icon const pPrev = pathRef.current.getPointAtLength(Math.max(0, currentLength - 2)); const angle = Math.atan2(p.y - pPrev.y, p.x - pPrev.x) * 180 / Math.PI; return { x: p.x, y: p.y, angle }; }, [currentLength, projectedPath]); // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- if (loading) { return (

海图绘制中...

); } return (

{/* Nautical Grid Background */}

{/* Vignette */}

{/* Title Area */}

郑和下西洋

The Treasure Fleet (1405-1407)

{/* Map SVG */} {/* Info Card */} {activeNodeIndex >= 0 && VOYAGE_PATH[activeNodeIndex] && ( {/* Header */}

{VOYAGE_PATH[activeNodeIndex].year} {getEventTypeLabel(VOYAGE_PATH[activeNodeIndex].type)}

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

{/* Content */}

{VOYAGE_PATH[activeNodeIndex].name}

{VOYAGE_PATH[activeNodeIndex].desc}

{/* Progress Indicator */}

)} {/* Decorative Compass */}

{/* Controls */}

); }; // ----------------------------------------------------------------------------- // Helpers // ----------------------------------------------------------------------------- function getEventTypeLabel(type) { const map = { 'departure': '奉旨出使', 'stop': '勒石祈福', 'diplomacy': '宣读诏书', 'trade': '互市贸易', 'battle': '剿灭海盗', 'foundation': '建立官厂', 'wait': '等候季风', 'culture': '布施礼佛', 'destination': '立碑纪念', 'return': '凯旋回朝' }; return map[type] || '航海纪事'; } function getEventIcon(type, size=24) { switch(type) { case 'departure': return ; case 'destination': return ; case 'battle': return ; case 'diplomacy': case 'culture': return ; case 'trade': return ; case 'foundation': return ; case 'wait': return ; default: return ; } }