reearth.layers

reearth.layers 名前空間は、reearth シーン内のレイヤを管理・操作するためのメソッド群を提供します。プラグイン開発者はこれらのメソッドを使用して、レイヤのプログラム的な追加・検索・変更・削除を行うことができます。

プロパティ

layers

このプロパティは、reearth シーンに現在存在するすべてのレイヤのリストを提供します。プラグイン開発者はこれを使用して、必要に応じてレイヤへのアクセスや操作を行うことができます。このプロパティは LazyLayer オブジェクトの配列を返し、各オブジェクトはシーン内の個別のレイヤを表します。

構文

reearth.layers.layers: LazyLayer[];

戻り値

Type LazyLayer[]

各要素がシーン内の個別のレイヤを表す LazyLayer オブジェクトの配列です。

ノート

LazyLayer オブジェクトはレイヤの軽量な表現形式です。プロパティへのアクセスは必要に応じて明示的に行う必要があります。 LazyLayer 型の詳細については、LazyLayer 型 セクションを参照してください。

overridden

これは省略可能なプロパティで、reearth シーン内でプロパティがオーバーライドされたレイヤを提供します。このメソッドを使用することで、レイヤのオーバーライド状態を確認できます。ユーザー操作、アプリケーション状態の変化、または外部データの更新に応じてレイヤプロパティを調整する必要がある場合に特に有用です。

構文

reearth.layers.overridden: OverriddenLayer[];

戻り値

Type Omit<Layer, "type" | "children">

Layer 型定義から type と children を除いた型です。

使用例

// Check if there are any overridden properties defined
if (reearth.layers.overridden) {
  console.log("Overridden properties are defined.");

  // Iterate through the overridden properties and log each one
  for (const layer of reearth.layers.overridden) {
    console.log(`Layer ID: ${layer.id}, Overridden Properties:`, layer);
  }
} else {
  console.log("No overridden properties are defined.");
}

selected

これは reearth プロジェクト内で現在選択されているレイヤを表します。レイヤが選択されている場合は ComputedLayer オブジェクトを保持し、選択されていない場合は undefined となる省略可能なプロパティです。このプロパティを使用することで、選択中のレイヤの詳細に直接アクセスでき、特定のレイヤデータの照会、プロパティの変更、または UI コンポーネントへの追加情報の表示など、ユーザーの選択に依存した操作を容易に行うことができます。

構文

reearth.layers.selected?: computedLayer;

戻り値

Type ComputedLayer

すべての処理が完了した後に得られるレイヤで、元の地理データと処理済みの地理データの両方、および適用・評価済みのスタイルと状態を含みます。

ノート

ComputedLayer オブジェクトはレイヤの軽量な表現形式です。プロパティへのアクセスは必要に応じて明示的に行う必要があります。 ComputedLayer 型の詳細については、ComputedLayer 型 セクションを参照してください。

使用例

// Check if there is a selected layer and log its details
if (reearth.layers.selected) {
  console.log("Selected Layer ID:", reearth.layers.selected.id);
  console.log("Selected Layer Title:", reearth.layers.selected.layer?.title);
} else {
  console.log("No layer is currently selected.");
}

selectedFeature

これは reearth プロジェクト内で現在選択されているフィーチャーを表します。フィーチャーが選択されている場合は feature オブジェクトを保持し、選択されていない場合は undefined となる省略可能なプロパティです。このプロパティを使用することで、選択中のフィーチャーの詳細に直接アクセスでき、特定のフィーチャーデータの照会やプラグイン拡張への追加情報の表示など、ユーザーの選択に依存した操作を容易に行うことができます。

構文

reearth.layers.selectedFeature?: computedFeature;

戻り値

Type ComputedFeature

すべての最終評価済みプロパティとスタイルが適用された、単一の地理的フィーチャー（点、線、ポリゴン等）です。

ノート

ComputedFeature 型の詳細については、ComputedFeature 型 セクションを参照してください。

使用例

// Check if there is a selected feature and log its details
if (reearth.layers.selectedFeature) {
  console.log("Selected Feature ID:", reearth.layers.selectedFeature.id);
} else {
  console.log("No Feature is currently selected.");
}

