V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ddiu8081
V2EX  ›  分享创造

BusVis · 把北京的所有公交织成一张图 🚌

  ddiu8081 ·
ddiu8081 · 2022-02-14 16:01:42 +08:00 · 6237 次点击
这是一个创建于 773 天前的主题,其中的信息可能已经有所发展或是发生改变。

多年来我一直有一个问题:一条道路上究竟有多少条公交在跑?

于是春节在家的时候花了几天时间做出了这么一个东西:

all_line

所有的公交线路织成了一张网,线路网上的每一个线都是可交互的,可以点击查看这条线路的详情。

在左上角可以切换另一个视角:站点网,可以把全城的所有公交站画下来,点击公交站可以查看从这个站点辐射出去的路网。

line_detail

另外,除北京外我也加入了上海、南京、广州三个城市,欢迎体验👏。

网站地址: https://bus.ljl.li/

Github: https://github.com/ddiu8081/bus-vis

另外还写了一篇创造的过程: 把北京的所有公交织成一张图——带你看看北京的公交网

61 条回复    2022-04-10 21:59:46 +08:00
EndureBlaze
    1
EndureBlaze  
   2022-02-14 16:12:18 +08:00
好东西,star 了
rationa1cuzz
    2
rationa1cuzz  
   2022-02-14 16:15:35 +08:00
已 star ,好评
xiao109
    3
xiao109  
   2022-02-14 16:16:39 +08:00
这是真的有一套
xiao109
    4
xiao109  
   2022-02-14 16:18:41 +08:00
太卡了,建议优化一下
raysonlu
    5
raysonlu  
   2022-02-14 16:24:18 +08:00   ❤️ 4
"想看如何获得全北京的线路数据的小伙伴恐怕要失望了,本篇不会讲到这部分内容。"
littlewing
    6
littlewing  
   2022-02-14 16:25:16 +08:00
@xiao109 除了打开加载时间长了点外,加载完后没感觉到卡啊
also24
    7
also24  
   2022-02-14 16:25:22 +08:00
很棒,之前用过一个类似的服务叫做八达图,但是只支持图片导出很不方便。
楼主的这个项目可以试试查看,体验就要好太多了,界面也更加美观。

期待支持更多的城市~
ddiu8081
    8
ddiu8081  
OP
   2022-02-14 16:25:57 +08:00
@xiao109 #4 谢谢,现在确实是欠优化的。我后面再啃啃文档尝试优化下
also24
    9
also24  
   2022-02-14 16:28:14 +08:00
@also24 #7
typo: 试试查看 -> 实时查看
AllenHua
    10
AllenHua  
   2022-02-14 16:41:02 +08:00
非常有趣,星星给你
lance6716
    11
lance6716  
   2022-02-14 16:41:47 +08:00 via Android
其实一直想一个需求,就是在想去哪里玩的时候,能直观地看到很多地方的大概抵达耗时。
自己想的一个 UI 是,在选定起点和交通工具后,10 分钟以内的区域涂成绿色,10 到 30 涂成黄色,30 涂成红色之类的
ddiu8081
    12
ddiu8081  
OP
   2022-02-14 16:51:36 +08:00
@raysonlu #5 😭 是的,数据源就不分享了
@also24 #7 体验了下八达图,应该跟我想到一块去了,可以展示一个站的辐射路网😄,看起来是后端渲染 也不错
@lance6716 #11 好像确实有种叫公交到达圈的东西,如果能把时间算准确实有意思,高德有个 demo 看起来有点丑🐶 : https://lbs.amap.com/demo/javascript-api/example/bus-info/arrival-range
mywaiting
    13
mywaiting  
   2022-02-14 16:56:43 +08:00
感觉是一个很好的数据可视化的案例
cxl008
    14
cxl008  
   2022-02-14 17:26:05 +08:00
我提供一个思路
1.参考八达图 ,增加定位,辐射周围的站点,计算步行到达站点时间
2.从出发站点到不同结束站点,再不同的结束站点标记热力图,时间越长颜色越淡,多重覆盖可以增加权重
3. 根据一次性辐射出去的位置标记 出发位置的等级。。。
不考虑学区的话,这应该是买房的最优解....
cxl008
    15
