例

プラグインプレイグラウンドには、すぐに動かせるサンプルプラグイン（プリセット）が用意されています。ブラウザ上で開いて実行し、そのまま編集して試せるため、動作する実例を見て学ぶのに最適です。

プラグインプレイグラウンド を開き、Plugins パネルからプリセットを選択してコードを読み込み、実行してください。例は Playground 内と同じカテゴリで分類しています。

各プリセットは、Share ボタンで共有リンクをコピーするか、Export ボタンで .zip をダウンロードできます。非常に大きいプリセットはリンク共有できず、エクスポートのみ対応します。

User Interface

reearth.ui および関連 API による、パネル、ナビゲーション、ポップアップ、ダイアログなどのカスタム UI 構築。

• Responsive Panel: ユーザーがリスト項目を追加／削除できるパネルウィジェット
• Sidebar: 検索バーとメニュー項目を持つ折りたたみ式サイドバー
• Header: ロゴとメニューリンクを備えた固定トップナビゲーションバー
• Popup: ポップアップウィンドウの開閉、再配置、メッセージング（reearth.popup も使用）
• Modal Window: モーダルダイアログの表示と、メッセージ受信によるクローズ（reearth.modal を使用）

Data

プラグイン、UI、Visualizer 間でのデータ受け渡し、およびクライアント側でのデータ保存。

• Messenger Between Extension and Visualizer: マップクリック座標を取得し、そこへカメラを飛ばす（reearth.viewer、reearth.extension を使用）
• Messenger Between Extensions: 2 つのウィジェット拡張間で双方向メッセージング（reearth.extension を使用）
• Extension Property: reearth.yml の schema で定義したプロパティを読み取り表示（reearth.extension を使用）
• Client Storage: ライト／ダークテーマの選択を保存し、次回も維持（reearth.data を使用）

Viewer & Scene Settings

reearth.viewer を使ったシーン環境の制御と、ビューア状態の取得。

• Enable Shadow Style: スイッチでシーンの影描画を切り替える
• Enable Terrain: Cesium World Terrain と depth testing を切り替える
• Take Screenshot: 現在の 3D ビューを PNG としてダウンロード
• Mouse Events: クリック地点の緯度・経度・高さを表示
• Get Current Location: デバイスの現在地を取得してカメラを移動（reearth.camera も使用）

Manage Layer

reearth.layers による、多様な形式のデータレイヤの追加と制御。

• Add GeoJSON: GeoJSON レイヤ（インライン／URL）＋ マーカー／ポリゴン／ポリライン
• Add Large GeoJSON: useAsResource フラグで大規模 GeoJSON を最適化
• Add CZML: CZML レイヤ（data URI／URL）
• Add KML: KML レイヤ（data URI／URL）
• Add CSV: URL の CSV からレイヤ追加（lat/lng 列をマーカーにマッピング）
• Add 3D Tiles: 3D Tiles レイヤ（基本色／PBR スタイル）
• Add Photogrammetric 3D Model: 写真測量 3D Tiles データセット
• Add Point Cloud: 3D Tiles 形式の点群データセット
• Add OSM 3D Tiles: 組み込み osm-buildings タイプによる OSM 建物表示
• Add WMS: リモートサーバーの WMS タイルレイヤ
• Add Google Photorealistic 3D Tiles: Google のフォトリアルタイル（Google Maps API キーが必要）
• Hide, Fly To, Delete Layer: レイヤ単位の表示／非表示、fly-to、削除操作（reearth.camera も使用）
• Override Layer Data: ポリゴンのジオメトリをその場で更新
• Show Selected Feature Information: 選択フィーチャーのプロパティを選択時に表示
• Add Infobox to Show All Properties: すべてのプロパティを表示するインフォボックス
• Add Infobox to Show Specific Properties: 指定したプロパティのみ表示するインフォボックス
• Add Infobox to Show Rich Blocks: テキスト／画像／Markdown／動画などのリッチブロックを持つインフォボックス

Manage Layer Style

共有プロパティから条件分岐、フィーチャーベースのルールまで、レイヤスタイルの適用。

• Layer Styling Examples: GeoJSON / CZML / KML / CSV に同じスタイリングを適用
• Feature Style 3D Tiles: 3D Tiles の color / PBR / shadows / highlight / wireframe
• Feature Style 3D Model: タイムライン駆動のアニメーション GLTF モデルのスタイリング（reearth.timeline も使用）
• Override Style: 高さに応じた 2 種のカラーグラデーションを切り替える
• Style With Condition: 高さ範囲に応じて色を割り当てる条件式
• Filter Features by Style: プロパティ条件でマーカーを表示／非表示

Camera

reearth.camera によるカメラ移動と制御。

• Zoom In Out: ズームイン／ズームアウトボタン
• Camera Rotation: ターゲットの周りにカメラを連続回転
• Camera Position: ライブなカメラ位置を追跡し、手動で新しい値を適用

Timeline

reearth.timeline による時間再生制御と、時間ベースのアニメーション。

• Playback Control: play/pause、速度、range-type の制御＋ライブ時計
• Time Driven Features: 時間とともに押し出し高さが変わる CZML ポリゴン（reearth.layers も使用）
• Time Driven Path: 時間サンプル位置により 3D 列車モデルをルートに沿ってアニメーション（reearth.layers も使用）