跳到正文
网页珍奇柜Web Curio

城市道路全图

city-roads，Andrei Kashcha (anvaka)，2020 年

去看原作（在新窗口打开）源码（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

原作直展：这是 Andrei Kashcha (anvaka) 的原始作品，按 MIT（Roboto 字体为 Apache-2.0；道路数据 © OpenStreetMap contributors，ODbL） 许可证收录（版本 35d6497）。从源码构建后展出，城市搜索换成随附的四座城市（巴黎、威尼斯、旧金山、巴塞罗那，数据为作者 2020 年 11 月的 OSM 缓存），去掉了统计脚本和印马克杯功能。输入城市名回车或直接回车列出全部，点选即可看到整座城市的道路。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步用 Nominatim 搜索城市并获取其行政边界 ID
  2. 第 2 步向 Overpass API 请求该区域内所有 highway 线段
  3. 第 3 步把所有道路线段一次性写入 WebGL 线段缓冲区（w-gl 库）渲染
  4. 第 4 步可调线条颜色、背景、宽度，并导出 PNG 或 SVG

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Geocode a place name to an OpenStreetMap area id with Nominatim, then send an Overpass QL query for all ways tagged highway inside that area, returning node coordinates. Project longitude and latitude to a flat Mercator plane and pack every road segment into one WebGL line buffer so hundreds of thousands of segments draw in a single call. Add pan and zoom, a colour picker for lines and background, and export to PNG via the canvas or to SVG by writing path data.

定制成完整的实现提示词

档案

能不能拿来用

原作以 MIT 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Opened https://anvaka.github.io/city-roads/ (200, title 'Draw all roads in a city at once'); repo anvaka/city-roads exists, licence MIT via GitHub API.