StandardUIViewer¶

標準 Mapray Viewer

コアライブラリのラッパです。マウス操作やキーボード操作など一般的な操作がサポートされます。

import mapray from "@mapray/mapray-js";
import maprayui from "@mapray/ui";

const node = document.getElementById("id"); // HTMLElement要素を取得します
const ACCESS_TOKEN = "..."; // 事前に取得した値を指定します。

const stdViewer = new maprayui.StandardUIViewer( node, ACCESS_TOKEN );

const mtFujiPosition = new mapray.GeoPoint(138.72884, 35.36423, 0);

// カメラ視点の変更
stdViewer.setCameraPosition({
  longitude: mtFujiPosition.longitude,
  latitude: mtFujiPosition.latitude - 0.05,
  height: mtFujiPosition.altitude + 6000
});

// カメラ視線先の変更
stdViewer.setLookAtPosition({
  longitude: mtFujiPosition.longitude,
  latitude: mtFujiPosition.latitude,
  height: mtFujiPosition.altitude + 3000
});

const pin = new mapray.PinEntity(stdViewer.viewer.scene)
pin.altitude_mode = mapray.AltitudeMode.RELATIVE;
pin.addMakiIconPin( "mountain-15", mtFujiPosition );
stdViewer.addEntity(pin);

Extends¶

RenderCallback

Constructors¶

new StandardUIViewer()¶

new StandardUIViewer(container): StandardUIViewer

コンストラクタ

Parameters¶

Parameter	Type	Description
`container`	`string` \| `HTMLElement`	ビューワ作成先のコンテナ（IDまたは要素）

Returns¶

StandardUIViewer

Overrides¶

RenderCallback.constructor

new StandardUIViewer()¶

new StandardUIViewer(container, options): StandardUIViewer

コンストラクタ

Parameters¶

Parameter	Type	Description
`container`	`string` \| `HTMLElement`	ビューワ作成先のコンテナ（IDまたは要素）
`options`	`Option`	生成オプション

Returns¶

StandardUIViewer

Overrides¶

mapray.RenderCallback.constructor

new StandardUIViewer()¶

new StandardUIViewer(container, access_token): StandardUIViewer

コンストラクタ

Parameters¶

Parameter	Type	Description
`container`	`string` \| `HTMLElement`	ビューワ作成先のコンテナ（IDまたは要素）
`access_token`	`string`	アクセストークン

Returns¶

StandardUIViewer

Overrides¶

mapray.RenderCallback.constructor

new StandardUIViewer()¶

new StandardUIViewer(container, access_token, options): StandardUIViewer

コンストラクタ

Parameters¶

Parameter	Type	Description
`container`	`string` \| `HTMLElement`	ビューワ作成先のコンテナ（IDまたは要素）
`access_token`	`string`	アクセストークン
`options`	`Option`	生成オプション

Returns¶

StandardUIViewer

Overrides¶

mapray.RenderCallback.constructor

Properties¶

_viewer?¶

protected optional _viewer: Viewer

Inherited from¶

RenderCallback._viewer

Accessors¶

viewer¶

get viewer(): Viewer

ビューワ

Returns¶

Viewer

Methods¶

addEntity()¶

addEntity(entity): void

エンティティの追加

Parameters¶

Parameter	Type	Description
`entity`	`Entity`<`EventMap`>	エンティティ

Returns¶

void

addLayer()¶

addLayer(layer): Promise<ImageLayer | ContourLayer>

レイヤの追加（末尾）

Parameters¶

Parameter	Type	Description
`layer`	`ImageProvider` \| `Option` \| `Option`	作成するレイヤのプロパティ

Returns¶

Promise<ImageLayer | ContourLayer>

calculateAngle()¶

protected calculateAngle(axis, basis_vector, target_vector): number

任意軸回りの回転角度の算出

Parameters¶

