city-roads
一次性渲染任何城市的所有道路:https://anvaka.github.io/city-roads/
它是如何制作的?
数据是使用overpass API从OpenStreetMap获取的。虽然该API是免费的(只要你遵守ODbL许可),但它可能会受到速率限制,有时也会很慢。毕竟我们是在下载一个区域内成千上万的道路!
为了提高下载性能,我索引了约3,000个人口超过100,000的城市,并将其存储为非常简单的protobuf格式。这些城市被存储在这个github仓库的缓存中。
名称解析是由nominatim完成的——对于你在搜索框中输入的任何查询,它都会返回区域ID列表。我首先在我的缓存城市列表中检查区域ID,如果缓存中不存在该区域,则回退到overpass。
脚本编写
在简单的UI背后,软件工程师还能找到脚本编写功能。你可以在city-roads之上开发程序。city-script中提供了一些示例。场景API文档在这里:https://github.com/anvaka/city-roads/blob/main/API.md
请分享你的创作,如果你有任何问题,请随时联系。
局限性
城市的渲染受浏览器和显卡内存容量的限制。我能够在一台非常旧的三星手机上顺利渲染西雅图的道路,不过当我尝试东京(有140万个路段)时,手机变得非常慢。
选择一个拥有数百万条道路的区域(例如华盛顿州)可能会导致页面在功能强大的设备上崩溃。
幸运的是,大多数城市都可以无问题地渲染,呈现出美丽的艺术效果。
支持
如果你喜欢这项工作并想在你的项目中使用它——欢迎你这样做!
请让我知道进展如何。你也可以在这里赞助我的项目——你的资金将用于更多精彩且免费的数据可视化。
本地开发
# 安装依赖
npm install
# 在localhost:8080上提供热重载服务
npm run dev
# 为生产环境构建并压缩
npm run build
# 为生产环境构建并查看包分析报告
npm run build --report
许可证
源代码采用MIT许可证