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

查看 40|回复 6
作者:7gugu   

背景
之前第一次看到 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/

    香港地铁, 可视化, 模拟

  • mqx   
    不错鸭,不过打开后风扇呼呼地转,哈哈哈哈
    impact108   


    you'ge 有个疑问,为啥可以看到未来的啊
    w797200   
    看着不错,后续考虑加其他城市的吗?
    jackOff   
    感觉天气预报或者电视台需要这种功能
    7gugu
    OP
      
    @mqx 对,这个我做的时候也发现了,现在是有性能问题的,需要被修复。
    @impact108 因为这个数据是已经提前拿到的时刻表,所以可以看到未来的运行状态
    @w797200 本来想做整个大湾区的,但是拿不到其他城市的,就只能先做香港部分的了。(因为大湾区的轨道交通比较发达,可以把城际高铁有轨电车啥的都纳入进来做,看起来比较震撼)
    wednesdayco   
    啊,看到这个想回去玩天际线了
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部