Repolode
提交项目
anvaka

anvaka/city-roads

在浏览器中一次性渲染任意城市的全部道路，生成地图风格的可视化图像，数据来自 OpenStreetMap。

在 GitHub 查看官网
Star
9,768
Fork
751
未关闭 Issue
57
最近提交
10天前

这是什么？

city-roads 能把一座城市的所有道路同时画在一张画布上。输入城市名称后，应用会通过 Overpass API 从 OpenStreetMap 获取道路数据，并渲染成细密的线条图，可调整样式后导出为图像作品。

为提升下载速度，项目内置了约 3000 个人口超过 10 万城市的缓存，采用简单的 protobuf 格式存储。城市名称解析使用 Nominatim，若缓存中没有对应城市，则回退到 Overpass 直接查询。

项目还提供场景 API，方便开发者编写脚本，在可视化结果之上定制新的渲染效果。渲染受浏览器和显卡内存限制，整州等超大区域可能导致页面崩溃。

核心功能

  • 01基于 OpenStreetMap 数据，一次性渲染城市的全部道路
  • 02缓存约 3000 个大城市数据，加快加载速度
  • 03通过 Nominatim 进行城市名称搜索
  • 04提供场景 API，支持编写脚本定制渲染效果

适用场景

  • 制作抽象风格的城市地图海报或装饰画
  • 直观观察某座城市的道路网络结构
  • 基于场景 API 开发定制化的地图可视化

快速上手

  1. 1

    安装依赖

    npm install
  2. 2

    启动带热重载的本地开发服务器

    npm run dev

使用前须知

  • 渲染范围很大的区域时，浏览器可能崩溃或在性能较弱的设备上运行缓慢，这取决于内存和显卡。
  • 选择包含数百万条道路的区域（例如整个美国州）可能导致页面崩溃。

标签

#openstreetmap#data-visualization#maps#canvas#javascript#generative-art

常见问题

city-roads 是什么？
在浏览器中一次性渲染任意城市的全部道路，生成地图风格的可视化图像，数据来自 OpenStreetMap。 city-roads 能把一座城市的所有道路同时画在一张画布上。输入城市名称后，应用会通过 Overpass API 从 OpenStreetMap 获取道路数据，并渲染成细密的线条图，可调整样式后导出为图像作品。
city-roads 可以免费使用吗？用的什么许可证？
city-roads 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
city-roads 还在维护吗？
活跃维护中。city-roads 最近一次提交是在 2026年10月10日。
city-roads 适合用来做什么？
制作抽象风格的城市地图海报或装饰画 直观观察某座城市的道路网络结构 基于场景 API 开发定制化的地图可视化
city-roads 怎么安装和运行？
安装依赖: npm install 启动带热重载的本地开发服务器: npm run dev
在哪里获取 city-roads？
源代码和安装说明在 GitHub 上：https://github.com/anvaka/city-roads

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目