Parameter	Type	Description
`axis`	`Vector3`	回転軸（長さ1とする）
`basis_vector`	`Vector3`	基準ベクトル
`target_vector`	`Vector3`	目標ベクトル

Returns¶

number

回転角度（deg.）

clearEntities()¶

clearEntities(): void

エンティティの全削除

Returns¶

void

clearLayer()¶

clearLayer(): void

レイヤの全削除

Returns¶

void

createCameraParameterHash()¶

createCameraParameterHash(): undefined | string

現在のカメラ情報から URL Hash string を取得

Returns¶

undefined | string

Hash Stringが生成できないときは undefined

createDemProvider()¶

protected createDemProvider(access_token, options): DemProvider

DEMプロバイダの生成

Parameters¶

Parameter	Type	Description
`access_token`	`null` \| `string`	アクセストークン
`options`	`Option`	生成オプション

Returns¶

DemProvider

DEMプロバイダ

createFlyCurve()¶

protected createFlyCurve(viewer, options): object

curveの作成 this._curve_move と this._curve_rotation を作成

Parameters¶

Parameter	Type	Description
`viewer`	`Viewer`	Viewer
`options`	`FlyParam`	引数オブジェクト

Returns¶

object

移動用Curveと回転用curve

move¶

move: KFLinearCurve

rotation¶

rotation: KFLinearCurve

createImageProvider()¶

protected createImageProvider(options): ImageProvider

画像プロバイダの生成

Parameters¶

Parameter	Type	Description
`options`	`Option`	生成オプション

Returns¶

ImageProvider

画像プロバイダ

createViewer()¶

protected createViewer(container, access_token, options): Promise<void>

ビューワの作成

Parameters¶

Parameter	Type	Description
`container`	`string` \| `HTMLElement`	ビューワ作成先のコンテナ（IDまたは要素）
`access_token`	`null` \| `string`	アクセストークン
`options`	`Option`	生成オプション

Returns¶

Promise<void>

destroy()¶

destroy(): void

破棄関数

Returns¶

void

disableURLUpdate()¶

disableURLUpdate(): void

URL Hash 書き換え機能を無効にします。

Returns¶

void

enableURLUpdate()¶

enableURLUpdate(readUrlOnStart): void

URL Hash 書き換え機能を有効にします。カメラ移動時に自動的に URL Hash を書き換えます。

Parameters¶

Parameter	Type	Description
`readUrlOnStart`	`boolean`	true の場合、関数呼び出し時に URL Hash で示される位置に移動します。

Returns¶

void

getCameraAngle()¶

getCameraAngle(): RollPitchYawData

カメラ方向の取得

Returns¶

RollPitchYawData

カメラ方向

getCameraParameter()¶

getCameraParameter(): CameraParameter

カメラパラメータの取得

Returns¶

CameraParameter

カメラパラメータ

getCameraParameterFromHash()¶

getCameraParameterFromHash(urlHash): undefined | HashCameraParameter

URL Hashからカメラパラメータを取り出す。

Parameters¶

Parameter	Type	Description
`urlHash`	`string`	hash string

Returns¶

undefined | HashCameraParameter

パラメータが不足、不正な場合は undefined

getCameraPosition()¶

getCameraPosition(): GeoPointData

カメラ位置の取得

Returns¶

GeoPointData

カメラ位置

getControllable()¶

protected getControllable(): boolean

操作可否状態の取得

Returns¶

boolean

操作可否

getEntity()¶

getEntity(index): Entity<EventMap>

エンティティの取得

Parameters¶

Parameter	Type	Description
`index`	`number`	エンティティ番号

Returns¶

Entity<EventMap>

エンティティ

getEntityNum()¶

getEntityNum(): number

エンティティ数の取得

Returns¶

number

エンティティ数

getLayer()¶

getLayer(index): Layer

レイヤの取得

Parameters¶

Parameter	Type	Description
`index`	`number`	レイヤ番号

Returns¶

Layer

