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

[ddiu8081]

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

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

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

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

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

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

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

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

[secsilm]

@raysonlu 然而数据是最重要的

[w7938940]

不能记住上次选择的城市

[madNeal]

@ddiu8081 数据源还需要分享嘛，又不是你的数据源，稍微看一下你的网站就知道你的数据是通过 mapbox 获取的，还有你把 access_token 直接暴露在客户端是不安全的做法，等同于把你的 ak 暴露给了所有人

[ddiu8081]

@sillydaddy #19 是的，正在探索一些玩法
@w7938940 #22 好的，后面会加个缓存
@madNeal #23 是个问题，当时也想了一下浏览器环境几乎保护不了什么敏感信息，不管是后端包装还是别的什么办法总能绕过去🥲mapbox key 感觉还好，毕竟这玩意儿应该只能放在浏览器环境，在后台过滤下域名防滥用好了

[cpstar]

严重好评，并转发扩散了。
给一个建议，车站选择。

[ddiu8081]

@Felldeadbird #20 哪些线路漏了可以告诉我🧐 我看看能不能加上哈哈
@cpstar #25 感谢转发。车站选择是指搜索某个公交站么？右上角有个搜索框可以按名称搜站

[Vnaner]

很棒，我有这样的想法很久了...

[icegaze]

有意思，
比百度地图好玩多了…

[oIMOo]

已 Star~

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

最后就是，大佬有没有可能出个简略的教程哇？
比如随机找一个城市，然后模拟两三条公交线路，在这个基础上如何制作的教程。

[ddiu8081]

@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]

跟这个项目挺像 https://bus.daibor.com/, 也是 v 友的, 不是拉踩哈, 我个人觉得这个实用一点, 不过 lz 的这个很漂亮

[efaun]

@lance6716 #11 你可以看看这个 bus.daibor.com

[ddiu8081]

@efaun #31 看到了，确实公交到达圈偏实用，我这个偏花瓶🤣

[magicdawn]

N 年前做过医院的，没楼主做的流畅 (不会写 shader 哭唧唧
https://bj-hospital-vis.netlify.app/#/

[ddiu8081]

@magicdawn #34 我这边看着还好～ shader 我也不会写…最后是翻遍 issue 找类似效果的源码参考着贴过来了🥲🥲

[kaifeiji]

@littlewing mapbox 前端渲染，很烧内存，内存小就卡了

[littlecowherd]

太牛了

[skys215]

啥时候有别的城市的？

[ddiu8081]

@skys215 #38 你可以留言推荐下个想看到的城市，我后面会加上😄

[rj]

好评好评