メソッド

add

このメソッドは、reearth シーンに新しいレイヤを追加するために使用します。画像、データ表現、インタラクティブウィジェットなどの追加コンテンツレイヤでシーンを動的に拡張するために欠かせないメソッドです。主な引数として Layer オブジェクトを受け取り、追加するレイヤの特性とプロパティを定義します。

構文

reearth.layers.add: (layer: Layer) => string | undefined;

パラメータ

layer

Type: Layer

レイヤの作成と管理に必要なすべてのデータとメタデータを含むオブジェクトです。シーンに追加するレイヤの特性とプロパティを定義します。

ノート

Layer 型およびレイヤアピアランス型の詳細については、Layer 型 および レイヤアピアランス型 セクションを参照してください。

戻り値

Type string | undefined

操作が成功した場合、新しく追加されたレイヤの一意の識別子 id を返します。この識別子は以降の操作や照会に使用できます。操作が失敗した場合は undefined を返します。

使用例

マーカーの追加

const newLayerId = reearth.layers.add({
type: "simple",
data: {
type: "geojson",
value: {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        coordinates: [139.97422779688281, 35.74642872517698],
        type: "Point",
      },
    },
  ],
},
},
// marker property is required to indicate that the layer needs a marker appearance
marker: {},
});

if (newLayerId) {
console.log("Layer added successfully with ID:", newLayerId);
} else {
console.log("Failed to add layer.");
}

ポリラインの追加

const newLayerId = reearth.layers.add({
type: "simple",
data: {
type: "geojson",
value: {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        coordinates: [
          [139.93007825346956, 35.81332779614391],
          [139.8105822019014, 35.730789521095986],
        ],
        type: "LineString",
      },
    },
  ],
},
},
// polyline property is required to indicate that the layer needs a polyline appearance
polyline: {},
});

if (newLayerId) {
console.log("Layer added successfully with ID:", newLayerId);
} else {
console.log("Failed to add layer.");
}

ポリゴンの追加

const newLayerId = reearth.layers.add({
type: "simple",
data: {
type: "geojson",
value: {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        coordinates: [
          [
            [139.56560369329821, 35.859787461762906],
            [139.56560369329821, 35.586320662892106],
            [139.73648312259508, 35.586320662892106],
            [139.73648312259508, 35.859787461762906],
            [139.56560369329821, 35.859787461762906],
          ],
        ],
        type: "Polygon",
      },
    },
  ],
},
},
// polygon property is required to indicate that the layer needs a polygon appearance
polygon: {},
});

if (newLayerId) {
console.log("Layer added successfully with ID:", newLayerId);
} else {
console.log("Failed to add layer.");
}

3D モデルの追加

const model3D = {
type: "simple",
data: {
type: "geojson",
value: {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [139.6917, 35.6895],
  },
},
},
model: {
url: "https://api.visualizer.test.reearth.dev/assets/01j90myth0wy2kq5agry8rh4fd.gltf", // 'Re:Earth' logo from asset
heightReference: "relative",
heading: 270,
pitch: 0,
roll: 0,
scale: 100,
silhouette: true,
silhouetteColor: "red",
},
};

reearth.layers.add(model3D);

3dtiles の追加

// Define a 3D tile. This is a 3D tile of Chiyoda yard building in Tokyo. The co-ordinates are Latitude: 35.69393005 Longitude: 139.75371138.
const tile3d = {
type: "simple",
data: {
type: "3dtiles",
url: "https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13101_chiyoda-ku/notexture/tileset.json",
},
"3dtiles": {
show: true,
color: {
  expression: {
    conditions: [
      ["${_zmax} > 100", "color('red')"],
      ["true", "color('green')"],
    ],
  },
},
edgeWidth: 10,
edgeColor: "#ffffff",
selectedFeatureColor: "blue",
},
};

reearth.layers.add(tile3d);

find

このメソッドは、カスタム検索関数を適用して Reearth シーン内のレイヤを効率的に検索します。特定の属性、プロパティ、または条件など、動的に定義された基準を満たすレイヤを特定する際に有用です。各レイヤを評価するコールバック関数を受け取り、指定された条件を満たすレイヤに対して true を返します。これにより、シーンの特定部分を対象とした精密な操作や分析が可能となり、レイヤ管理の柔軟性と制御性が向上します。

