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怎么用

1. 打開 anvaka.github.io/city-roads

2. 在搜索框輸城市名，比如北京、上海、New York，等它加載完。
   

3. 在頁面改道路和背景的顏色，加上城市名字。

4. 點下載，選 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