レイヤにインフォボックスを設定する

このガイドを終えると、レイヤにインフォボックスを付与できるようになります。ユーザーがそのレイヤのフィーチャをクリックすると、フィーチャの情報を表示するパネルが開きます。このガイドは、レイヤの追加に慣れていることを前提としています（レイヤを追加するを参照）。

インフォボックスはレイヤ自体の infobox プロパティとして設定します。インフォボックスにひとつ以上のブロックを追加すると、ユーザーがそのレイヤのフィーチャを選択したときに Re:Earth Visualizer がそれらを表示します。

サンプルコード

この例では、いくつかのプロパティを持つマーカーをひとつ追加し、フィーチャが選択されたときにそのすべてのプロパティを自動で表示するインフォボックスを付与します。

reearth.yml

id: infobox-demo-plugin
name: Infobox Demo Plugin
version: 1.0.0
extensions:
  - id: infobox-demo
    type: widget
    name: Infobox Demo

infobox-demo.js

reearth.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    value: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {
            name: "東京タワー",
            height: "333 m",
            category: "ランドマーク",
          },
          geometry: {
            type: "Point",
            coordinates: [139.7454, 35.6586],
          },
        },
      ],
    },
  },
  infobox: {
    blocks: [
      {
        pluginId: "reearth",
        extensionId: "propertyInfoboxBetaBlock",
      },
    ],
  },
  marker: {
    style: "point",
    pointColor: "#ff0000",
    pointSize: 12,
  },
});

reearth.camera.setView({
  lat: 35.6586,
  lng: 139.7454,
  height: 80000,
  heading: 0,
  pitch: -1.5708,
  roll: 0,
});

結果

東京タワーの位置にマーカーが表示されます。クリックするとインフォボックスが開き、フィーチャのプロパティ（名前、高さ、カテゴリ）が一覧表示されます。

地図データ提供：OpenStreetMap

仕組み

インフォボックスはレイヤ自体に設定します。reearth.layers.add に渡す infobox プロパティを通じて定義します。

infobox: {
  blocks: [
    { pluginId: "reearth", extensionId: "propertyInfoboxBetaBlock" }
  ]
}

• blocks: インフォボックスに表示するブロックのリスト（順番通り）。
  • pluginId と extensionId: 表示するブロックを識別します。ここでは reearth / propertyInfoboxBetaBlock という組み込みブロックを使用しており、選択されたフィーチャのすべてのプロパティを自動で一覧表示します。ブロックのコードを書かなくても完全なプロパティ表示が得られます。

インフォボックスに表示されるプロパティは、GeoJSON の各フィーチャの properties オブジェクトから取得されます。ここでは name、height、category です。プロパティを追加するとインフォボックスにも表示されます。

インフォボックスはレイヤに属しているため、ユーザーがそのレイヤのフィーチャを選択したときだけ表示されます。フィーチャをクリックするまでは何も表示されません。

次のステップ

• レイヤを追加する: このガイドの土台となるレイヤの基本
• reearth.layers API リファレンス: インフォボックスとブロックのオプションを含む完全なレイヤオブジェクト
• 拡張タイプの違い: InfoboxBlock 拡張タイプとここで作ったものの関係