Repolode
anvaka

anvaka/city-roads

OpenStreetMapのデータを使い、選んだ都市の全道路をブラウザー上で地図風に一括描画します。

スター
9,768
フォーク
751
未解決の Issue
57
最終コミット
10 日前

これは何?

city-roadsは、都市の道路をすべて1枚のキャンバスに描画します。都市名を入力すると、Overpass API経由でOpenStreetMapから道路セグメントを取得し、スタイルを変更してアート作品として書き出せる、密度の高い線画として表示します。

ダウンロードを高速化するため、人口10万人を超える約3,000都市のキャッシュを同梱しており、データはシンプルなprotobuf形式で保存されています。都市名の検索にはNominatimを使い、キャッシュに都市がない場合はOverpassにフォールバックする前にキャッシュを確認します。

また、表示をベースに独自の描画をスクリプトで作成できるscene APIも提供しています。描画はブラウザーとGPUのメモリ容量に制限されるため、州全体のような非常に広い地域ではページがクラッシュすることがあります。

主な機能

  • 01OpenStreetMapのデータを使い、都市の全道路を1つのビジュアライゼーションに描画
  • 02大都市約3,000件をキャッシュし、データの読み込みを高速化
  • 03Nominatim検索で都市名を特定
  • 04独自の描画をスクリプトで作成できるscene APIを提供

ユースケース

  • 抽象的な都市地図のポスターや壁面アートの制作
  • 都市の街路構成を視覚的に探索
  • scene APIを使った独自の地図ビジュアライゼーションの構築

クイックスタート

  1. 1

    依存関係をインストールする

    npm install
  2. 2

    ホットリロード対応のローカル開発サーバーを起動する

    npm run dev

使う前に知っておきたいこと

  • 非常に広い範囲をレンダリングすると、メモリや GPU に依存するため、ブラウザーがクラッシュしたり、性能の低いデバイスでは動作が遅くなったりすることがあります。
  • 米国の州全体など、道路が数百万本ある地域を選択すると、ページがクラッシュすることがあります。

トピック

よくある質問

city-roads とは?
OpenStreetMapのデータを使い、選んだ都市の全道路をブラウザー上で地図風に一括描画します。 city-roadsは、都市の道路をすべて1枚のキャンバスに描画します。都市名を入力すると、Overpass API経由でOpenStreetMapから道路セグメントを取得し、スタイルを変更してアート作品として書き出せる、密度の高い線画として表示します。
city-roads は無料で使えますか?ライセンスは?
city-roads は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
city-roads は今もメンテナンスされていますか?
活発にメンテナンス中。city-roads の最終コミットは 2026年10月10日 です。
city-roads は何に使えますか?
抽象的な都市地図のポスターや壁面アートの制作 都市の街路構成を視覚的に探索 scene APIを使った独自の地図ビジュアライゼーションの構築
city-roads のインストール方法は?
依存関係をインストールする: npm install ホットリロード対応のローカル開発サーバーを起動する: npm run dev
city-roads はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/anvaka/city-roads

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト