迷你 MTR：在地图上看香港地铁实时运行

背景

之前第一次看到 Mini Tokyo 3D 的时候，就很想做一个香港地铁版本：把线路铺在真实地图上，再让列车沿着轨道运行，像看一座微缩城市一样观察整个地铁网络。
不过这个想法搁置了很久。一方面是当时自己的技术实力有限，直白点说就是菜；另一方面是能找到的数据比较零散，线路、站点、时刻表和实时到站信息很难拼到一起，所以一直停留在“以后再做”的阶段。
最近用 GLM 5.3 Flash 把这个坑重新捡了起来。原本只是想试试看能推进到什么程度，结果效果意料之外地好，最后真的做成了一个基本完整、可以直接在浏览器里运行的版本。

项目体验

• 在线体验：https://7gugu.github.io/mini-mtr-3d/


• GitHub：https://github.com/7gugu/mini-mtr-3d

已实现功能

• 基于高德地图和 Three.js 展示香港地铁网络


• 覆盖 10 条港铁线路


• 根据时刻表生成列车运行轨迹，目前整理了 4,000 多个车次


• 每 30 秒读取一次港铁 Next Train API ，并尝试将实时到站信息与计划车次匹配


• 支持时间轴拖动、暂停和倍速播放


• 可以切换实时模式和模拟模式


• 加入了天气、线路状态和事故提示


• 站名会根据缩放级别自动调整，避免地图缩小时满屏都是标签


• 支持繁体中文和英文

数据来源

需要说明的是，港铁公开接口提供的主要是预计到站信息，并不是每一辆车的 GPS 坐标。所以画面里的列车位置并非真正意义上的实时定位，而是结合线路、运行时刻表和 Next Train 数据推算、校准出来的。它更接近一个实时驱动的运行模拟，而不是官方调度系统。
目前项目已经开源，代码谈不上多优雅，有些数据处理也比较粗暴，不过总算把多年前想做的东西做出来了。后面准备继续优化列车匹配准确度、移动端体验和渲染性能，也想再补一些更接近 Mini Tokyo 3D 的细节。
如果大家打开后遇到列车乱跑、接口失效、地图加载失败或者浏览器性能问题，可以直接在 GitHub 提 Issue 。也欢迎对港铁数据、Three.js 或地图可视化比较熟的朋友一起折腾。

作者信息

• 博客：https://7gugu.com/