mcpField
M
mapstage

mapstage

github.com/hopechen067デザイン・UI49547 回インストール3 日前に更新
リポジトリ

mapstage について

mapstage は、MapStage のシーンを調整し、本番レンダラーへ設定を移すためのエージェント向けスキルです。投影、地形、配色、集落の階層、JSON 出力を扱います。

主な機能

  1. 01地図と地球儀の投影調整
  2. 02衛星画像と地形表示の切り替え
  3. 03領域分離と CSS 配色調整
  4. 04集落階層の設定
  5. 05version 3 JSON の出力と移行

活用シーン

  1. 01アプリ用地図シーンの調整
  2. 02カメラとスタイルを確定してプリセットを出力
  3. 03チューナー設定を本番描画で再利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hopechen067/mapstage --skill mapstage

インストール後、Claude Code で/mapstageを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
city-tier-schema.md
tested-config.md
tuner-workflow.md
water-overlay.md
参数列表说明.md
schemas/
map-preset.schema.json
sample-sites.schema.json
tuner/
.nojekyll
index.html
map-tiles.config.example.js
map-tiles.config.js
preset-antique-default.json
README.md
vector-layers.html
tuner/assets/
han-city-3d.js
isolate-workbench.js
map-fx.js
polar-ice.geojson
region-isolate.js
sample-sites.json
site-nav.js
terrain-island.js
vector-paint.js
water-pack.json
tuner/presets/
antique-default.json
tuner/scripts/
patch-china-boundaries.mjs
patch-maritime-islands.mjs
patch-zangnan-region.py
tuner/vendor/
maplibre-contour.min.js

詳細

MapStage

MapStage のシーンを構築または調整するときに、このスキルを使用します。対象は、マップ／地球儀の投影法、衛星画像、段彩起伏図、Mapterhorn の地形、地域の分離表示、CSS カラーグレーディング、JSON エクスポートです。

使用する場面

  • MapStage のライブチューナーが必要な場合（マップと地球儀、衛星画像と起伏図、分離表示）。
  • ペイント／CSS／カメラを固定してから、JSON を別のホストにエクスポートする場合。
  • 階層化された集落（capital / large / medium / small / pass / station / ordos）が必要な場合。

チューナーページを最終レンダリングホストとして使用しないでください。

モード

モード目的
プロダクションスタックアプリに MapStage を埋め込みます。衛星画像／ラスター（任意）、Mapterhorn DEM（encoding: 'terrarium'）、陰影起伏図、OpenFreeMap のベクター水域、CSS フィルター、都市の押し出し表示を使用します。エクスポートした JSON から見た目を設定します。
チューナースライダー、投影法、分離表示、プリセットの読み込み／エクスポートに対応した、tuner/ 配下の HTTP ページ（または公開デモ）です。

ワークフロー

  1. チューナーを開きます。公開デモ https://hopechen067.github.io/MapStage/ または cd tuner && python -m http.server を実行し、ターミナルに表示されたローカル URL を開きます。
  2. タイル：デフォルトは EOX Sentinel-2 cloudless（オン）+ Mapterhorn（tuner/map-tiles.config.js）です。map-tiles.config.local.js で上書きします。このファイルは gitignore 対象です。
  3. デフォルトのプリセット tuner/preset-antique-default.json（tuner/presets/antique-default.json と同じ）を適用します。スキーマは version 3 です。
  4. 見た目が決まるまで、投影法／衛星画像／起伏図／分離表示／CSS／都市を調整します。
  5. JSON をエクスポートします（コピーまたはダウンロード）。version: 3 と ui.projection、ui.showSatellite、ui.showRelief、ui.showCssFilter、isolate を確認します。
  6. これらのフィールドをプロダクションの MapStage シーンに移行します（参考資料を参照）。
  7. プロダクションでは、カメラに jumpTo を使用し、idle を待ちます。必要に応じてタイルを事前にキャッシュします。記録するフレームでは easeTo / flyTo を使用しないでください。
  8. DEM には必ず encoding: 'terrarium' を設定します。エンコーディングが正しくないと、陰影起伏図／地形が正しく表示されません。
  9. 最終フレームはプロダクションホストからレンダリングします。チューナー UI からはレンダリングしないでください。

厳守事項

  • タイルはバンドルされません — MapStage は、設定済みの URL からのみ、実行時に DEM とベースマップを取得します。
  • 使用が許可されたベースマップのエンドポイントのみを使用してください — デフォルトは公開デモ用タイル（EOX）です。必要に応じて設定で切り替えます。
  • 地形ソースには encoding: 'terrarium' を指定してください — 必須です。
  • 記録するプロダクションパスでは easeTo / flyTo を使用しないでください。jumpTo + idle を優先します。
  • 最終レンダリングをチューナーでホストしないでください。
  • 公開チューナーの水域には、OpenFreeMap / OpenMapTiles のベクターレイヤー（water / waterway）を使用します。エクスポートされる ui.showWater は常に false です（以前の GeoJSON オーバーレイはオフです）。tuner/assets/water-data.js が存在するとは想定しないでください。また、コミットもしないでください。

リポジトリとスキル

この GitHub リポジトリを git clone すると、プロジェクト全体が取得されます。エージェントスキルは mapstage/ のみです。このフォルダーは npx skills add hopechen067/MapStage --skill mapstage -g または gh skill install hopechen067/MapStage mapstage --scope user でインストールするか、ホストのスキルディレクトリにコピーして再読み込みします。エージェントは、クローンしたリポジトリから mapstage/SKILL.md を自動検出しません。

参考資料

エージェント

表示名／デフォルトのプロンプトについては、agents/openai.yaml を参照してください。

コメント

Markdown 対応