```javascript 'use client'; 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'; // ----------------------------------------------------------------------------- // 核心数据：北京-新疆自驾大环线关键节点坐标 (近似坐标) // ----------------------------------------------------------------------------- const WAYPOINTS = [ // 去程：北京 -> 晋 -> 陕 -> 宁 -> 甘 -> 新 { name: "北京", coords: [116.40, 39.90], region: "起点" }, { name: "大同", coords: [113.30, 40.12], region: "山西" }, { name: "宁武", coords: [112.30, 39.00], region: "山西" }, { name: "河曲", coords: [111.14, 39.38], region: "山西" }, { name: "神木", coords: [110.49, 38.84], region: "陕西" }, { name: "榆林", coords: [109.73, 38.28], region: "陕西" }, { name: "红石堡", coords: [107.00, 37.50], region: "宁夏" }, // 近似 { name: "武威", coords: [102.63, 37.93], region: "甘肃" }, { name: "张掖", coords: [100.45, 38.93], region: "甘肃" }, // 民乐/肃南附近 { name: "酒泉", coords: [98.49, 39.73], region: "甘肃" }, { name: "瓜州", coords: [95.78, 40.52], region: "甘肃" }, { name: "敦煌", coords: [94.66, 40.14], region: "甘肃" }, { name: "冷湖", coords: [93.33, 38.75], region: "青海" }, { name: "大柴旦", coords: [95.34, 37.85], region: "青海" }, { name: "格尔木", coords: [94.90, 36.40], region: "青海" }, { name: "茫崖", coords: [90.82, 38.35], region: "青海" }, // 新疆大环线 { name: "若羌", coords: [88.17, 39.02], region: "新疆" }, { name: "且末", coords: [85.53, 38.13], region: "新疆" }, { name: "民丰", coords: [82.68, 37.06], region: "新疆" }, { name: "和田", coords: [79.92, 37.11], region: "新疆" }, { name: "莎车", coords: [77.24, 38.41], region: "新疆" }, { name: "喀什", coords: [75.99, 39.47], region: "新疆" }, { name: "塔县", coords: [75.23, 37.77], region: "新疆" }, // 塔什库尔干 { name: "喀什", coords: [75.99, 39.47], region: "新疆" }, //以此折返 { name: "阿图什", coords: [76.17, 39.71], region: "新疆" }, { name: "库车", coords: [82.96, 41.72], region: "新疆" }, { name: "库尔勒", coords: [86.15, 41.76], region: "新疆" }, { name: "托克逊", coords: [88.65, 42.79], region: "新疆" }, { name: "乌鲁木齐", coords: [87.62, 43.82], region: "新疆" }, { name: "吉木乃", coords: [85.87, 47.43], region: "新疆" }, { name: "布尔津", coords: [86.87, 47.70], region: "新疆" }, { name: "阿勒泰", coords: [88.14, 47.84], region: "新疆" }, { name: "塔城", coords: [82.98, 46.74], region: "新疆" }, { name: "阿拉山口", coords: [82.56, 45.17], region: "新疆" }, { name: "博乐", coords: [82.07, 44.90], region: "新疆" }, { name: "伊宁", coords: [81.32, 43.91], region: "新疆" }, { name: "昭苏", coords: [81.13, 43.15], region: "新疆" }, { name: "特克斯", coords: [81.84, 43.21], region: "新疆" }, { name: "霍尔果斯", coords: [80.41, 44.21], region: "新疆" }, { name: "石河子", coords: [86.03, 44.30], region: "新疆" }, { name: "吐鲁番", coords: [89.18, 42.95], region: "新疆" }, { name: "哈密", coords: [93.51, 42.82], region: "新疆" }, { name: "伊吾", coords: [94.69, 43.25], region: "新疆" }, // 返程：甘 -> 宁 -> 陕 -> 晋 -> 京 { name: "额济纳", coords: [101.07, 41.96], region: "内蒙" }, { name: "酒泉", coords: [98.49, 39.73], region: "甘肃" }, { name: "武威", coords: [102.63, 37.93], region: "甘肃" }, { name: "固原", coords: [106.24, 36.00], region: "宁夏" }, { name: "平凉", coords: [106.67, 35.54], region: "甘肃" }, { name: "铜川", coords: [109.08, 35.08], region: "陕西" }, { name: "侯马", coords: [111.37, 35.61], region: "山西" }, { name: "介休", coords: [111.91, 37.02], region: "山西" }, { name: "忻州", coords: [112.73, 38.40], region: "山西" }, { name: "北京", coords: [116.40, 39.90], region: "终点" }, ]; // 动画总时长 const ANIMATION_DURATION = 45000; // 45秒完整旅程 const WIDTH = 1200; const HEIGHT = 700; export const XinjiangRoadTripMap = () => { const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); const [isPlaying, setIsPlaying] = useState(false); // 动画状态 (不直接用于渲染循环，仅用于UI显示) const [uiState, setUiState] = useState({ currentCity: null, progressPercent: 0, totalDistance: 0 }); // Refs 用于动画循环中的高性能读写 const progressRef = useRef(0); const startTimeRef = useRef(null); const requestRef = useRef(null); const pathLengthRef = useRef(0); // ViewBox 动画 Ref const viewBoxRef = useRef({ x: 0, y: 0, k: 1 }); // k is zoom level (smaller is zoomed out) // 1. 加载地图数据 useEffect(() => { // 使用一个简化版的中国地图GeoJSON (Gist托管) fetch("https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json") .then(res => res.json()) .then(data => { setGeoData(data); setLoading(false); }) .catch(err => { console.error("Map load failed", err); setLoading(false); }); }, []); // 2. D3 投影与路径生成 const { projection, pathGenerator, projectedPoints, pathSvgString, totalLength } = useMemo(() => { if (!geoData) return {}; // 初始化投影，聚焦中国 const proj = d3.geoMercator().center([104, 38]).scale(850).translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); // 转换所有航点 const pts = WAYPOINTS.map((p, i) => { const [x, y] = proj(p.coords); return { ...p, x, y, id: i }; }); // 生成平滑曲线路径 const lineGen = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); // CatmullRom 曲线更平滑 const dString = lineGen(pts); // 计算路径长度 (用于 stroke-dasharray) let len = 0; if (typeof document !== 'undefined') { const el = document.createElementNS("http://www.w3.org/2000/svg", "path"); el.setAttribute("d", dString); len = el.getTotalLength(); } return { projection: proj, pathGenerator: pathGen, projectedPoints: pts, pathSvgString: dString, totalLength: len }; }, [geoData]); // 更新 Ref 中的长度 useEffect(() => { if (totalLength) pathLengthRef.current = totalLength; }, [totalLength]); // 3. 核心动画循环 const animate = useCallback((time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // 循环播放逻辑 let p = elapsed / ANIMATION_DURATION; if (p > 1) { // 结束后重置或停止，这里选择停止 p = 1; setIsPlaying(false); } else { requestRef.current = requestAnimationFrame(animate); } progressRef.current = p; // --- 计算当前位置 & 镜头逻辑 --- if (projectedPoints && pathSvgString) { // 1. 获取当前点坐标 (Head Position) // 由于在 React 渲染周期外很难直接操作 DOM getPointAtLength，我们使用插值估算 // 为了性能，我们根据 progress 映射到 points 数组索引 const totalPts = projectedPoints.length; const floatIndex = p * (totalPts - 1); const idx = Math.floor(floatIndex); const nextIdx = Math.min(idx + 1, totalPts - 1); const subProgress = floatIndex - idx; const p1 = projectedPoints[idx]; const p2 = projectedPoints[nextIdx]; // 简单的线性插值获取头部坐标 const curX = p1.x + (p2.x - p1.x) * subProgress; const curY = p1.y + (p2.y - p1.y) * subProgress; // 2. 镜头跟随算法 (Pan & Zoom) // 目标：始终将 curX, curY 放在屏幕中心附近 // 缩放：在新疆区域 (中间段) 缩小 (zoom out) 以看全貌；在起点终点放大 (zoom in) // 假设新疆段大约在 index 15 到 45 之间 const isXinjiang = (idx > 15 && idx < 45); const targetZoom = isXinjiang ? 1.2 : 2.5; // 1.2 = 远景, 2.5 = 近景 // 平滑过渡 (Lerp) const ease = 0.05; viewBoxRef.current.k += (targetZoom - viewBoxRef.current.k) * ease; // 计算 ViewBox 的 x, y (基于中心点) // ViewBox width = WIDTH / k // ViewBox x = center.x - (ViewBox width / 2) const vw = WIDTH / viewBoxRef.current.k; const vh = HEIGHT / viewBoxRef.current.k; const targetVx = curX - vw / 2; const targetVy = curY - vh / 2; viewBoxRef.current.x += (targetVx - viewBoxRef.current.x) * ease; viewBoxRef.current.y += (targetVy - viewBoxRef.current.y) * ease; // 3. 更新 UI 状态 (限流，避免每帧重绘整个组件) // 只有当城市改变时才更新，或者每隔 100ms // 这里为了流畅度，我们只在城市变化时 setState // 我们利用 idx 来判断最近的城市 if (uiState.currentCity !== p1.name || Math.abs(uiState.progressPercent - p) > 0.01) { setUiState(prev => { if (prev.currentCity === p1.name && Math.abs(prev.progressPercent - p) < 0.005) return prev; return { currentCity: p1, progressPercent: p, totalDistance: Math.floor(p * 12000) // 假设全程12000公里 }; }); } // 4. 直接操作 DOM 更新 ViewBox 和进度条 (避免 React Render 带来的开销) const svgEl = document.getElementById('map-svg-root'); if (svgEl) { svgEl.setAttribute('viewBox', `${viewBoxRef.current.x} ${viewBoxRef.current.y} ${WIDTH / viewBoxRef.current.k} ${HEIGHT / viewBoxRef.current.k}`); } const pathEl = document.getElementById('animated-path'); if (pathEl && totalLength > 0) { pathEl.style.strokeDashoffset = totalLength * (1 - p); } const headEl = document.getElementById('head-marker'); if (headEl) { headEl.setAttribute('transform', `translate(${curX}, ${curY})`); } } }, [projectedPoints, pathSvgString, totalLength, uiState]); // 控制逻辑 const handleStart = () => { if (!isPlaying) { setIsPlaying(true); if (progressRef.current >= 1) { progressRef.current = 0; startTimeRef.current = performance.now(); // 重置 ViewBox const startPt = projectedPoints[0]; viewBoxRef.current = { x: startPt.x - (WIDTH/2.5)/2, y: startPt.y - (HEIGHT/2.5)/2, k: 2.5 }; } else { // Resume startTimeRef.current = performance.now() - (progressRef.current * ANIMATION_DURATION); } requestRef.current = requestAnimationFrame(animate); } }; const handlePause = () => { setIsPlaying(false); cancelAnimationFrame(requestRef.current); startTimeRef.current = null; }; // 清理 useEffect(() => { return () => cancelAnimationFrame(requestRef.current); }, []); // 4. 渲染 if (loading) { return (

正在加载地理数据...

); } return (

{/* 背景纹理 */}

{/* 顶部标题栏 */}

西行漫记 /// ROAD TRIP

BEIJING TO XINJIANG GRAND LOOP

{/* 右下角控制面板 */}

{/* 数据仪表盘 */}

行驶里程

{uiState.totalDistance.toLocaleString()} KM

当前位置

{uiState.currentCity ? uiState.currentCity.name : '准备出发'}

区域

{uiState.currentCity ? uiState.currentCity.region : '--'}

{/* 播放按钮 */}

{/* SVG 画布 */} {/* 装饰性网格线 */}

); }; ```