構文

reearth.layers.find: (
  fn: (layer: LazyLayer, index: number) => boolean,
) => LazyLayer | undefined

パラメータ

fn

Type: (layer: LazyLayer, index: number) => boolean

シーン内の各レイヤを評価するためのコールバック関数です。この関数は以下の引数を受け取ります。

• layer: LazyLayer: レイヤのすべてのデータを含むオブジェクト。
• index: number: 現在のレイヤのインデックス。

戻り値

Type LazyLayer | undefined

指定されたテスト関数を満たす最初の LazyLayer オブジェクトを返します。条件を満たすレイヤが存在しない場合は undefined を返します。

使用例

//1. Define a search function to find the first visible layer
const searchFunction = (layer, index) => {
  return layer.isVisible === true;
};

// Use the find method to locate the first visible layer
const foundLayer = reearth.layers.find(searchFunction);

// Log the result or handle the case where no layer is found
if (foundLayer) {
  console.log(`Found visible layer with ID: ${foundLayer.id}`);
} else {
  console.log("No visible layer found.");
}

//2. Search for the first layer that is a 3D Tiles with the title "Re:Earth" and assign it to a variable.
reearth.layers.find(
  (layer) => layer.data.type === "3dtiles" && layer.title === "Re:Earth"
);

findAll

このメソッドは、プロジェクト内のすべてのレイヤを対象に包括的な検索を実行し、指定された条件に一致するレイヤの配列を返します。プロジェクト内の各レイヤに適用するコールバック関数を受け取ります。

構文

reearth.layers.findAll: (layer: LazyLayer, index: number) => boolean) => LazyLayer[]

パラメータ

layer

Type LazyLayer

レイヤの作成と管理に必要なすべてのデータとメタデータを含むオブジェクトです。

index

Type number

階層内における現在のレイヤのインデックスです。

戻り値

Type LazyLayer[]

コールバック関数で指定された条件を満たす LazyLayer オブジェクトの配列を返します。条件を満たすレイヤが存在しない場合は空の配列を返します。

使用例

//1. Define a search function to find all layers with a specific visibility setting
const searchVisibleLayers = (layer) => layer.isVisible;

// Use the findAll method to get all visible layers
const visibleLayers = reearth.layers.findAll(searchVisibleLayers);

// Output the IDs of the found layers
console.log(
  "Visible layers found:",
  visibleLayers.map((layer) => layer.id)
);

//2. Filter out layers where the type is "GeoJSON" and the title is exactly "sample".
let filteredLayers = reearth.layers.findAll(
  (layer) => layer.data.type === "geojson" && layer.title === "sample"
);

// Log the array of filtered layers to the console. This array contains all layers that meet the specified conditions.
console.log("filteredLayers: ", filteredLayers);

findById

このメソッドは、一意の識別子（ID）に基づいて特定のレイヤオブジェクトを取得するために設計されています。ID が既知のレイヤに直接アクセスする際に欠かせないメソッドで、プロパティの編集、表示のオン/オフ切り替え、またはレイヤ固有データの分析などを効率的かつ精密に行うことができます。レイヤ階層全体を検索・反復する必要なく、個別のレイヤへの直接アクセスを可能にします。検索対象のレイヤ ID を表す単一の文字列パラメータを受け取ります。

構文

reearth.layers.findById: (layerId: string) => LazyLayer | undefined;

パラメータ

layerId

Type string

シーン内で検索対象となるレイヤの一意の識別子です。

戻り値

Type LazyLayer | undefined

指定された ID を持つレイヤが見つかった場合、その LazyLayer オブジェクトを返します。一致するレイヤが存在しない場合は undefined を返します。

使用例

// Define the layer ID you are searching for
const targetLayerId = "01j1rx8xhxsk2wdydew3m8hr6q";

// Attempt to find the layer by its ID
const layer = reearth.layers.findById(targetLayerId);

// Check if the layer was found and log the result or handle it accordingly
if (layer) {
  console.log(`Layer found: ${layer.title}`);
} else {
  console.log("No layer found with the specified ID:", targetLayerId);
}

