📋 概要
Re:Earth 向け統合プラグイン「geo_suite」の開発基盤です。XYZ タイル管理やレイヤ一覧 UI、Terrain/Shadow トグル、HTMLによるインフォメーションなど、Visualizer プラグインとして必要な機能を提供します。
レイヤの管理はインスペクターにより行われ、複数のレイヤを管理可能です。
🚀 サンプルサイトを見る✨ 主な機能
⚙️ インスペクター一括設定
Inspector の一括設定で行単位(例: xyz: / info: / cam:)の設定が可能。似た構成の複数プロジェクトへの導入と設定作業が飛躍的に楽になります。
🗺️ ベースマップ
Inspectorの base: または xyz: 行でベースマップを一括指定できます。UI上部のドロップダウンから一つだけ選択してアクティブ化でき、ユーザーレイヤ一覧には表示されません。
🔧 システムレイヤ制御
Re:Earth側で登録済みのシステムレイヤ(プリセットレイヤ)も、Inspectorで名前を指定して表示/非表示を初期制御できます。
🗺️ レイヤー追加・管理
XYZタイル、3D Tiles、GeoJSONをInspectorからURL指定で簡単に追加・管理できます。
📑 レイヤー一覧UI
読み込まれたレイヤーを視覚的に管理。表示/非表示の切り替えも直感的に操作できます。
📂 レイヤグループ化
/ (通常) や // (排他) を使ってレイヤを階層化。ラジオボタンのような排他制御も可能です。
詳細仕様書を見る →
🖼️ 凡例表示
legend: 行で画像URLを指定。Legendタブに凡例画像を一覧表示できます。
🔎 SEARCH(検索)
住所・施設名で検索して該当地点にワンクリックでFlyToできます。検索は Yahoo! ジオコーダ API(サーバー経由のプロキシ)を利用可能です。Inspector に yahooAppId: YOUR_APPID を設定してください。
📷 カメラプリセット / 現在位置
登録した位置や、現在位置へワンクリックでFlyTo。ターゲットスコープで場所を確認できます。
ℹ️ Info表示
外部HTMLをInfoタブに表示。プロジェクト説明やドキュメントを埋め込めます。
⛰️ Terrain/Shadow
地形表示と影表示のON/OFFをワンクリックで切り替え可能です。
🧭 ナビゲーション
コンパスでカメラ方位を表示・クリックで北にリセット。Visualizerと同期します。2Dはトップダウン表示に切替えをサポート。
🔗 プラグインのインストール
📥 Step 1: プラグインをインストール
- Re:Earth Visualizer を開き、画面右上の「プラグイン」アイコンをクリック
- 「個人インストール済み」タブを選択
- 下記のリポジトリURLを入力
- インストール完了!
⚙️ Step 2: 設定方法
Inspector(歯車アイコン)の「一括設定」を開き、「設定テキスト」に以下の形式で行ごとに入力してください。
layer: 地理院タイル 標準地図 | off
xyz: OpenStreetMap | https://tile.openstreetmap.org/{z}/{x}/{y}.png
base: OpenStreetMap | https://tile.openstreetmap.org/{z}/{x}/{y}.png | OpenStreetMap contributors
3dtiles: 東京都/千代田区(建築物LOD1) | https://assets.cms.plateau.reearth.io/assets/0e/e5948a-e95c-4e31-be85-1f8c066ed996/13101_chiyoda-ku_pref_2023_citygml_1_op_bldg_3dtiles_13101_chiyoda-ku_lod1/tileset.json | off
geojson: 東京都/行政区域 | https://assets.cms.reearth.io/assets/ef/b1d062-e44b-4a19-8ebe-5fafeeba05f2/%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9F%9F.geojson
background: #ffffff
info: https://re-earth-geo-suite.vercel.app/ryu.html
cam:東京駅|35.653108|139.761449|h=2200.6|p=-30
legend: 凡例|https://re-earth-geo-suite.vercel.app/image/legend_sample.png
設定行は順不同です。背景色は background: で指定します。
- layer: 既存のシステムレイヤ名を指定し、
|offで非表示(|onで表示)に設定できます(例:layer: 地理院タイル 標準地図 | off)。 - xyz: 追加レイヤ (XYZタイル) です。タイトルとURLを `|` で区切ります。末尾に `|off` を付けると非表示で追加されます。
- base: ベースマップ用レイヤです。UI上部のドロップダウンに追加され、選択した1つだけが有効化されます。
- 3dtiles: 3D Tilesレイヤです。
- geojson: GeoJSONレイヤです。
- info: Infoタブに表示するWebページのURLを指定します。
- cam: カメラプリセットを指定します。
cam:タイトル|緯度|経度が最小形式で、オプションとして|h=高度m|d=方位°|p=傾き°を追加できます。 - legend: 凡例画像のURLを指定します。
📦 ZIPファイル(配布用)
安定版の配布用 ZIP はローカルの以下フォルダに配置しています。Marketplace が利用可能になり次第、Marketplace での配布も開始します。
https://github.com/yamamoto-ryuzo/ReEarth_GeoSuite/tree/main/releases
ローカルにある ZIP を Re:Earth のプラグインインポート機能から指定してインストールしてください。
📦 ZIPファイル(開発版)
https://re-earth-geo-suite.vercel.app/artifacts/geo_suite.zip
※ こちらは Vercel による開発版 ZIP です。開発用の配布物であり、本番リリースとは別です。
📖 使い方
👁️ レイヤーの表示/非表示切替
- 左側のプラグインUI内で、各レイヤーの横にチェックボックスがあります。
- チェックボックスをON/OFFすることで、レイヤーの表示/非表示を切り替えられます。
🧩 グループルール
レイヤのグループ化はインスペクター内の区切り文字で指定します。ルールは以下の通りです。
/:一括・折りたたみ — グループ内をまとめてON/OFF。初期表示は折りたたみ。//:排他・折りたたみ — グループ内は排他(ラジオ)で、同時に1つのみON。初期表示は折りたたみ。バックスラッシュ:\:一括・展開 — グループ内をまとめてON/OFF。初期表示は展開(開いた状態)。ダブルバックスラッシュ:\\:排他・展開 — グループ内は排他(ラジオ)で、初期表示は展開。
補足: 単一の / と \ は通常グループとして同一視されますが、二重区切りの // と \\ は排他グループとして区別されます。バックスラッシュ由来の区切りは展開優先となります。
詳細はドキュメントを参照してください: layer-grouping-specification.md
Inspector での初期表示指定
Inspector で初期表示を指定するには、該当行のパイプ(|)で区切った任意の位置に ON / OFF を追記してください(大文字小文字は区別しません)。
xyz: Tokyo Basemap | https://tile.example/{z}/{x}/{y}.png | OFF
geojson: 避難所 | https://example.com/shelters.geojson | ON
3dtiles: 建物LOD | https://example.com/tileset.json | OFF
補足: 現在 visible=true/visible=false 形式は自動的にパースされません。必要であれば対応を追加できますので指示ください。
⚠️ 注意事項
プラグインはレイヤ追加時に一旦 visible: true で追加し、OFF 指定のあるレイヤは UI 側で短時間後に非表示にする仕組みです(Extension 側での遅延タイマーが利用できないための回避)。
システムレイヤはプラグインにて状態確認が制御不可であるため、基本的にはシステムレイヤ表示をONにし、制御は必ず本プラグインで行ってください。
⚠️ Google Photorealistic 3D Tiles 利用時の注意
Google Photorealistic 3D Tiles を使用している場合、追加したユーザーレイヤ(XYZタイルなど)が表示されないことがあります。
これは 3D Tiles が立体物として地面の上に描画され、地表に張り付くユーザーレイヤを覆い隠してしまうためです。
Re:Earth のシーン設定で「地下を隠す」などの深度テスト(Depth Test)設定を変更することで表示される場合がありますが、3Dモデルの描画順序に依存します。
🛠️ 開発について
本プロジェクトは Vercel を利用した開発・配信フローを採用しています。ここで公開しているサイトは 開発版(Developer Preview) として自動デプロイされています。開発版はテストや動作確認を目的としており、本番向けの安定版リリースとは別扱いです。ZIP や公開URLは予告なく更新・上書きされる可能性があります。
自動デプロイ
このリポジトリは Vercel と連携しています。`main` ブランチに push すると Vercel が自動でビルドを実行し、公開用ディレクトリ(`dist/`)をデプロイします。ビルドの概要は次の通りです:
- `npm ci` による依存のインストール(`package-lock.json` を使用)
- `npm run build`(`package.json` の `build`)で TypeScript をコンパイルして `dist/` を生成
- 生成された `dist/` の中身が Vercel により公開される(`vercel.json` の `distDir`= `dist`)
変更を反映するには通常この手順で十分です:
git add .
git commit -m "update plugin"
git push origin main
# → Vercel が自動的にビルド&デプロイします
デプロイで 404 やエラーが出る場合は Vercel のデプロイログを確認してください。特に注目する箇所:
- `npm ci`(依存の取得)
- `npm run build` / `tsc`(TypeScript のビルド)
- `dist/` の生成と静的ファイルのコピー
必要なら私がローカルでビルドして `dist/` の中身や ZIP(`dist/artifacts/geo_suite.zip`)を作成できます。また、デプロイを即時に反映したい場合は Vercel ダッシュボードの「Redeploy」や `vercel` CLI を使って手動デプロイしてください。