Class 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);

Hierarchy (view full)

Constructors

constructor

Properties

_altitude_range _animation _buf_matrix1 _buf_matrix2 _camera_parameter _controllable _curve_move? _curve_rotation? _default_fov _flycamera_on_success? _flycamera_target_time _flycamera_total_time _fovy_key _free_rotate_drag _height_drag _key_mode _last_camera_parameter _min_zoom_limit _mouse_down_position _operation_mode _pre_mouse_position _rotate_center? _rotate_drag _translate_drag _translate_eye_drag _update_url_hash _update_url_hash_backup _update_url_hash_full_digits _updater _viewer? _viewer_camera_mode _zoom_wheel

Accessors

viewer

Methods

_addEventListener _calculateKeyPoint _correctAltitude _getLookAtAngle _getOffsetPoint _initCameraParameter _isSame _mousePos _onBlur _onHashChange _onKeyDown _onKeyUp _onMouseDown _onMouseMove _onMouseUp _onMouseWheel _removeEventListener _resetEventParameter _restoreCameraParameterFromHash _setupAnimationBindingBlock _updateURLHash addEntity addLayer calculateAngle clearEntities clearLayer createCameraParameterHash createDemProvider createFlyCurve createImageProvider createViewer destroy disableURLUpdate enableURLUpdate getCameraAngle getCameraParameter getCameraParameterFromHash getCameraPosition getControllable getEntity getEntityNum getLayer getLayerNum insertLayer onBlur onEndFlyCamera onKeyDown onKeyUp onMouseDown onMouseMove onMouseUp onMouseWheel onStart onStop onUpdateFrame removeEntity removeLayer resetOpEvent rotateVector setCameraAngle setCameraParameter setCameraPosition setCameraZoomLimit setControllable setLookAtPosition startFlyCamera updateCamera updateClipPlane updateFlyCamera updateFovy updateFreeRotation updateRotation updateTranslation updateTranslationOfEyeDirection updateTranslationOfHeight

Constructors

constructor

Properties

Private _altitude_range

_altitude_range: {
    max: number;
    min: number;
}

Type declaration

  • max: number
  • min: number

Private _animation

_animation: EasyBindingBlock

Private _buf_matrix1

_buf_matrix1: Matrix

Private _buf_matrix2

_buf_matrix2: Matrix

Private _camera_parameter

_camera_parameter: CameraParameter & RollPitchYawData & GeoPointData

Private _controllable

_controllable: boolean

Private Optional _curve_move

_curve_move?: KFLinearCurve

Private Optional _curve_rotation

_curve_rotation?: KFLinearCurve

Private _default_fov

_default_fov: number = StandardUIViewer.DEFAULT_CAMERA_PARAMETER.fov

リセット用の画角

Private Optional _flycamera_on_success

_flycamera_on_success?: (() => void)

Type declaration

    • (): void

    • Returns void

Private _flycamera_target_time

_flycamera_target_time: number

Private _flycamera_total_time

_flycamera_total_time: number

Private _fovy_key

_fovy_key: number

画角変更の指定回数

Private _free_rotate_drag

_free_rotate_drag: Vector2

自由回転の移動量（マウスの移動量）

Private _height_drag

_height_drag: Vector2

高度変更の移動量（マウスの移動量）

Private _key_mode

_key_mode: boolean

キー操作中

Private _last_camera_parameter

_last_camera_parameter: CameraParameter & RollPitchYawData & GeoPointData

Private _min_zoom_limit

_min_zoom_limit: number

Private _mouse_down_position

_mouse_down_position: [x: number, y: number]

マウスダウンした位置

Private _operation_mode

_operation_mode: OperationMode

Private _pre_mouse_position

_pre_mouse_position: [x: number, y: number]

直前のマウス位置

Private Optional _rotate_center

_rotate_center?: Vector3

回転中心

Private _rotate_drag

_rotate_drag: Vector2

回転の移動量（マウスの移動量）

Private _translate_drag

_translate_drag: Vector2

平行移動の移動量（マウスの移動量）

Private _translate_eye_drag

_translate_eye_drag: Vector2

平行移動の移動量（マウスの移動量）

Private _update_url_hash

_update_url_hash: boolean

URLHash更新フラグ

Private _update_url_hash_backup

_update_url_hash_backup: boolean

Private _update_url_hash_full_digits

_update_url_hash_full_digits: boolean

URLに含む値の桁数(true:全桁, false:桁数制限)

Private _updater

_updater: Updater

Protected Optional _viewer

_viewer?: Viewer

Private _viewer_camera_mode

_viewer_camera_mode: CameraMode

Private _zoom_wheel

_zoom_wheel: number

視線方向への移動量（ホイールの移動量）

Accessors

viewer

Methods

Private _addEventListener

Private _calculateKeyPoint

