reearth.viewer

更新日2026年8月4日

reearth.viewer 名前空間は、ビューアと対話するための関数群を提供します。

プロパティ

property

property は、グローブ・地形・シーン・タイル・空など、ビューアに関する各種プロパティを提供します。

構文

reearth.viewer.property: ViewerProperty;

戻り値

型 ViewerProperty

現在、property は明示的に設定されたプロパティのみを返します。デフォルト値は含まれません。

viewport

viewport は、マップ領域に関連するプロパティと、現在のビューポート（ページ）の URL クエリパラメータを提供するために設計されています。

構文

reearth.viewer.viewport: Viewport;

戻り値

型

type Viewport = {
  width: number;
  height: number;
  isMobile: boolean;
  query: Record<string, string>;
};

width: ビューポートの幅です。
height: ビューポートの高さです。
isMobile: ビューポートがモバイルデバイスかどうかを示す真偽値です。bowser のユーザーエージェント検出に基づき判定されます。
query: 現在のページの URL クエリパラメータです。

env

env は、現在実行中の Re:Earth Visualizer の環境情報を提供します。

構文

reearth.viewer.env: Env;

戻り値

型

type Env = {
  inEditor: boolean;
  isBuilt: boolean;
};

inEditor と isBuilt は、実行されているページやタブによって異なる値を持ちます。プラグインはこれらの値に基づいて動作を切り替えることができます。

プロパティ	エディタ - マップ/ストーリー/ウィジェットタブ	エディタ - 公開タブ	公開済みページ
inEditor	true	false	false
isBuilt	false	false	true

interactionMode

interactionMode は、Re:Earth Visualizer におけるビューアのインタラクションモードを管理するプロパティとメソッドの集合を提供します。

interactionMode.mode

ビューアの現在のインタラクションモードです。

構文

reearth.viewer.interactionMode.mode: InteractionModeType

戻り値

型 InteractionModeType = "default" | "move" | "selection" | "sketch" | "spatialId"

default: デフォルトのインタラクションモードです。
move: 移動インタラクションモードです。このモードでは選択が無効になります。
selection: 選択インタラクションモードです。このモードでは移動が無効になります。
sketch: スケッチインタラクションモードです。スケッチはこのモードでのみ有効にできます。
spatialId: Spatial ID を扱うためのインタラクションモードです。Spatial ID の選択時に使用します。

interactionMode.override

ビューアのインタラクションモードを上書きします。

構文

reearth.viewer.interactionMode.override: (
  mode: InteractionModeType
) => void;

パラメータ

`mode`

型: InteractionModeType

設定するインタラクションモードです。

戻り値

なし（void）。このメソッドは値を返しません。

メソッド

overrideProperty

overrideProperty は、ビューアのプロパティを上書きするために使用します。

構文

reearth.viewer.overrideProperty: (property: ViewerProperty) => void;

パラメータ

property

型 ViewerProperty

戻り値

型 void

このメソッドは戻り値を持ちません。

使用例

// 地形を有効にする
reearth.viewer.overrideProperty({
  terrain: {
    enabled: true,
  },
});

capture

capture 関数は、現在のビューアの画像を生成します。

構文

reearth.viewer.capture: (
  type?: string,
  encoderOptions?: number
) => string | undefined;

パラメータ

type

型 string（省略可能）

画像フォーマットを示す文字列です。デフォルトのフォーマットは image/png であり、指定したフォーマットがサポートされていない場合もこのフォーマットが使用されます。

encoderOptions

型 number（省略可能）

image/jpeg や image/webp など非可逆圧縮をサポートするファイルフォーマットで画像を作成する際の画質を表す、0 から 1 の数値です。このオプションを指定しない場合、または値が許容範囲外の場合は、ユーザーエージェントのデフォルト品質値が使用されます。

戻り値

型 string | undefined

リクエストされたデータ URL を含む文字列です。

使用例

// 現在のマップのキャプチャを取得します。
// 返された画像文字列をウィジェット UI に送信してダウンロードをトリガーできます。
console.log(reearth.viewer.capture("image/png"));

open

open メソッドは、URL を新しいタブで開くために使用します。

構文

reearth.viewer.open: (url: string) => void;

パラメータ

url

型 string

新しいタブで開く URL です。

戻り値

型 void

reload

reload メソッドは、現在の Visualizer ページを再読み込みします。

構文

reearth.viewer.reload: () => void;

戻り値

型 void

tools

tools モジュールは、グローブおよびシーン周辺のさまざまな計算を行うためのヘルパー関数のコレクションを提供します。

> getLocationFromScreenCoordinate

スクリーン座標から地球上の位置を返します。

構文

reearth.viewer.tools.getLocationFromScreenCoordinate: (
  x: number,
  y: number,
  withTerrain?: boolean
) => { lat: number; lng: number; height: number } | undefined;

パラメータ

x

型 number

ビューア上の x ピクセル座標です。

y

型 number

ビューア上の y ピクセル座標です。

withTerrain

型 boolean（省略可能）

地形の高さを考慮するかどうかを示す真偽値です。デフォルト値は false です。

戻り値

型 { lat: number; lng: number; height: number } | undefined

地球上の位置です。

> getScreenCoordinateFromPosition

地球上の位置からスクリーン座標を返します。

構文

reearth.viewer.tools.getScreenCoordinateFromPosition: (
  position: [x: number, y: number, z: number]
) => [x: number, y: number] | undefined;

パラメータ

position

型 [x: number, y: number, z: number]

地球上の位置（デカルト座標）です。

戻り値

型 [x: number, y: number] | undefined

ビューア上のピクセル座標です。

> getTerrainHeightAsync

指定した位置の地形の高さを返します。これは非同期関数です。

