惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Stack Overflow Blog
Stack Overflow Blog
Y
Y Combinator Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
M
MIT News - Artificial intelligence
GbyAI
GbyAI
A
About on SuperTechFans
T
The Blog of Author Tim Ferriss
雷峰网
雷峰网
Blog — PlanetScale
Blog — PlanetScale
J
Java Code Geeks
IT之家
IT之家
Microsoft Azure Blog
Microsoft Azure Blog
V
V2EX
爱范儿
爱范儿
N
Netflix TechBlog - Medium
U
Unit 42
博客园 - 三生石上(FineUI控件)
WordPress大学
WordPress大学
博客园 - 叶小钗
G
Google Developers Blog
Jina AI
Jina AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The GitHub Blog
The GitHub Blog
腾讯CDC

7gugu's Blog

网球鹰眼 by GLM 5.3-Flash – 7gugu's Blog 横版闯关小游戏 by Godot – 7gugu's Blog 过马路小游戏 by Godot – 7gugu's Blog 【好物分享】 小林制药 一滴消臭元 – 7gugu's Blog 小米摄像头4 4K版接入Homekit分享 – 7gugu's Blog 【日常碎碎念】AI取代前端? – 7gugu's Blog 【工具】Telegraph图片下载快捷指令 – 7gugu's Blog 歪马精酿 全麦原浆 – Pure Malt Original Beer WaiMa Brewery – 7gugu's Blog 猫员外 佳世涛 氮气黑啤 – Justout Nitro Stout Richkat – 7gugu's Blog 个人幸福与文明存续:读完《美丽新世界》与《永恒的终结》后 – 7gugu's Blog 【日常碎碎念】效率提升工具 – 7gugu's Blog NanoBananaPro真的好强啊! – 7gugu's Blog 炭烧响螺🔥 – 7gugu's Blog 如何恢复某一次git提交的权限修改? – 7gugu's Blog 凯西 瑰红2号 桶陈野菌艾尔树莓 – The Cut: Raspberry Fruited Sour Casey Brewing & Blending – 7gugu's Blog 稳态 华夫甜蜜猜想 – Waffle Honeycomb Conjecture Equilibrium brewery – 7gugu's Blog 2025年年终总结 – 7gugu's Blog 最近学了单板滑雪🏂 – 7gugu's Blog [日常碎碎念] 干红干白不“自然”吗? – 7gugu's Blog
迷你 MTR:在地图上看香港地铁实时运行 – 7gugu's Blog
7gugu · 2026-09-07 · via 7gugu's Blog

背景

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

项目体验

已实现功能

  • 基于高德地图和 Three.js 展示香港地铁网络
  • 覆盖 10 条港铁线路
  • 根据时刻表生成列车运行轨迹,目前整理了 4,000 多个车次
  • 每 30 秒读取一次港铁 Next Train API ,并尝试将实时到站信息与计划车次匹配
  • 支持时间轴拖动、暂停和倍速播放
  • 可以切换实时模式和模拟模式
  • 加入了天气、线路状态和事故提示
  • 站名会根据缩放级别自动调整,避免地图缩小时满屏都是标签
  • 支持繁体中文和英文

数据来源

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

后续

居然被Mini-Tokyo的原作者转发了,好开心!