Private _correctAltitude

  • _correctAltitude(groundElevation): void

  • 高度の補正（地表面以下にならないようにする）

    Parameters

    • groundElevation: number

    Returns void

Private _getLookAtAngle

Private _getOffsetPoint

  • _getOffsetPoint(longitude, latitude, distance, bearing, dst): GeoPoint

  • ある地点から指定距離、指定方向に移動した位置を算出する

    Parameters

    • longitude: number

      経度

    • latitude: number

      緯度

    • distance: number

      距離(m)

    • bearing: number

      方角(deg)

    • dst: GeoPoint

      計算結果が格納されるオブジェクト

    Returns GeoPoint

Private _initCameraParameter

Private _isSame

  • _isSame(value1, value2, threshold?): boolean

  • 閾値のある同一判定

    Parameters

    • value1: number

      値1

    • value2: number
    • threshold: number = 0.000001

      閾値

    Returns boolean

    判定結果

Private _mousePos

  • _mousePos(el, event): [x: number, y: number]

  • 要素上での座標を取得

    Parameters

    • el: HTMLElement

      HTMLElement

    • event: MouseEvent

      イベントオブジェクト

    Returns [x: number, y: number]

    要素(el)の上での座標

Private _onBlur

Private _onHashChange

Private _onKeyDown

Private _onKeyUp

Private _onMouseDown

Private _onMouseMove

Private _onMouseUp

Private _onMouseWheel

Private _removeEventListener

Private _resetEventParameter

Private _restoreCameraParameterFromHash

Private _setupAnimationBindingBlock

Private _updateURLHash

addEntity

addLayer

Protected calculateAngle

  • calculateAngle(axis, basis_vector, target_vector): number

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

    Parameters

    • axis: Vector3

      回転軸（長さ1とする）

    • basis_vector: Vector3

      基準ベクトル

    • target_vector: Vector3

      目標ベクトル

    Returns number

    回転角度（deg.）

clearEntities

clearLayer

createCameraParameterHash

  • createCameraParameterHash(): undefined | string

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

    Returns undefined | string

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

Protected createDemProvider

Protected createFlyCurve

Protected createImageProvider

Protected createViewer

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

  • ビューワの作成

    Parameters

    • container: string | HTMLElement

      ビューワ作成先のコンテナ（IDまたは要素）

    • access_token: string

      アクセストークン

    • options: maprayui.StandardUIViewer.Option = {}

      生成オプション

    Returns Promise<void>

destroy

disableURLUpdate

enableURLUpdate

  • enableURLUpdate(readUrlOnStart): void

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

    Parameters

    • readUrlOnStart: boolean

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

    Returns void

getCameraAngle

getCameraParameter

getCameraParameterFromHash

getCameraPosition

Protected getControllable

getEntity

getEntityNum

getLayer

getLayerNum

insertLayer

onBlur

Protected onEndFlyCamera

onKeyDown

onKeyUp

onMouseDown

  • onMouseDown(point, event): void

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

    Parameters

    • point: [x: number, y: number]

      要素上の座標

    • event: MouseEvent

      マウスイベントデータ

    Returns void

onMouseMove

  • onMouseMove(point, event): void

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

    Parameters

    • point: [x: number, y: number]

      要素上の座標

    • event: MouseEvent

      マウスイベントデータ

    Returns void

onMouseUp

  • onMouseUp(point, event): void

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

    Parameters

    • point: [x: number, y: number]

      要素上の座標

    • event: MouseEvent

      マウスイベントデータ

    Returns void

onMouseWheel

  • onMouseWheel(point, event): void

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

    Parameters

    • point: [x: number, y: number]

      要素上の座標

    • event: WheelEvent

      ホイールイベント

    Returns void

onStart

onStop

onUpdateFrame

  • onUpdateFrame(delta_time): void

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

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

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

    Parameters

    • delta_time: number

      全フレームからの経過時間（秒）

    Returns void

removeEntity

removeLayer

resetOpEvent

Protected rotateVector

setCameraAngle

setCameraParameter

setCameraPosition

setCameraZoomLimit

  • setCameraZoomLimit(min_zoom_limit): void
  • Experimental

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

    Parameters

    • min_zoom_limit: number

      最小距離

    Returns void

Protected setControllable

setLookAtPosition

startFlyCamera

  • startFlyCamera(options): Promise<void>

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

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

    Parameters

    • options: FlyParam

      引数オブジェクト

    Returns Promise<void>

    Promise

Protected updateCamera

Protected updateClipPlane

Protected updateFlyCamera

  • updateFlyCamera(delta_time): void

  • Fly中のupdate処理

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

    Parameters

    • delta_time: number

    Returns void

Private updateFovy

Private updateFreeRotation

Protected updateRotation

Protected updateTranslation

Protected updateTranslationOfEyeDirection

Protected updateTranslationOfHeight

Settings

Member Visibility

Theme

On This Page