Mini Tokyo 3D

Mini Tokyo 3D 是一个完全运行在浏览器中的开源项目，它将东京都市圈复杂而密集的公共交通网络——包括地铁、JR线、私铁甚至航班——以实时、三维、可交互的方式直观呈现。无论你是城市交通爱好者、数据可视化开发者，还是只是好奇东京地铁如何运转的普通用户，这款工具都能提供沉浸式的探索体验。

项目完全基于 Web 技术（WebGL + Mapbox + 自定义 3D 渲染引擎），无需安装任何客户端，打开网页即可使用。

交互操作一览（支持鼠标与触屏）

为了兼顾桌面与移动设备，Mini Tokyo 3D 提供了丰富且直观的操作方式：

• 平移：鼠标拖动 / 单指滑动
• 缩放：滚轮 / 双指捏合 / 点击 +/- 按钮 / 双击（放大）/ Shift+双击（缩小）
• 旋转与倾斜：右键拖动 / Ctrl+拖动 / 双指拖动
• 框选放大：Shift+鼠标拖动（桌面端）
• 方向重置：点击指南针 → 正北朝上；拖动指南针 → 自由旋转
• 全屏：点击全屏按钮，沉浸式查看
• 地下模式：点击“眼睛”按钮，切换是否显示地下线路与车站
• 回放模式：点击“播放”按钮，回放历史列车运行轨迹
• 节能模式：点击“电池”按钮，降低帧率以节省电量（适用于移动设备）

此外，点击任意列车、飞机或车站，可高亮并跟踪其状态；悬停则显示实时信息（如线路名、下一停靠站、延误状态等）。点击空白地图区域可取消选中。

数据来源：开放、实时、多源融合

Mini Tokyo 3D 的核心数据来自 公共交通开放数据中心（Open Data for Public Transport, ODPT），具体包括：

• 所有车站的地理坐标与拓扑结构
• 各线路的时刻表与运行规则
• 实时列车位置与运行状态（来自 ODPT Center）
• 未来交通预测与挑战数据（来自 Challenge 2025 项目）

地图底图由 Mapbox 提供，支持高精度地形与街道渲染。

⚠️ 注意：使用本项目需自行申请以下三个令牌：

• Mapbox Access Token
• ODPT Center API Token
• ODPT Challenge 2025 Token

如何构建与部署

Mini Tokyo 3D 是一个静态 Web 应用，构建过程简单：

前提条件

• Node.js（推荐 v18 或更高）

构建步骤

git clone https://github.com/mini-tokyo/mini-tokyo-3d.git
cd mini-tokyo-3d
npm install
npm run build-all

构建完成后，所有资源将输出至 build/ 目录。

配置 API 令牌

在 build/index.html 中，找到地图初始化代码，填入你的令牌：

map = new mt3d.Map({
    container: 'map',
    accessToken: '你的 Mapbox 令牌',
    secrets: {
        odpt: '你的 ODPT Center 令牌',
        challenge2025: '你的 Challenge 2025 令牌'
    }
});

项目支持本地开发服务器（npm start）和静态托管（如 GitHub Pages、Vercel、Netlify）。

为何值得关注？

• 完全开源：代码透明，可审计、可定制、可二次开发
• 实时性：展示的是真实世界中正在运行的列车，非模拟数据
• 技术整合：融合地理信息系统（GIS）、实时流数据、3D 渲染与 Web 性能优化
• 教育价值：为城市交通、数据可视化、WebGL 开发提供优秀参考案例