City-Roads官網
一個專門用來畫城市道路網的免費開源工具。它用 OpenStreetMap 的數據,靠瀏覽器的 WebGL 來畫圖,不用裝別的軟件,打開網頁輸個城市名就能看到全部道路,還能存成 PNG 或 SVG 的高清圖。
網站提供:Ai工具箱,Ai圖片處理,City,Roads,City-Roads,Street。

City-Roads簡介
Visualization of all roads within any city. Contribute to anvaka/city-roads development by creating an account on GitHub.
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
City-Roads官網入口網址
https://github.com/anvaka/city-roads
OpenI小編發現City-Roads網站非常受用戶歡迎,請訪問City-Roads網址入口試用。
數據評估
本站OpenI提供的City-Roads都來源于網絡,不保證外部鏈接的準確性和完整性,同時,對于該外部鏈接的指向,不由OpenI實際控制,在2025年 12月 9日 上午12:00收錄時,該網頁上的內容,都屬于合規合法,后期網頁的內容如出現違規,可以直接聯系網站管理員進行刪除,OpenI不承擔任何責任。



粵公網安備 44011502001135號