findByIds

このメソッドは、レイヤ ID の配列に基づいて reearth シーンから複数のレイヤを同時に取得します。プロパティの一括更新、エフェクトの適用、グループ表示の管理など、複数の特定レイヤを同時に操作する必要があるアプリケーションに特に有用です。文字列引数のスプレッドを受け取り（各引数がレイヤ ID を表します）、各要素が Layer オブジェクトまたは undefined に対応する配列を返します。

構文

reearth.layers.findByIds: (...layerIds: string[]) => (LazyLayer | undefined)[];

パラメータ

...layerIds

Type ...string[]

取得するレイヤの一意の識別子を表すレイヤ ID の配列です。1つまたは複数の ID を柔軟に入力できます。

使用時は配列を複数の引数としてスプレッドする必要があります。

戻り値

Type (LazyLayer | undefined)[]

各入力 ID に対応する LazyLayer オブジェクトまたは undefined を含む配列を返します。シーン内に ID に対応するレイヤが存在するかどうかに応じて値が決まります。返される配列の各位置は入力リストの ID の位置に直接対応しており、順序の一貫性が保たれます。指定した ID を持つレイヤが存在しない場合、その位置に undefined が返されます。

使用例

// Define an array of layer IDs to be searched
const layerIds = ["01j1rx8xhxsk2wdydew3m8hr6q", "01j90ed9m6bxagb6bvfg4sk49q"];

// Retrieve the layers by their IDs
const layers = reearth.layers.findByIds(...layerIds);

// Process the results, handling both found and not found cases
layers?.forEach((layer, index) => {
  if (layer) {
    console.log(`Layer found: ID = ${layer.id}, Title = ${layer.title}`);
  } else {
    console.log(`No layer found for ID: ${layerIds[index]}`);
  }
});

findFeatureById

このメソッドは、フィーチャー ID に関連するフィーチャーを取得する手段を提供します。レイヤ ID とフィーチャー ID を受け取り、指定されたレイヤ ID とフィーチャー ID に一致する Feature オブジェクトを返します。

構文

reearth.layers.findFeatureById: (layerId: string, featureId: string) => Feature | undefined;

パラメータ

layerId

Type string

シーン内で検索対象となるレイヤの一意の識別子です。

featureId

Type string

レイヤ内のフィーチャーの一意の識別子です。

戻り値

Type Feature | undefined

指定されたレイヤ内で指定された ID を持つフィーチャーが見つかった場合、その Feature オブジェクトを返します。一致するフィーチャーが存在しない場合は undefined を返します。

ノート

Feature 型の詳細については、Feature 型 セクションを参照してください。

使用例

// Define the layer ID and feature ID you are searching for
const targetLayerId = "01j90ed9m6bxagb6bvfg4sk49q";
const targetFeatureId = "6167fcb5-9564-4c8e-a4d3-d0b419f54ec6";

// Attempt to find the layer by its ID
const feature = reearth.layers.findFeatureById(targetLayerId, targetFeatureId);

// Check if the feature was found and log the result or handle it accordingly
if (feature) {
  console.log(`feature found: ${feature.type}`);
} else {
  console.log("No feature found with the specified ID:", targetFeatureId);
}

findFeaturesByIds

このメソッドは、1つ以上の指定されたフィーチャー ID でラベル付けされたすべてのフィーチャーを取得するために設計されています。単一のレイヤ ID と複数のフィーチャー ID を受け取り、指定されたレイヤ ID とフィーチャー ID に一致する Feature オブジェクトの配列を返します。

構文

reearth.layers.findFeaturesByIds: (layerId: string, featureId: string[]) => Feature[] | undefined;

パラメータ

layerId

Type string

シーン内で検索対象となるレイヤの一意の識別子です。

featureId

Type string[]

レイヤ内のフィーチャーの一意の識別子です。1つまたは複数の ID を柔軟に入力できます。

戻り値

Type (Feature[] | underined)

指定されたレイヤ内で見つかったフィーチャー ID を持つ Feature オブジェクトの配列を返します。一致するフィーチャーが存在しない場合は undefined を返します。

使用例

