City-Roads
City-Roads簡介
City-Roads是什么?
City-Roads 是個專門用來畫城市道路網(wǎng)的免費開源的工具。它用 OpenStreetMap 的數(shù)據(jù),靠瀏覽器的 WebGL 來畫圖,不用裝別的軟件,打開網(wǎng)頁輸個城市名就能看到全部道路,還能存成 PNG 或 SVG 的高清圖。很多設(shè)計師、做規(guī)劃的人還有喜歡地圖的人都用它來快速出圖、做藝術(shù)海報或者分析城市。

City-Roads主要特點
畫得快:幾百萬段路很快就能顯示,三千多個大城市的數(shù)據(jù)已經(jīng)提前存好,打開就快。
不用服務(wù)器:全是前端做的,用 Vue 和 WebGL,下載代碼后在本機運行 npm install 和 npm run dev 就行。
樣子能隨便改:右邊面板可以換道路顏色、粗細、背景色,還能加上或去掉地名,容易做出簡單、科技感或者像手繪的風(fēng)格。
能存多種格式:畫完可直接下 PNG 或 SVG,方便排版本、打印、放 ppt 或發(fā)到社交平臺。
可寫腳本改:有 SceneAPI,能用代碼改顏色、按道路級別上色、一次截很多圖,也能嵌到自己項目里用。
City-Roads怎么用
打開 anvaka.github.io/city-roads
在搜索框輸城市名,比如北京、上海、New York,等它加載完。
在頁面改道路和背景的顏色,加上城市名字。
點下載,選 PNG 或 SVG。

注意
第一次搜要等數(shù)據(jù)從網(wǎng)上拿,Overpass API 有限制,有時慢一點;已經(jīng)存好的城市快很多。頁面能放大縮小,方便看不同大小的路。
City-Roads本地開發(fā)
準備好Node.js 環(huán)境
克隆倉庫并安裝依賴:
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”),即刻生成道路網(wǎng)。
右側(cè)控制欄調(diào)顏色、線寬 → 點“Export”保存 PNG / SVG 。
適合前端/可視化/地圖愛好者可在此基礎(chǔ)上擴展交互、樣式與數(shù)據(jù)處理流程
City-Roads應(yīng)用場景
教課或科普:比較不同城市的路網(wǎng),比如方格和放射形,順便講最短路、連通這些概念。
做設(shè)計或素材:存高分辨率的 SVG 或 PNG,用來做海報、PPT、壁紙或印在杯子這類東西上。
看規(guī)劃和出行:從大面看道路密不密、骨架怎樣,幫著聊交通和空間結(jié)構(gòu)。
簡單分析:很快看出城市怎么擴展、路的等級和堵車地方的模樣。
城市規(guī)劃:比不同城市道路密不密、是方格還是放射形,幫著選地點和找交通問題。
做藝術(shù):把路網(wǎng)當(dāng)花紋,做海報、T 恤、手機壁紙;把幾個城市拼一起,看著很特別。
上課演示:地理課當(dāng)場拉不同城市,說布局差別;GIS 課拿來展示OpenStreetMap的數(shù)據(jù)樣子。
Github地址:https://github.com/anvaka/city-roads
提交您的產(chǎn)品
Ai應(yīng)用
Ai資訊
AI生圖
AI生視頻
開源AI應(yīng)用平臺








