🗺️ Travel Journey Visualizer

一个基于 React 的旅行轨迹可视化 Web 应用，在地图上通过动画展示用户的旅行路线。

✨ 核心功能

1. 多段旅程展示

• 巴黎 → 米兰（火车）- 宏观跨国旅程
• 米兰市内（步行）- 微观城市内旅程
• 米兰 → 奥斯陆（飞机）- 宏观跨国旅程

2. 智能地图动画

• ✅ 真实路径跟随：火车和步行沿着真实地理路径移动
• ✅ 头像动画：用户头像沿路径平滑移动
• ✅ 视野跟随：地图自动跟随头像位置
• ✅ 智能缩放：根据旅程类型自动调整缩放级别
  • 跨城市旅程：小缩放级别（zoom 5-6）
  • 城市内旅程：大缩放级别（zoom 14）

3. 交互控制面板

• 选择不同旅程段
• 播放/暂停动画
• 重置到起点
• 实时显示当前旅程信息

🛠️ 技术栈

• 前端框架: React 18 + Vite
• 地图库: Leaflet + React-Leaflet
• 样式: Tailwind CSS
• 地图数据: OpenStreetMap

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173/

构建生产版本

npm run build

📁 项目结构

travel_log/
├── src/
│   ├── components/
│   │   ├── MapComponent.jsx      # 核心地图组件（路径动画）
│   │   └── ControlPanel.jsx      # 控制面板 UI
│   ├── data/
│   │   └── JourneyData.js        # Mock 旅程数据
│   ├── App.jsx                   # 主应用组件
│   ├── main.jsx                  # 入口文件
│   └── index.css                 # 全局样式
├── index.html
├── vite.config.js
├── tailwind.config.js
└── package.json

🎯 核心实现要点

1. 路径动画算法

使用 requestAnimationFrame 实现平滑的路径跟随动画：

• 根据时间进度计算当前位置
• 在两个坐标点之间线性插值
• 平滑过渡，避免跳跃

2. 地图视野控制

使用 React-Leaflet 的 useMap Hook 控制地图视野：

• 实时跟随头像位置
• 根据旅程类型自动调整缩放级别
• 平滑的视野过渡动画

3. 数据结构设计

每个旅程段包含：

• path: 坐标点数组 [[lat, lng], ...]
• type: 交通方式（train/walk/flight）
• zoomLevel: 目标缩放级别
• duration: 动画持续时间

🎨 自定义和扩展

添加新旅程段

编辑 src/data/JourneyData.js：

{
  id: 4,
  name: "新旅程",
  type: "train", // train, walk, flight
  startLocation: "起点",
  endLocation: "终点",
  path: [[lat1, lng1], [lat2, lng2], ...],
  duration: 15000, // 毫秒
  zoomLevel: 6,
}

更改地图样式

修改 src/components/MapComponent.jsx 中的 TileLayer URL

调整动画速度

在 src/data/JourneyData.js 中修改 duration 值（单位：毫秒）

📝 后续优化建议

1. 集成真实路由 API - 使用 OSRM API 获取真实道路路径
2. 添加用户输入功能 - 允许用户添加自定义旅程
3. 增强动画效果 - 添加速度变化、时间轴控制
4. 数据持久化 - 接入后端 API 和用户账户系统

📄 License

MIT