// Define an array of layer IDs to be searched
const layerId = "01j90ed9m6bxagb6bvfg4sk49q";
const featureIds = [
  "6167fcb5-9564-4c8e-a4d3-d0b419f54ec6",
  "abae3164-f8b3-42bb-b194-0379ecc4c653",
];

// Retrieve the layers by their IDs
const features = reearth.layers.findFeaturesByIds(layerId, featureIds);

// Process the results, handling both found and not found cases
features.forEach((feature, index) => {
  if (feature) {
    console.log(`Feature found: ID = ${feature.id}, Type = ${feature.type}`);
  } else {
    console.log(`No Feature found for ID: ${feature[index]}`);
  }
});

hide

このメソッドは、提供されたレイヤ ID の配列に基づいて1つ以上のレイヤを非表示にするために設計されています。文字列引数のスプレッドを受け取り（各引数がレイヤの一意の識別子を表します）、呼び出されると指定された各レイヤの表示状態を false に設定し、プロジェクト内のビューから効果的に非表示にします。特定の条件やユーザー操作に基づいて、エンドユーザーに表示される要素を動的に制御するために特に有用です。

構文

reearth.layers.hide : (...layerIds: string[]) => void

パラメータ

...layerIds

Type ...string[]

非表示にするレイヤの ID をそれぞれ表す文字列のスプレッドパラメータです。

戻り値

Type なし（void）

このメソッドは値を返しません。

使用例

// Define the IDs of layers to be hidden
const layerIdsToHide = [
  "01j1rx8xhxsk2wdydew3m8hr6q",
  "01j90ed9m6bxagb6bvfg4sk49q",
];

// Hide the specified layers in the Reearth scene
reearth.layers.hide(...layerIdsToHide);

show

このメソッドは、reearth シーン内の指定されたレイヤの表示状態を true に設定するために使用します。ユーザーに表示するレイヤをプログラム的に制御でき、マップまたはシーン上のさまざまなデータセット、フィーチャー、またはグラフィック要素の表示を管理するための重要なツールです。ユーザー操作、アプリケーション状態、または特定の条件に基づいてレイヤを動的に表示・非表示にするシナリオに特に有用です。

構文

reearth.layers.show: (...layerId: string[]) => void;

パラメータ

...layerIds

Type ...string[]

表示するレイヤの ID をそれぞれ表す文字列のスプレッドパラメータです。

戻り値

Type なし（void）

このメソッドは値を返しません。

使用例

// Define the IDs of layers to be shown
const layerIdsToShow = [
  "01j1rx8xhxsk2wdydew3m8hr6q",
  "01j90ed9m6bxagb6bvfg4sk49q",
];

// Show the specified layers in the Reearth scene
reearth.layers.show(...layerIdsToShow);

delete

このメソッドは、reearth シーン内の指定されたレイヤを削除するために使用します。Plugin API によって追加された一時的なレイヤのみを削除します。レイヤの ID を主な引数として受け取ります。

構文

reearth.layers.delete: (...layerId: string[]) => void;

パラメータ

...layerIds

Type ...string[]

削除するレイヤの ID をそれぞれ表す文字列のスプレッドパラメータです。

戻り値

Type なし（void）

このメソッドは値を返しません。

使用例

// Define the IDs of layers to be deleted
const layerIdsToDelete = [
  "ed5cade3-4049-4626-a4c6-4e84baaef987",
  "0cdc12f8-4096-4a3c-84fa-0cc984130559",
];

// Show the specified layers in the Reearth scene
reearth.layers.delete(...layerIdsToDelete);

override

このメソッドは、ID によって指定されたレイヤのプロパティを動的にオーバーライドします。レイヤプロパティを変更することができます。表示状態、色、またはレイヤ構造で定義されたカスタム属性など、レイヤプロパティをオンザフライで変更できます。この動的な操作は、元のレイヤ設定を永続的に変更することなく、ユーザー操作、データ更新、またはその他のアプリケーションロジックに応じてレイヤ属性を変化させる必要があるレスポンシブなアプリケーションに不可欠です。レイヤの ID と部分的なレイヤオブジェクトの2つのパラメータを受け取ります。

構文

