这是一个交互式世界历史地图可视化项目，展示了从史前到现代的重要历史事件、人口迁徙、技术发展、物种驯化和文明演变。通过直观的时间轴和地图界面，您可以探索人类历史的地理变迁。
- 📅 按时间轴浏览世界历史变迁
- 🌍 交互式地图界面，支持缩放和平移
- 📚 多种数据类型：历史事件、人口迁徙、技术发展、物种驯化、文明演变、战争和疾病
- 🌙 支持暗色模式和浅色模式，自动适应系统设置
- 📱 响应式设计，适配桌面和移动设备
- 🔍 分类筛选功能，快速查找感兴趣的历史内容
本项目采用模块化设计，将功能划分为不同的模块，每个模块负责特定的功能域。模块之间通过明确定义的接口进行通信，降低了耦合度，提高了代码的可维护性和可扩展性。
- 应用的入口点和核心协调器
- 初始化各个功能模块并协调它们之间的通信
- 处理全局状态和用户交互事件
- 提供错误处理和主题切换功能
- 负责加载和处理历史事件、迁徙路线等JSON数据
- 提供数据过滤、转换和适配功能
- 处理数据缓存和异步加载
- 初始化和管理Leaflet地图实例
- 提供基础地图功能和配置
- 协调不同地图功能层的交互
- 地图工具 (
map-utils.js): 提供地图数据处理和样式工具 - 地图样式 (
map-styles.js): 定义地图视觉风格和主题 - 地图事件 (
map-events.js): 管理地图上的历史事件标记 - 地图迁徙 (
map-migrations.js): 处理人口迁徙路线的显示 - 地图特性 (
map-features.js): 提供额外的地图交互功能
- 管理时间轴UI和年份控制
- 处理年份变化事件和播放控制
- 提供时间定位和导航功能
- 管理事件列表显示和交互
- 处理事件筛选、搜索和排序
- 提供事件详情显示功能
- 提供应用介绍和引导功能
- 管理用户首次体验流程
- 用户交互（如滑动时间轴）产生事件
- 事件被相应的管理器捕获（如TimelineManager）
- 管理器通知应用核心(
app.js) - 应用核心协调其他模块更新状态：
- 更新地图显示（通过MapCore）
- 更新事件列表（通过MapEvents）
- 更新迁徙路线（通过MapMigrations）
- 各模块通过DataLoader获取所需数据
- UI更新完成，呈现给用户
main.js
└── app.js
├── data-loader.js
│ └── data-adapter.js
├── map-core.js
│ ├── map-utils.js
│ ├── map-styles.js
│ ├── map-events.js
│ ├── map-migrations.js
│ └── map-features.js
├── timeline-manager.js
├── events-manager.js
└── intro.js
项目包含多种历史数据，存储在 data/ 目录下：
all_events.json: 主要历史事件migrations.json: 人口迁徙路线technologies.json: 技术发展事件species.json: 物种驯化历史civilizations.json: 文明演变数据wars.json: 主要战争数据diseases.json: 疾病传播历史agriculture.json: 农业发展历史
- 确保您有一个 Cloudflare 账号
- 将项目推送到 GitHub 仓库
- 登录到 Cloudflare 控制面板
- 前往 "Pages" 部分，点击 "连接到 Git"
- 选择您的 GitHub 账号并授权 Cloudflare 访问
- 选择您的历史地图仓库
- 配置部署设置：
- 构建设置: 无需设置 (静态网站)
- 构建命令: 留空
- 构建输出目录: 留空 (使用根目录)
- 点击 "保存并部署"
项目已包含以下重要配置文件：
_headers: 配置HTTP响应头，解决CORS问题_redirects: 确保单页应用的路由功能正常工作404.html: 自定义404错误页面robots.txt: 指导搜索引擎爬取规则
- 克隆仓库到本地
git clone https://github.com/yourusername/worldhistoryviz.git
cd worldhistoryviz- 安装并启动本地服务器（如http-server）：
npm install -g http-server
http-server -p 8080- 在浏览器中打开 http://localhost:8080
- 在
data/目录中添加新的JSON数据文件 - 在
data-loader.js中添加相应的加载函数 - 在
app.js中更新数据加载流程 - 根据需要在相应的管理器中添加处理新数据类型的函数
- 创建新的管理器模块（如
analysis-view.js） - 在
app.js中集成该模块 - 更新 HTML 添加必要的UI元素
- 在 CSS 中添加相应的样式
修改 js/map-styles.js 中的样式配置，调整地图显示效果。
- 大型GeoJSON文件可能影响性能，考虑使用简化版地图或预处理
- 项目已使用异步加载和懒加载技术减少初始加载时间
- 对频繁的用户输入事件使用节流和防抖技术
- 通过缓存机制避免重复加载相同的地图数据
MIT