city-roads
立即渲染任何城市的每一条道路:https://anvaka.github.io/city-roads/
怎么做的?
使用 overpass API 从 OpenStreetMap 提取数据。尽管该 API 是免费的(只要您遵循 ODbL 许可),但它可能会受到速率的限制,有时会很慢。毕竟,我们正在下载一个区域中的数千条道路!
为了提高下载性能,我索引了约 3,000 个人口超过 100,000 的城市,并将其存储为非常简单的 protobuf 格式。城市存储在此 github 存储库中的缓存中。
名称解析由 nominatim 完成 -- 对于您在搜索框中键入的任何查询,它都会返回区域 ID 列表。我首先检查缓存的城市列表中的区域 ID,如果缓存中不存在区域,则会回退到立交桥。
脚本编写
在简单的 UI 软件工程师的背后,还可以找到脚本功能。您可以在城市道路上开发程序。city-script 中提供了一些示例。场景 API 记录在这里:https://github.com/anvaka/city-roads/blob/master/A...
请分享您的创作,如有任何疑问,请随时与我们联系。
局限性
我用一款非常老的三星手机渲染西雅图的道路时没有打嗝,不过当我尝试东京(有 140 万段)时,手机的速度非常慢。
选择具有数百万条道路的区域(例如华盛顿州),即使在功能强大的设备上也可能导致页面崩溃。
幸运的是,大多数城市都可以毫无问题地进行渲染,从而产生出精美的艺术品。
支持
如果您喜欢这项工作,并希望在您的项目中使用它 -- 非常欢迎您这样做!
请让我知道怎么回事。您也可以在这里赞助我的项目 -- 你的资金将被用于更棒的和免费的数据可视化中。
本地开发
# 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 许可。
(The first version translated by vz on 2020.07.26)