cxl008  
   2022-02-14 17:27:39 +08:00
我前几年住 皂君庙,虽然在 3 环以里,但是交通其实比较不方便。现在在苏州街,交通是真方便,虽然房子还小了 20 平。。。但是总价比皂君庙贵了很多。。。
ddiu8081
    16
ddiu8081  
OP
   2022-02-14 18:01:17 +08:00
@cxl008 #14 琢磨了下应该可行,不过有个问题是我还没有线路的站间距数据,不太能求得出来“任意公交站 A->B 需要多久"这种问题...
cxsz
    17
cxsz  
   2022-02-14 19:21:52 +08:00
楼主的数据源很强啊,查了一条非常小众的,刚开通不久的线路,居然都有
ddiu8081
    18
ddiu8081  
OP
   2022-02-14 21:02:05 +08:00
@cxsz #17 谢谢,数据是每天触发更新的,新路线目测基本不会漏。😄
sillydaddy
    19
sillydaddy  
   2022-02-14 22:12:17 +08:00
点赞👍。感觉有很多好的玩法可以探索。
Felldeadbird
    20
Felldeadbird  
   2022-02-14 22:19:19 +08:00
楼主这个给力啊。公司在郊区,还真的只有一条巴士线。

不过广州某些区的地方巴士线路没有收录。
secsilm
    21
secsilm  
   2022-02-14 22:19:41 +08:00 via Android
@raysonlu 然而数据是最重要的
w7938940
    22
w7938940  
   2022-02-14 22:19:58 +08:00
不能记住上次选择的城市
madNeal
    23
madNeal  
   2022-02-14 22:34:50 +08:00
@ddiu8081 数据源还需要分享嘛,又不是你的数据源,稍微看一下你的网站就知道你的数据是通过 mapbox 获取的,还有你把 access_token 直接暴露在客户端是不安全的做法,等同于把你的 ak 暴露给了所有人
ddiu8081
    24
ddiu8081  
OP
   2022-02-14 23:05:50 +08:00
@sillydaddy #19 是的,正在探索一些玩法
@w7938940 #22 好的,后面会加个缓存
@madNeal #23 是个问题,当时也想了一下浏览器环境几乎保护不了什么敏感信息,不管是后端包装还是别的什么办法总能绕过去🥲mapbox key 感觉还好,毕竟这玩意儿应该只能放在浏览器环境,在后台过滤下域名防滥用好了
cpstar
    25
cpstar  
   2022-02-14 23:20:52 +08:00
严重好评,并转发扩散了。
给一个建议,车站选择。
ddiu8081
    26
ddiu8081  
OP
   2022-02-14 23:25:55 +08:00
@Felldeadbird #20 哪些线路漏了可以告诉我🧐 我看看能不能加上哈哈
@cpstar #25 感谢转发。车站选择是指搜索某个公交站么?右上角有个搜索框可以按名称搜站
Vnaner
    27
Vnaner  
   2022-02-14 23:28:45 +08:00
很棒,我有这样的想法很久了...
icegaze
    28
icegaze  
   2022-02-14 23:37:24 +08:00 via Android
有意思,
比百度地图好玩多了…
oIMOo
    29
oIMOo  
   2022-02-15 00:37:44 +08:00   ❤️ 1
已 Star~

想确认一下是不是理解正确:
第一种压缩方法是将多个站点进行适当删减,但是会如文章中所说,在复杂路段,路线会不准确。那么这种情况是不是也会造成站点减少?比如一辆车途径 A/B/C/D/E, 五个点在通一条直线上,压缩后会变成 A/E 。那么用户在查看这辆车的途径站是,会不会看不到 B/C/D ?
采用第二种方法后,文章中提到“将所有结果乘 10^6 以尽量减少小数的出现”,减少小数的出现是什么原因呢?或者说,为什么减少小数就可以提高性能?

最后就是,大佬有没有可能出个简略的教程哇?
比如随机找一个城市,然后模拟两三条公交线路,在这个基础上如何制作的教程。
ddiu8081
    30
ddiu8081  
OP
   2022-02-15 01:16:22 +08:00
@oIMOo #29