レイヤ

getLayerNum()¶

getLayerNum(): number

レイヤ数の取得

Returns¶

number

レイヤ数

insertLayer()¶

insertLayer(index, layer): Promise<ImageLayer | ContourLayer>

レイヤの追加（任意）

Parameters¶

Parameter	Type	Description
`index`	`number`	挿入場所
`layer`	`ImageProvider` \| `Option` \| `Option`	作成するレイヤのプロパティ

Returns¶

Promise<ImageLayer | ContourLayer>

isUnderground()¶

Experimental

isUnderground(): boolean

地下部分が視界に入るかを判定する（近似的な計算）。

カメラ位置が地表面より下である場合と、地表面からカメラ位置までの距離が 2m 以下である場合に true を返します。

Returns¶

boolean

See¶

setCameraAltitudeRange

onBlur()¶

onBlur(event): void

フォーカスが外れた時のイベント

Parameters¶

Parameter	Type	Description
`event`	`Event`	イベントデータ

Returns¶

void

onEndFlyCamera()¶

protected onEndFlyCamera(): void

fly完了処理

Fly完了時に呼び出されます

Returns¶

void

onKeyDown()¶

onKeyDown(event): void

キーを押した時のイベント

Parameters¶

Parameter	Type
`event`	`KeyboardEvent`

Returns¶

void

onKeyUp()¶

onKeyUp(event): void

キーを挙げた時のイベント

Parameters¶

Parameter	Type
`event`	`KeyboardEvent`

Returns¶

void

onMouseDown()¶

onMouseDown(point, event): void

マウスを押した時のイベント

Parameters¶

Parameter	Type	Description
`point`	[`number`, `number`]	要素上の座標
`event`	`MouseEvent`	マウスイベントデータ

Returns¶

void

onMouseMove()¶

onMouseMove(point, event): void

マウスを動かした時のイベント

Parameters¶

Parameter	Type	Description
`point`	[`number`, `number`]	要素上の座標
`event`	`MouseEvent`	マウスイベントデータ

Returns¶

void

onMouseUp()¶

onMouseUp(point, event): void

マウスを上げた時のイベント

Parameters¶

Parameter	Type	Description
`point`	[`number`, `number`]	要素上の座標
`event`	`MouseEvent`	マウスイベントデータ

Returns¶

void

onMouseWheel()¶

onMouseWheel(point, event): void

マウスホイールを動かした時のイベント

Parameters¶

Parameter	Type	Description
`point`	[`number`, `number`]	要素上の座標
`event`	`WheelEvent`	ホイールイベント

Returns¶

void

onStart()¶

onStart(): void

レンダリングループ開始の処理

Returns¶

void

Overrides¶

RenderCallback.onStart

onStop()¶

onStop(): void

レンダリングループ終了の処理

Returns¶

void

Overrides¶

RenderCallback.onStop

onUpdateCameraParameter()¶

Experimental

protected onUpdateCameraParameter(): void

カメラパラメータが確定してから呼ばれる

Returns¶

void

onUpdateFrame()¶

onUpdateFrame(delta_time): void

フレームレンダリング前の処理

値の計算
[[updateTranslation]]：longitude, latitude, heightの計算
[[updateRotation]]：roll, pitch, yawの計算
値の適用
[[updateClipPlane]]：near, farの更新
[[updateCamera]]：カメラ姿勢を

ただし、フライカメラが動作している間は上記処理は停止されます。

Parameters¶

Parameter	Type	Description
`delta_time`	`number`	全フレームからの経過時間（秒）

Returns¶

void

Overrides¶

RenderCallback.onUpdateFrame

removeEntity()¶

removeEntity(entity): void

エンティティの削除

Parameters¶

Parameter	Type	Description
`entity`	`Entity`<`EventMap`>	エンティティ

Returns¶

void

removeLayer()¶

removeLayer(indexOrLayer): void

レイヤの削除

