# SilkRoad

**Repository Path**: lovelwb/silk-road

## Basic Information

- **Project Name**: SilkRoad
- **Description**: Information display of the Silk Road and ethnic integration in the Tang Dynasty
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-14
- **Last Updated**: 2025-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 丝路文化长河 - 唐代丝绸之路互动地图

## 项目简介

这是一个基于React + TypeScript + Leaflet.js的交互式地图项目，展示唐代丝绸之路（中国段）的历史文化。项目采用现代Web技术重现古代丝路的辉煌，融合传统文化元素与现代交互设计。

## ✨ 主要特色

- 🗺️ **交互式地图**: 基于Leaflet.js的高性能地图展示
- 🎨 **唐代风格**: 仿古色彩搭配，盛唐金红主题
- 🏛️ **历史文化**: 8个重要城市的详细历史介绍
- 🐪 **动画效果**: GSAP驱动的商队行进动画
- 📱 **响应式设计**: 完美适配PC和移动设备
- 🎯 **交互体验**: 点击城市查看详情，悬停显示信息

## 🚀 技术栈

- **前端框架**: React 18 + TypeScript
- **地图库**: Leaflet.js + React-Leaflet
- **动画库**: GSAP (GreenSock)
- **样式**: CSS3 + 自定义主题
- **构建工具**: Create React App

## 📦 项目结构

```
silk-road-map/
├── src/
│   ├── components/          # React组件
│   │   ├── SilkRoadMap.tsx     # 主地图组件
│   │   ├── CityMarker.tsx      # 城市标记组件
│   │   ├── SilkRoadPath.tsx    # 路径组件
│   │   └── CityInfoCard.tsx    # 信息卡片组件
│   ├── data/                # 数据文件
│   │   └── cities.json         # 城市数据
│   ├── types/               # TypeScript类型定义
│   │   └── index.ts
│   ├── styles/              # 样式文件
│   │   └── SilkRoadMap.css
│   └── utils/               # 工具函数
├── public/                  # 静态资源
└── README.md
```

## 🎯 核心功能

### 1. 地图展示
- 显示唐代丝绸之路中国段8个重要城市
- 从长安到玉门关的完整路线
- 支持缩放、拖拽等交互操作

### 2. 城市信息
每个城市包含：
- 基本信息（位置、人口、现代城市名）
- 历史意义和文化特色
- 主要商品和贸易特色
- 著名地标和文化遗存

### 3. 交互功能
- **点击城市**: 显示详细信息卡片
- **悬停效果**: 城市名称和简介提示
- **路径高亮**: 丝绸之路路线展示
- **动画效果**: 商队沿路线行进

### 4. 响应式设计
- 桌面端: 完整功能展示
- 平板端: 适配中等屏幕
- 移动端: 优化触摸操作

## 🗺️ 城市路线

1. **长安** (西安) - 丝路起点，唐朝首都
2. **天水** - 陇右道重镇，汉藏文化交汇
3. **兰州** - 河西走廊门户，多民族聚集地
4. **武威** - 凉州古城，西凉文化中心
5. **张掖** - 甘州商贸重镇，佛教文化繁荣
6. **酒泉** - 肃州军事要塞，边塞文化典型
7. **敦煌** - 莫高窟所在，佛教艺术宝库
8. **玉门关** - 西出阳关，中西文化分界点

## 🎨 设计理念

### 色彩搭配
- **主色调**: 盛唐金(#FFD700) + 朱砂红(#DC143C)
- **背景色**: 古纸色(#F5F5DC) + 沙漠黄(#DEB887)
- **强调色**: 唐三彩蓝(#4169E1) + 墨色(#1C1C1C)

### 视觉元素
- 仿古地图质感
- 传统纹样装饰
- 中国古典字体
- 渐变色彩过渡

## 🛠️ 开发指南

### 环境要求
- Node.js 16+
- npm 或 yarn

### 快速开始
```bash
# 克隆项目
cd silk-road-map

# 安装依赖
npm install

# 启动开发服务器
npm start

# 构建生产版本
npm run build
```

### 自定义开发

#### 添加新城市
编辑 `src/data/cities.json`：
```json
{
  "id": "new-city",
  "name": "新城市",
  "lat": 40.0,
  "lng": 100.0,
  "description": "城市描述",
  // ... 其他属性
}
```

#### 修改样式
编辑 `src/styles/SilkRoadMap.css` 来自定义：
- 城市标记样式
- 路径颜色和效果
- 动画参数
- 响应式断点

#### 调整动画
在 `SilkRoadMap.tsx` 中修改GSAP动画：
```javascript
tl.to(caravanRef.current, {
  duration: 20,        // 动画时长
  ease: 'none',        // 动画缓动
  motionPath: {
    path: pathPoints,
    autoRotate: true   // 自动旋转
  }
});
```

## 📱 浏览器支持

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request