站点数量不会有影响~ 一条线路的路径和站点是分为了互不影响的两个图层,删减的是路径上的点(路径都是由折线构成的),而删减折线上的点会造成折线的精细程度降低,途经站是独立的另一堆散点不会影响。可以参考下面这个图,蓝线代表了一条公交的路线,是由 9 个蓝点连接绘制而成的;绿点代表这条公交的途经站。进行压缩时,9 个蓝点压缩成 4 个,而绿点数量和位置无变化。
https://imgur.com/TccydNc

第二种方法是这样,比如构成一个折线的三个经纬度坐标是
[116.111111, 40.111111], [116.111112, 40.111110], [116.111114, 40.111113],
前后相减得到:
[116.111111, 40.111111], [0.000001, -0.000001], [0.000002, 0.000003]
这样其实并没有减少多少字符数,所以选择把每个数乘 10^6 ,得到:
[116111111, 40111111], [1, -1], [2, 3]
这样就能大幅减小字符数了,可以节省传输体积,客户端收到结果之后再反向处理回来就好了。

你看理解了不😄这就是整个教程了
efaun
    31
efaun  
   2022-02-15 02:01:30 +08:00   ❤️ 1
跟这个项目挺像 https://bus.daibor.com/, 也是 v 友的, 不是拉踩哈, 我个人觉得这个实用一点, 不过 lz 的这个很漂亮
efaun
    32
efaun  
   2022-02-15 02:02:55 +08:00   ❤️ 1
@lance6716 #11 你可以看看这个 bus.daibor.com
ddiu8081
    33
ddiu8081  
OP
   2022-02-15 02:37:10 +08:00 via iPhone
@efaun #31 看到了,确实公交到达圈偏实用,我这个偏花瓶🤣
magicdawn
    34
magicdawn  
   2022-02-15 02:54:16 +08:00 via iPhone