構文

reearth.viewer.tools.getTerrainHeightAsync: (
  lng: number,
  lat: number
) => Promise<number | undefined>;

パラメータ

lng

型 number

位置の経度です。

lat

型 number

位置の緯度です。

戻り値

型 Promise<number | undefined>

指定した位置の地形の高さです。

> getGlobeHeight

指定した位置の地表の高さを返します。

構文

reearth.viewer.tools.getGlobeHeight: (
  lng: number,
  lat: number
) => number | undefined;

パラメータ

lng

型 number

位置の経度です。

lat

型 number

位置の緯度です。

戻り値

型 number | undefined

指定した位置の地表の高さです。

> getCurrentLocationAsync

ユーザーの現在位置を返します。これはブラウザの Geolocation API を使用する非同期関数です。

構文

reearth.viewer.tools.getCurrentLocationAsync: (
  options?: Options
) => Promise<Location | undefined>;

パラメータ

options

型 Options（省略可能）

以下のパラメータを含むオプションオブジェクトです。

maximumAge: キャッシュされた位置情報の最大有効期間（ミリ秒）です。デフォルト値は 0 です。
timeout: 位置情報の取得を待機する最大時間（ミリ秒）です。デフォルト値は 10,000ms です。
enableHighAccuracy: 高精度の位置情報をリクエストするかどうかです。デフォルト値は false です。

戻り値

型 Promise<Location | undefined>

type Location = {
  lat: number;
  lng: number;
  height: number;
};

ユーザーの現在位置です。

> cartographicToCartesian

地理座標をデカルト座標に変換します。

構文

reearth.viewer.tools.cartographicToCartesian: (
  lng: number,
  lat: number,
  height: number,
  options?: { useGlobeEllipsoid?: boolean }
) => [x: number, y: number, z: number] | undefined;

パラメータ

lng

型 number

位置の経度です。

lat

型 number

位置の緯度です。

height

型 number

位置の高さです。

options

型 { useGlobeEllipsoid?: boolean }（省略可能）

useGlobeEllipsoid: グローブの楕円体を使用するかどうかを示す真偽値です。デフォルト値は false です。

戻り値

型 [x: number, y: number, z: number] | undefined

デカルト座標の位置です。

> cartesianToCartographic

デカルト座標を地理座標に変換します。

構文

reearth.viewer.tools.cartesianToCartographic: (
  x: number,
  y: number,
  z: number,
  options?: { useGlobeEllipsoid?: boolean }
) => [lng: number, lat: number, height: number] | undefined;

パラメータ

x

型 number

位置の x 座標です。

y

型 number

位置の y 座標です。

z

型 number

位置の z 座標です。

options

型 { useGlobeEllipsoid?: boolean }（省略可能）

useGlobeEllipsoid: グローブの楕円体を使用するかどうかを示す真偽値です。デフォルト値は false です。

戻り値

型 [lng: number, lat: number, height: number] | undefined

地理座標の位置です。

> transformByOffsetOnScreen

スクリーン上のオフセットによって位置を変換します。

構文

reearth.viewer.tools.transformByOffsetOnScreen: (
  rawPosition: [x: number, y: number, z: number],
  screenOffset: [x: number, y: number]
) => [x: number, y: number, z: number] | undefined;

パラメータ

rawPosition

型 [x: number, y: number, z: number]

地球上の元の位置です。

screenOffset

型 [x: number, y: number]

スクリーン上のオフセットです。

戻り値

型 [x: number, y: number, z: number] | undefined

変換後の位置です。

> isPositionVisibleOnGlobe

指定した位置がグローブ上で表示可能かどうかを確認します。

構文

reearth.viewer.tools.isPositionVisibleOnGlobe: (
  position: [x: number, y: number, z: number]
) => boolean;

パラメータ

position

型 [x: number, y: number, z: number]

地球上の位置です。

戻り値

型 boolean

指定した位置がグローブ上で表示可能かどうかを示す真偽値です。

イベント

resize

resize イベントは、ビューアがリサイズされたときにトリガーされます。

構文

reearth.viewer.on("resize", ({width: number, height: number, isMobile:boolean}) => void);

パラメータ

width: ビューポートの幅です。
height: ビューポートの高さです。
isMobile: ビューポートがモバイルデバイスかどうかを示す真偽値です。bowser のユーザーエージェント検出に基づき判定されます。

使用例

reearth.viewer.on("resize", ({ width, height, isMobile }) => {
  console.log(`width: ${width}, height: ${height}, isMobile: ${isMobile}`);
});

マウスイベント

ビューアにはリッスン可能なマウスイベントのセットがあります。これらはすべて同じパラメータを持ちます。

サポートされているイベントは以下のとおりです。

click
doubleClick
mouseDown
mouseUp
rightClick
rightDown
rightUp
middleClick
middleDown
middleUp
mouseMove
mouseEnter
mouseLeave
wheel

構文

reearth.viewer.on("click", (event: MouseEvent)=> void);

パラメータ

event: MouseEvent

type MouseEvent = {
  x?: number;
  y?: number;
  lat?: number;
  lng?: number;
  height?: number;
  layerId?: string;
  delta?: number;
};

x: ビューアを基準としたカーソルの x 座標です。
y: ビューアを基準としたカーソルの y 座標です。
lat: 地球上のカーソルの緯度です。
lng: 地球上のカーソルの経度です。
height: 地球上のカーソルの高さです。
layerId: カーソルが乗っているオブジェクトのレイヤ ID です。
delta: ホイールイベントのデルタ値です。

使用例

reearth.viewer.on("mouseMove", ({ lat, lng, height }) => {
  console.log(`lat: ${lat}, lng: ${lng}, height: ${height}`);
});