提交您的产品 
Ai应用
Ai资讯
AI生图
AI生视频
开源AI应用平台
City-Roads
City-Roads简介
City-Roads是什么？
City-Roads 是个专门用来画城市道路网的免费开源的工具。它用 OpenStreetMap 的数据，靠浏览器的 WebGL 来画图，不用装别的软件，打开网页输个城市名就能看到全部道路，还能存成 PNG 或 SVG 的高清图。很多设计师、做规划的人还有喜欢地图的人都用它来快速出图、做艺术海报或者分析城市。
City-Roads主要特点
画得快：几百万段路很快就能显示，三千多个大城市的数据已经提前存好，打开就快。
不用服务器：全是前端做的，用 Vue 和 WebGL，下载代码后在本机运行 npm install 和 npm run dev 就行。
样子能随便改：右边面板可以换道路颜色、粗细、背景色，还能加上或去掉地名，容易做出简单、科技感或者像手绘的风格。
能存多种格式：画完可直接下 PNG 或 SVG，方便排版本、打印、放 ppt 或发到社交平台。
可写脚本改：有 SceneAPI，能用代码改颜色、按道路级别上色、一次截很多图，也能嵌到自己项目里用。
City-Roads怎么用
打开 anvaka.github.io/city-roads
在搜索框输城市名，比如北京、上海、New York，等它加载完。
在页面改道路和背景的颜色，加上城市名字。
点下载，选 PNG 或 SVG。
注意
第一次搜要等数据从网上拿，Overpass API 有限制，有时慢一点；已经存好的城市快很多。页面能放大缩小，方便看不同大小的路。
City-Roads本地开发
准备好Node.js 环境
克隆仓库并安装依赖：
git clone https://gitcode.com/gh_mirrors/ci/city-roads.git cd city-roads npm install npm run dev # 或 npm start
浏览器自动打开 http://localhost:8080，在搜索框输入城市（如“Chengdu”），即刻生成道路网。
右侧控制栏调颜色、线宽 → 点“Export”保存 PNG / SVG 。
适合前端/可视化/地图爱好者可在此基础上扩展交互、样式与数据处理流程
City-Roads应用场景
教课或科普：比较不同城市的路网，比如方格和放射形，顺便讲最短路、连通这些概念。
做设计或素材：存高分辨率的 SVG 或 PNG，用来做海报、PPT、壁纸或印在杯子这类东西上。
看规划和出行：从大面看道路密不密、骨架怎样，帮着聊交通和空间结构。
简单分析：很快看出城市怎么扩展、路的等级和堵车地方的模样。
城市规划：比不同城市道路密不密、是方格还是放射形，帮着选地点和找交通问题。
做艺术：把路网当花纹，做海报、T 恤、手机壁纸；把几个城市拼一起，看着很特别。
上课演示：地理课当场拉不同城市，说布局差别；GIS 课拿来展示OpenStreetMap的数据样子。
Github地址：https://github.com/anvaka/city-roads