reearth.layers.override: (layerId: string, properties: Partial<Layer>) => void;

パラメータ

layerId

Type string

プロパティをオーバーライドするレイヤの一意の識別子です。

properties

Type Partial<Layer>

Layer 型のいずれかのプロパティを省略可能な形で含むことができるオブジェクトです。

戻り値

Type なし（void）

このメソッドは入力パラメータを必要とせず、値を返さずに処理を実行します。

使用例

// add a sample layer
const sampleLayer = {
  type: "simple",
  data: {
    type: "geojson",
    value: {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [139.6917, 35.6895],
      },
    },
  },
  marker: {
    style: "image",
    imageSize: 1,
    imageColor: "blue",
  },
};
const layerId = reearth.layers.add(sampleLayer);

// Example to modify the style
// We should hav a big red marker instead of a small blue one
reearth.layers.override(layerId, {
  marker: {
    imageSize: 5,
    imageColor: "red",
  },
});

select

このメソッドは、reearth シーン内の特定のレイヤをプログラム的に選択するために使用します。

構文

reearth.layers.select: (layerId?: string) => void;

パラメータ

layerId

Type string

選択するレイヤの一意の識別子です。

戻り値

Type なし（void）

このメソッドは入力パラメータを必要とせず、値を返さずに処理を実行します。

使用例

// Select a layer by ID
reearth.layers.select("01j1rx8xhxsk2wdydew3m8hr6q");

selectFeature

このメソッドは、reearth シーン内の特定のフィーチャーをプログラム的に選択するために使用します。特定のフィーチャーをハイライトまたはフォーカスするために不可欠で、インフォボックスやその他のコンテキスト情報の表示など、追加の UI 要素やアクションをトリガーすることができます。

構文

reearth.layers.selectFeature: (layerId?: string, featureId?: string) => void;

パラメータ

layerId

Type string

選択するレイヤの一意の識別子です。

featureId

Type string

レイヤ内のフィーチャーの一意の識別子です。

戻り値

Type なし（void）

このメソッドは入力パラメータを必要とせず、値を返さずに処理を実行します。

使用例

// Layer ID and feature ID to be selected
const layerId = "01j90ed9m6bxagb6bvfg4sk49q";
const featureId = "6167fcb5-9564-4c8e-a4d3-d0b419f54ec6";

// Select the layer
reearth.layers.selectFeature(layerId, featureId);

selectFeatures

このメソッドは、reearth シーン内の特定の複数フィーチャーをプログラム的に選択するために使用します。特定のフィーチャーをハイライトまたはフォーカスするために不可欠で、インフォボックスやその他のコンテキスト情報の表示など、追加の UI 要素やアクションをトリガーすることができます。

構文

reearth.layers.selectFeatures: (targets: { layerId?: string; featureId?: string[] }[]) => void;

パラメータ

targets

Type { layerId?: string; featureId?: string[] }[]

• layerId: string: 選択するレイヤの一意の識別子。
• featureId: string[]: 各要素がフィーチャーの ID を表す文字列の配列。

戻り値

Type なし（void）

このメソッドは入力パラメータを必要とせず、値を返さずに処理を実行します。

使用例

// add a sample layer
const chiyodaLayerId = reearth.layers.add({
  type: "simple",
  data: {
    type: "3dtiles",
    url: "https://assets.cms.plateau.reearth.io/assets/ca/ee4cb0-9ce4-4f6c-bca1-9c7623e84cb1/13100_tokyo23-ku_2022_3dtiles_1_1_op_bldg_13101_chiyoda-ku_lod2_no_texture/tileset.json",
  },
  ["3dtiles"]: {
    selectedFeatureColor: "red",
  },
});

const chuoLayerId = reearth.layers.add({
  type: "simple",
  data: {
    type: "3dtiles",
    url: "https://assets.cms.plateau.reearth.io/assets/4a/30f295-cd07-46b0-b0ab-4a4b1b3af06b/13100_tokyo23-ku_2022_3dtiles_1_1_op_bldg_13102_chuo-ku_lod2_no_texture/tileset.json",
  },
  ["3dtiles"]: {
    selectedFeatureColor: "red",
  },
});