N 年前做过医院的,没楼主做的流畅 (不会写 shader 哭唧唧
https://bj-hospital-vis.netlify.app/#/
ddiu8081
    35
ddiu8081  
OP
   2022-02-15 03:10:16 +08:00 via iPhone
@magicdawn #34 我这边看着还好~ shader 我也不会写…最后是翻遍 issue 找类似效果的源码参考着贴过来了🥲🥲
kaifeiji
    36
kaifeiji  
   2022-02-15 09:27:24 +08:00
@littlewing mapbox 前端渲染,很烧内存,内存小就卡了
littlecowherd
    37
littlecowherd  
   2022-02-15 10:13:57 +08:00
太牛了
skys215
    38
skys215  
   2022-02-15 11:44:25 +08:00
啥时候有别的城市的?
ddiu8081
    39
ddiu8081  
OP
   2022-02-15 11:49:14 +08:00
@skys215 #38 你可以留言推荐下个想看到的城市,我后面会加上😄
rj
    40
rj  
   2022-02-15 11:50:15 +08:00
好评好评
thermalneko
    41
thermalneko  
   2022-02-15 12:47:17 +08:00 via iPhone
天啊,这个项目好棒
yulgang
    42
yulgang  
   2022-02-15 13:49:33 +08:00
如果线路上能显示公交站点会不会更好
yulgang
    43
yulgang  
   2022-02-15 13:50:26 +08:00
我的意思是不需要点某条路线就可以显示,这样能看到两条线距离较近的两站
mydingyan
    44
mydingyan  
   2022-02-15 14:31:05 +08:00
很强 数据源也全
CaptainD
    45
CaptainD  
   2022-02-15 14:47:16 +08:00
v 站时刻提醒我,我是个废物
x66
    46
x66  
   2022-02-15 15:08:58 +08:00
太强了,什么时候加上成都
wolfie
    47
wolfie  
   2022-02-15 15:43:18 +08:00
有没有兴趣加个功能。

A -> B 、或者 A -> A ,随机推荐几条合并的公交路线。纯粹在公交车上打法时间。
ddiu8081
    48
ddiu8081  
OP
   2022-02-15 16:38:05 +08:00   ❤️ 1
@yulgang #42 好主意,我试试
@x66 #44 感谢支持,成都已经上线了
@wolfie #45 类似于公交换乘查询,但是是不考虑时间成本的换乘?我也想实现这个,不过估计没有现成的在线服务,得自己想个算法来找😂
theqiang
    49
theqiang  
   2022-02-15 16:48:31 +08:00 via Android
牛🐮
cpstar
    50
cpstar  
   2022-02-16 09:40:02 +08:00
> 感谢转发。车站选择是指搜索某个公交站么?右上角有个搜索框可以按名称搜站

右上角搜索当然是一个交互用例,但是我遇到的情况是这样的:
缩放地图到某条街道(可能是我熟悉的道路或者目的道路),然后选择线路(更多的可能是了解这条道路上都有哪些线路在跑),但是由于线路过多线条重合,于是不能轻松地选择出或者分辨出期望的线路。
所以车站的思路大概就是,在地图上再加上车站点位(当然现在选择线路之后已经出现了车站点位),这样从车站上更清晰地选择线路。或者换句话讲,从地图上,不但能线条选线路,还能车站选线路。
当然这就出现了第二个问题,上行站下行站(以及上行线路下行线路,甚至单行站),是不是进一步细化到这个程度。再进一步,好像我哪里看到您有实时公交的计划,那也许上下行这个问题就势在必做。

或者基于『不忘初心』的思路,不越搞越复杂,简单化,那可能就是在某段路上把所有的线路线条全部重合为一根线,点击了这根线,先出线路列表,然后选择具体线路之后再出现线路线条。

反正这是一个交互 UX 的问题,OP 根据自己思考慢慢来哈。
skys215
    51
skys215  
   2022-02-16 10:03:59 +08:00
@ddiu8081 我想问一下,线路数据是先存好的是吗?所以并不能查看所有城市?需要先把城市的线路下载下来是吧
wqhui
    52
wqhui  
   2022-02-16 10:28:31 +08:00
强啊,看完也不懂要怎么做
pkwenda
    53
pkwenda  
   2022-02-16 10:47:06 +08:00
@ddiu8081 #39 我想看大连和神奇的重庆~
ddiu8081
    54
ddiu8081  
OP
   2022-02-16 10:53:11 +08:00
@cpstar #50
明白了,就是放大后除了能查看线路还能查看公交站,这个也是我想打算做的。
目前左上角可以切到一个单独的公交站视图,不过目前还有 bug ,放大后看不到站的名字。后面准备把两个视图结合一下实现这种效果。
上下行站的区分不太能搞到数据源 可能麻烦些😐,遇见过比较好的实现就是 busrouter.sg 这个站了。
聚合线路也是我一直想做的,不过看起来需要先把所有路径优化一下,绑到路上,类似 busrouter 的这种效果 https://cheeaun.com/blog/images/screenshots/web/rainbow-bus-routes-overlapping-zoom-in.gif
谢谢你的建议,我再研究一下

@skys215 #51 对的,首先服务端要准备好对应城市的数据文件,下载到浏览器才能查看
ddiu8081
    55
ddiu8081  
OP
   2022-02-16 11:00:41 +08:00
@pkwenda #53 好的,去准备数据了~ 1 小时和 2 小时后应该就能分别刷出重庆和大连了
pkwenda
    56
pkwenda  
   2022-02-16 12:20:39 +08:00
@ddiu8081 #55 哇,大佬太棒了
Jaeden
    57
Jaeden  
   2022-02-16 13:57:02 +08:00 via iPhone
🐮
cosmicrock
    58
cosmicrock  
   2022-02-16 15:35:35 +08:00
@efaun 这个估计是高德 API 的问题,有些新的线路查不到
Mai1993
    59
Mai1993  
   2022-02-18 09:57:36 +08:00   ❤️ 1
试了一下重庆的线路,发现好多线路只有区间线路,没有完整的线路,比如 166 和 236 线路都只有区间。
ddiu8081
    60
ddiu8081  
OP
   2022-02-18 11:42:12 +08:00
@Mai1993 感谢,重庆数据源命名有些特殊导致一些线路没解析到,我修下
chaleaochexist
    61
chaleaochexist  
   2022-04-10 21:59:46 +08:00
大连的数据不对。。。 有一些公交线路 没有体现。
不过基本准确。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3117 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 29ms · UTC 00:35 · PVG 08:35 · LAX 17:35 · JFK 20:35
Developed with CodeLauncher
♥ Do have faith in what you're doing.