```javascript 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'; // ----------------------------------------------------------------------------- // Component: HexiCorridorViz // ----------------------------------------------------------------------------- export const HexiCorridorViz = () => { // 1. Constants & Configuration const WIDTH = 1200; const HEIGHT = 700; const ANIMATION_DURATION = 18000; // Total animation time in ms const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // Waypoints Data (Historical Path) // Coordinates are approximate based on historical geography of Hexi Corridor const WAYPOINTS = useMemo(() => [ { id: 'p1', coords: [103.86, 35.38], // Longxi (Lintao) ancient: '陇西郡', modern: '甘肃临洮', desc: '霍去病率军从陇西郡出发，开启河西之战序幕。', year: '公元前121年春' }, { id: 'p2', coords: [104.17, 36.54], // Wuli Mountain (Baiyin area) ancient: '乌戾山', modern: '甘肃白银', desc: '越乌戾山，汉军轻骑突进，出其不意。', year: '公元前121年春' }, { id: 'p3', coords: [102.89, 37.46], // Supu Tribe (Gulang) ancient: '遫濮部', modern: '甘肃古浪', desc: '讨伐遫濮部，斩遫濮王，汉军锋芒毕露。', year: '公元前121年春' }, { id: 'p4', coords: [102.63, 37.92], // Hunu Water (Wuwei) ancient: '狐奴水', modern: '甘肃武威', desc: '渡过狐奴水，六天转战千余里，踏破匈奴五王国。', year: '公元前121年春' }, { id: 'p5', coords: [101.09, 38.78], // Yanzhi Mountain (Shandan) ancient: '焉支山', modern: '甘肃山丹', desc: '汉军长途奔袭越过焉支山，直插匈奴腹地。', year: '公元前121年春' }, { id: 'p6', coords: [100.45, 38.93], // Gaolan Mountain (Zhangye) ancient: '皋兰山', modern: '甘肃张掖', desc: '在皋兰山与匈奴主力展开决战，大破河西诸部，缴获休屠部祭天金人。', year: '公元前121年春' } ], []); // 2. State const [geoData, setGeoData] = useState(null); const [activeStage, setActiveStage] = useState(0); // Index of current waypoint const [isFinished, setIsFinished] = useState(false); const [loading, setLoading] = useState(true); // Refs for Animation (avoiding re-renders for 60fps movement) const pathRef = useRef(null); // The SVG element const markerRef = useRef(null); // The moving head/soldier element const trailRef = useRef(null); // The drawing trail path const reqRef = useRef(null); // RAF ID const startTimeRef = useRef(null); // 3. 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("Map Load Error:", err)); return () => { isMounted = false; }; }, []); // 4. D3 Projection & Path Logic const { pathGenerator, projection, projectedWaypoints, pathString } = useMemo(() => { if (!geoData) return { pathGenerator: null, projection: null, projectedWaypoints: [], pathString: "" }; // Center projection on Gansu/Hexi Corridor area to maximize detail // Center roughly around [102, 37] const proj = d3.geoMercator() .center([103, 37.5]) .scale(6000) // High scale to zoom in .translate([WIDTH / 2, HEIGHT / 2]); const pg = d3.geoPath().projection(proj); const pWaypoints = WAYPOINTS.map(wp => { const [x, y] = proj(wp.coords); return { ...wp, x, y }; }); // Generate Path String "M x y L x y ..." const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); // Smooth curve const pStr = lineGenerator(pWaypoints); return { pathGenerator: pg, projection: proj, projectedWaypoints: pWaypoints, pathString: pStr }; }, [geoData, WAYPOINTS]); // 5. Animation Loop const animate = useCallback((timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; let progress = elapsed / ANIMATION_DURATION; if (progress > 1) progress = 1; // Direct DOM manipulation for performance if (pathRef.current && markerRef.current && trailRef.current) { const totalLen = pathRef.current.getTotalLength(); const currentLen = totalLen * progress; const point = pathRef.current.getPointAtLength(currentLen); // Update Marker Position markerRef.current.setAttribute("transform", `translate(${point.x}, ${point.y})`); // Update Trail (Stroke Dashoffset) // We set dasharray to totalLen, and offset to totalLen - currentLen trailRef.current.style.strokeDasharray = totalLen; trailRef.current.style.strokeDashoffset = totalLen - currentLen; // Determine active stage based on proximity to waypoints // We map progress (0-1) to waypoints indices // Simple logic: Divide path into segments. // Better logic: Check distance coverage. // Find which segment we are in // Total length is roughly constant speed. // We can check which waypoint is the last one passed. // Since we need to trigger React state for text, we do it sparingly. // Calculate distances of waypoints along the path // This is expensive to do every frame, so we approximate by index since points are roughly equidistant in time for this demo // Or better: Pre-calculate lengths. // For this implementation, we use simple time-based staging for smoothness const stageCount = WAYPOINTS.length; // We want the text to stay for a bit. // Let's say stage changes every (1/stageCount) * progress, but let's align it with actual position. // Find the closest waypoint index that we have passed let currentStageIndex = 0; // We can use the 'progress' to roughly estimate. // 0 -> 0, 1 -> 5. // Let's refine: const segmentLen = totalLen / (stageCount - 1); const estimatedIndex = Math.floor(currentLen / segmentLen); // Clamp const safeIndex = Math.min(Math.max(estimatedIndex, 0), stageCount - 1); // Only setState if changed setActiveStage(prev => { if (prev !== safeIndex) return safeIndex; return prev; }); } if (progress < 1) { reqRef.current = requestAnimationFrame(animate); } else { setIsFinished(true); } }, [WAYPOINTS.length]); useEffect(() => { if (!loading && pathRef.current) { reqRef.current = requestAnimationFrame(animate); } return () => { if (reqRef.current) cancelAnimationFrame(reqRef.current); }; }, [loading, animate]); // 6. Render if (loading) { return (

); } const currentInfo = WAYPOINTS[activeStage]; return (

{/* --- Map Layer --- */} {/* --- UI Layer --- */} {/* 1. Year (Top Left) */}

Chronicle

{currentInfo.year}

{/* 2. Title (Top Right) */}

汉匈第一次河西之战

THE FIRST BATTLE OF HEXI CORRIDOR

{/* 3. Info Box (Bottom Left) */}

{/* Header: Ancient & Modern Names */}

{currentInfo.ancient}

今: {currentInfo.modern}

{/* Description Body */}

{currentInfo.desc}

{/* Progress Indicator */}

{WAYPOINTS.map((_, i) => (

))}

{/* Grid Overlay for Tech Feel */}

{/* Compass / Decorative element Bottom Right */}

); }; ```