同时渲染任何城市中的每条道路：https://anvaka.github.io/city-roads/

数据是使用 overpass API 从 OpenStreetMap 获取的。虽然该 API 是免费的（只要您遵循 ODbL 许可证），它可以受到速率限制，有时速度很慢。毕竟 我们正在下载一个区域内的数千条道路！

为了提高下载性能，我索引了 ~3,000 个人口超过 100,000 人的城市，并且 存储为 非常简单 的 protobuf 格式。城市存储在此 github 存储库 的缓存中。

名称解析由 nominatim 完成 – 对于您键入的任何查询 在搜索框中，它会返回区域 ID 列表。我首先在缓存城市列表中检查区域 ID，如果缓存中不存在 Area，则回退到 overpass。

在简单的 UI 软件背后，还会发现脚本功能。您可以在 top 上开发程序 城市道路。city-script 中提供了一些示例。现场 API 记录如下：https://github.com/anvaka/city-roads/blob/main/API.md

请分享您的创作，如果您有任何问题，请随时与我们联系。

城市的渲染受浏览器和视频卡内存容量的限制。我能够渲染西雅图 在非常旧的三星手机上没有打嗝，尽管当我尝试东京（1.4m 分段）手机时 非常慢。

选择拥有数百万条道路的区域（例如华盛顿州）可能会导致页面崩溃，即使在 强大的设备。

幸运的是，大多数城市都可以毫无问题地渲染，从而产生美丽的艺术。

如果您喜欢这项工作并希望在您的项目中使用它 – 我们非常欢迎您这样做！

请 让我知道 进展如何。您也可以 在这里 赞助我的项目 – 您的资金将专门用于更出色和免费的数据可视化。

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

源代码根据 MIT 许可证获得许可