レイヤを追加する

更新日2026年7月30日

このガイドを終えると、プラグインから地図にレイヤを追加できるようになります（例：特定の座標にマーカーを配置する）。このガイドは、reearth.yml と拡張ファイルの基本的な構造を把握していることを前提としています。

レイヤを追加するには、レイヤのデータと表示方法を記述したレイヤオブジェクトを reearth.layers.add に渡します。このメソッドは新しいレイヤの ID を返します。この ID を保持しておくと、後でレイヤを変更・削除できます。

サンプルコード

この例では、東京の座標に赤いマーカーをひとつ追加します。

reearth.yml

id: add-layer-plugin
name: Add Layer Plugin
version: 1.0.0
extensions:
  - id: add-layer
    type: widget
    name: Add Layer

add-layer.js

const layerId = reearth.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    value: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Point",
            coordinates: [139.97422779688281, 35.74642872517698],
          },
        },
      ],
    },
  },
  marker: {
    style: "point",
    pointColor: "#ff0000",
    pointSize: 12,
  },
});

if (layerId) {
  console.log("レイヤを追加しました。ID:", layerId);
} else {
  console.log("レイヤの追加に失敗しました。");
}

reearth.camera.flyTo(
  {
    lat: 35.74642872517698,
    lng: 139.97422779688281,
    height: 200000,
  },
  { duration: 2 }
);

結果

ウィジェットがロードされると、カメラが東京に移動し、指定した座標に赤いマーカーが表示されます。

Re Visualizer の地図上の東京付近に追加された赤いマーカー

地図データ提供：OpenStreetMap

仕組み

reearth.layers.add にレイヤオブジェクトをひとつ渡します。オブジェクトには 3 つの重要な部分があります。

type: レイヤの種類。データを直接提供するレイヤには "simple" を使います。ほとんどの場合これで対応できます。
data: レイヤのソースデータを記述します。
- type: データ形式。この例では "geojson" を使用。他にも "czml"、"csv"、"3dtiles"、"kml" などがサポートされています。
- value: データ本体をインラインで指定。外部ソースからデータを読み込む場合は value の代わりに url を指定できます。
外観キー: Re:Earth Visualizer にデータのレンダリング方法を指示します。この例では marker に style: "point"、pointColor、pointSize を指定。他の外観キーには polyline、polygon、model などがあります。

reearth.layers.add は新しいレイヤの ID を文字列で返します。レイヤを追加できなかった場合は undefined を返します。後で reearth.layers.override でレイヤを変更したり、reearth.layers.delete で削除したりする場合は、この ID を保持しておいてください。

次のステップ

reearth.layers API リファレンス: レイヤオブジェクトの全項目、すべてのデータ型、外観オプション
reearth.camera API リファレンス: flyTo とその他のカメラ操作
レイヤにインフォボックスを設定する: ユーザーがレイヤをクリックしたときにフィーチャの詳細を表示する