Parameters¶

Parameter	Type	Description
`indexOrLayer`	`number` \| `Layer`	レイヤ番号またはレイヤインスタンス

Returns¶

void

resetOpEvent()¶

resetOpEvent(): void

操作系のイベントをリセットする

Returns¶

void

rotateVector()¶

protected rotateVector(vector, axis, angle): Vector3

3次元ベクトルの任意軸の回転

Parameters¶

Parameter	Type	Description
`vector`	`Vector3`	対象ベクトル
`axis`	`Vector3`	回転軸
`angle`	`number`	回転角度（deg.）

Returns¶

Vector3

回転後ベクトル

setCameraAltitudeRange()¶

setCameraAltitudeRange(min, max): void

カメラ高度の移動可能範囲を指定します

Parameters¶

Parameter	Type	Default value	Description
`min`	`number`	`undefined`	下限
`max`	`number`	`Number.MAX_VALUE`	上限（省略可）

Returns¶

void

setCameraAngle()¶

setCameraAngle(angle): void

カメラ方向の設定

Parameters¶

Parameter	Type
`angle`	`RollPitchYawData`

Returns¶

void

setCameraParameter()¶

setCameraParameter(parameter): void

カメラパラメータの設定

Parameters¶

Parameter	Type	Description
`parameter`	`CameraParameterOption`	カメラパラメータ

Returns¶

void

setCameraPosition()¶

setCameraPosition(position): void

カメラ位置の設定

Parameters¶

Parameter	Type	Description
`position`	`GeoPointData`	カメラ位置

Returns¶

void

setCameraZoomLimit()¶

Experimental

setCameraZoomLimit(min_zoom_limit): void

カメラズームイン操作で近づくことのできる最小距離[m]を設定します。設定後のズームイン操作で有効になります。

Parameters¶

Parameter	Type	Description
`min_zoom_limit`	`number`	最小距離

Returns¶

void

setControllable()¶

protected setControllable(flag): void

操作可否を設定

Parameters¶

Parameter	Type	Description
`flag`	`boolean`

Returns¶

void

setLookAtPosition()¶

setLookAtPosition(position, yaw): void

注視点の設定

Parameters¶

Parameter	Type	Default value	Description
`position`	`GeoPointData`	`undefined`	カメラ位置
`yaw`	`number`	`0`	ヨー角

Returns¶

void

startFlyCamera()¶

startFlyCamera(options): Promise<void>

２点間のカメラアニメーション

指定した位置間でカメラアニメーションを行う。

Parameters¶

Parameter	Type	Description
`options`	`FlyParam`	引数オブジェクト

Returns¶

Promise<void>

Promise

updateCamera()¶

protected updateCamera(): void

カメラの位置・向きの更新

Returns¶

void

updateClipPlane()¶

protected updateClipPlane(groundElevation): void

クリップ範囲の更新

Parameters¶

Parameter	Type
`groundElevation`	`number`

Returns¶

void

updateFlyCamera()¶

protected updateFlyCamera(delta_time): void

Fly中のupdate処理

Fly実行中(this._viewer_camera_mode が StandardUIViewer.CameraMode.CAMERA_FLY の時)は onUpdateFrame から呼び出されます

Parameters¶

Parameter	Type
`delta_time`	`number`

Returns¶

void

updateRotation()¶

protected updateRotation(delta_time): void

カメラの回転（回転中心指定）

Parameters¶

Parameter	Type
`delta_time`	`number`

Returns¶

void

updateTranslation()¶

protected updateTranslation(delta_time): void

カメラの平行移動

Parameters¶

Parameter	Type
`delta_time`	`number`

Returns¶

void

updateTranslationOfEyeDirection()¶

protected updateTranslationOfEyeDirection(): void

視線方向への移動

Returns¶

void

updateTranslationOfHeight()¶

protected updateTranslationOfHeight(): void

高度変更

Returns¶

void