// NOTE: After 3dtiles been loaded, we can use this to select features
// Select features by layer IDs and feature IDs
reearth.layers.selectFeatures([
  {
    layerId: chiyodaLayerId,
    featureId: [
      "f9f2275bcf13a9674ba81473bc129ed6",
      "b9a4fd90ca6112eccd43bfffd4aeb2fe",
    ],
  },
  {
    layerId: chuoLayerId,
    featureId: [
      "acf77feceabce515700a47021bfe63dc",
      "4dcf088a80f1eaaf73b1f356f7446298",
    ],
  },
]);

イベント

ノート

共通イベントメソッド（on、off）の詳細については、イベント ページを参照してください。

select

このイベントは、reearth シーン内でレイヤが選択されたときにトリガーされます。レイヤ選択イベントを監視し、カスタムアクションや動作で応答する手段を提供します。

構文

reearth.layers.on('select', (selection: LayerSelection) => void)

パラメータ

selection

Type LayerSelection:[layerId: string | undefined, featureId: string | undefined]

• layerId: string | undefined: 選択されたレイヤの一意の識別子。
• featureId: string | undefined: 選択されたフィーチャーの一意の識別子。

使用例

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

reearth.camera.lookAt({
  lat: 35.74642872517698,
  lng: 139.97422779688281,
  height: 1000,
});

reearth.layers.on("select", (layerId, featureId) => {
  console.log(
    `Layer selection: Layer ID: ${layerId}, Feature ID: ${featureId}`
  );
});

型定義

Layer 型

レイヤの作成と管理に必要なすべてのデータとメタデータを含むオブジェクトです。

type Layer = {
  id: string; // A unique identifier for the layer.
  title?: string;
  visible?: boolean; // Flag indicating whether the layer is visible by default. Default is true
  infobox?: Infobox<IBP>; // An infobox that can display additional interactive or informational content
  type: "simple";
  data?: {
    type:
      | "geojson"
      | "3dtiles"
      | "osm-buildings"
      | "reearth-buildings"
      | "google-photorealistic"
      | "czml"
      | "csv"
      | "wms"
      | "mvt"
      | "kml"
      | "gpx"
      | "shapefile"
      | "gtfs"
      | "gml"
      | "georss"
      | "gltf"
      | "tiles"
      | "tms"
      | "heatMap";
    url?: string; // URL of data source
    value?: any;
    layers?: string | string[];
    jsonProperties?: string[];
    isSketchLayer?: boolean;
    updateInterval?: number; // milliseconds
    parameters?: Record<string, any>;
    idProperty?: string;
    time?: {
      property?: string;
      interval?: number; // milliseconds
      updateClockOnLoad?: boolean;
    };
    csv?: {
      idColumn?: string | number;
      latColumn?: string | number;
      lngColumn?: string | number;
      heightColumn?: string | number;
      noHeader?: boolean;
      disableTypeConversion?: boolean;
    };
    geojson?: {
      useAsResource?: boolean;
    };
  };
  properties?: any;
  defines?: Record<string, string>;
  events?: Events;
  layerStyleId?: string;
  marker?: MarkerAppearance;
  polyline?: PolylineAppearance;
  polygon?: PolygonAppearance;
  model?: ModelAppearance;
  "3dtiles"?: Cesium3DTilesAppearance;
};

LazyLayer 型

レイヤの軽量な表現形式です。

type LazyLayer = Readonly<Layer> & {
  computed?: Readonly<ComputedLayer>;
  isTempLayer?: boolean;
  pluginId?: string;
  extensionId?: string;
  property?: any;
  propertyId?: string;
  isVisible?: boolean;
};

ComputedLayer 型

すべての処理が完了した後に得られるレイヤで、元の地理データと処理済みの地理データの両方、および適用・評価済みのスタイルと状態を含みます。

type ComputedLayer = {
  id: string;
  status: "fetching" | "ready";
  layer: Layer;
  originalFeatures: Feature[];
  features: ComputedFeature[];
  properties?: any;
};

レイヤアピアランス型

各レイヤタイプのプロパティです。

Marker

