脚本プランナー▸ 
AIアプリ 
AIニュース 
City-Roads：都市の道路ネットワークを描くための無料オープンソースツール
City-Roads：都市の道路ネットワークを描くための無料オープンソースツール紹介
City-Roadsとは？
City-Roads は、都市の道路網を描くための専用の無料オープンソースのツールです。OpenStreetMap のデータを利用し、ブラウザの WebGL で描画するため、別のソフトウェアをインストールする必要はなく、ウェブページを開いて都市名を入力するだけですべての道路を表示でき、PNG または SVG の高画質画像として保存できます。多くのデザイナーやプランナー、地図愛好家が、すばやく画像を作成したり、アートポスターを作ったり、都市を分析したりするために利用しています。
City-Roadsの主な特徴
高速レンダリング：数百万区間の道路を高速に表示でき、3,000以上の大都市のデータが事前にキャッシュされているため、開くとすぐに表示されます。
サーバー不要：すべてフロントエンドで完結しており、Vue と WebGL を使用しているため、コードのダウンロード後、ローカル環境で npm install と npm run dev を実行するだけです。
スタイルを自由にカスタマイズ可能：右側のパネルで道路の色、太さ、背景色を変更でき、地名の追加や削除も可能です。シンプルでテクノロジーチック、手描き風など、さまざまなスタイルを簡単に作成できます。
複数形式での保存：完成後、PNG または SVG を直接ダウンロードでき、レイアウト、印刷、ppt への挿入、SNS への投稿に便利です。
スクリプトでの変更が可能：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