type MarkerAppearance = {
show?: boolean;
height?: number;
heightReference?: "none" | "clamp" | "relative";
style?: "none" | "point" | "image";
pointSize?: number;
pointColor?: string;
pointOutlineColor?: string;
pointOutlineWidth?: number;
image?: string;
imageSize?: number;
imageSizeInMeters?: boolean;
imageHorizontalOrigin?: "left" | "center" | "right";
imageVerticalOrigin?: "top" | "center" | "baseline" | "bottom";
imageColor?: string;
imageCrop?: "none" | "rounded" | "circle";
imageShadow?: boolean;
imageShadowColor?: string;
imageShadowBlur?: number;
imageShadowPositionX?: number;
imageShadowPositionY?: number;
label?: boolean;
labelText?: string;
labelPosition?:
| "left"
| "right"
| "top"
| "bottom"
| "lefttop"
| "leftbottom"
| "righttop"
| "rightbottom";
labelTypography?: {
fontFamily?: string;
fontSize?: number;
fontWeight?: number;
color?: string;
italic?: boolean;
underline?: boolean;
};
labelBackground?: boolean;
labelBackgroundColor?: string;
labelBackgroundPaddingHorizontal?: number;
labelBackgroundPaddingVertical?: number;
extrude?: boolean;
near?: number; //The unit is meter
far?: number; //The unit is meter
hideIndicator?: boolean;
selectedFeatureColor?: string; // This doesn't support expression
};

Polyline

type PolylineAppearance = {
show?: boolean;
clampToGround?: boolean;
strokeColor?: string;
strokeWidth?: number;
shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
near?: number;
far?: number;
classificationType?: "both" | "terrain" | "3dtiles";
hideIndicator?: boolean;
selectedFeatureColor?: string; // This doesn't support expression
};

Polygon

type PolygonAppearance = {
show?: boolean;
fill?: boolean;
fillColor?: string;
stroke?: boolean;
strokeColor?: string;
strokeWidth?: number;
heightReference?: "none" | "clamp" | "relative";
shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
near?: number;
far?: number;
extrudedHeight?: number;
classificationType?: "both" | "terrain" | "3dtiles";
hideIndicator?: boolean;
selectedFeatureColor?: string; // This doesn't support expression
};

Model

type ModelAppearance = {
show?: boolean;
url?: string;
heightReference?: "none" | "clamp" | "relative";
heading?: number;
pitch?: number;
roll?: number;
scale?: number;
maximumScale?: number;
minimumPixelSize?: number;
animation?: boolean;
shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
colorBlend?: "none" | "highlight" | "replace" | "mix";
color?: string;
colorBlendAmount?: number;
lightColor?: string;
near?: number;
far?: number;
pbr?: boolean;
imageBasedLightIntensity?: number;
};

3dtiles

type Cesium3DTilesAppearance = {
show?: boolean;
color?: string;
styleUrl?: string; // url of style json file
shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
colorBlendMode?: "highlight" | "replace" | "mix" | "default";
selectedFeatureColor?: string; // This doesn't support expression
tileset?: string;
pbr?: boolean; // physically-based rendering
showWireframe?: boolean;
showBoundingVolume?: boolean;
};

Feature 型

フィーチャーの作成と管理に必要なすべてのデータとメタデータを含むオブジェクトです。

type Feature = {
  type: "feature" | "computedFeature";
  id: string; // feature ID
  geometry?: Geometry;
  interval?: [start: Date, end?: Date];
  properties?: any;
  // Map engine specific information.
  metaData?: {
    description?: string;
  };
  range?: DataRange;
};

ComputedFeature 型

すべての最終評価済みプロパティとスタイルが適用された、単一の地理的フィーチャー（点、線、ポリゴン等）です。

type ComputedFeature = {
  type: "computedFeature";
  id: string; // feature ID
  geometry?: Geometry;
  interval?: [start: Date, end?: Date];
  properties?: any;
  // Map engine specific information.
  metaData?: {
    description?: string;
  };
  range?: DataRange;
  // AppearanceTypes
  marker?: MarkerAppearance;
  polyline?: PolylineAppearance;
  polygon?: PolygonAppearance;
  model?: ModelAppearance;
  "3dtiles"?: Cesium3DTilesAppearance;
};