Mini Tokyo 3D

# Map

Map オブジェクトは、Web ページ上の Mini Tokyo 3D マップを表しています。Map を作るには container やその他のオプションを指定してコンストラクタを呼び出します。すると、Web ページ上のマップが初期化され、Map が返されます。

Evented (opens new window) を拡張しています。

new Map(options: Object)

# パラメータ

# options (Object (opens new window))

名前 説明
options.accessToken
string (opens new window)		 Mapbox (opens new window) のアクセストークン。未指定の場合はマップのロード時にエラーが起きるため、必ず自分の Web サイト専用のアクセストークンを入手して指定する
options.bearing
number (opens new window)
デフォルト: 0		 初期のマップの方角。真北から反時計回りの角度で指定する。未指定の場合は、0 に設定される
options.center
LngLatLike (opens new window)
デフォルト: [139.7670, 35.6814]		 初期のマップ中心点の座標。未指定の場合は、東京駅付近（[139.7670, 35.6814]）に設定される。注: Mini Tokyo 3D では、GeoJSON と同様に経度、緯度の順で座標を指定する
options.clockControl
boolean (opens new window)
デフォルト: true		 true の場合、時刻表示をマップに追加する
options.configControl
boolean (opens new window)
デフォルト: true		 true の場合、設定ボタンをマップに追加する
options.container
string (opens new window)		 Mini Tokyo 3D がマップを表示する HTML 要素の id。指定された要素は、子要素を含んではならない
options.dataUrl
string (opens new window)		 Mini Tokyo 3D のデータ URL。未指定の場合は、'https://minitokyo3d.com/data' が使われる
options.ecoFrameRate
number (opens new window)
デフォルト: 1		 エコモードがオンの場合の、列車や旅客機のアニメーションのフレームレート（1秒あたりのフレーム数）。1〜60 の間で指定する。数値を小さくすると、アニメーションの滑らかさが減少する一方で CPU リソースの使用も下がるため、モバイルデバイスでのバッテリー消費を抑えることができる。未指定の場合は、1 に設定される
options.ecoMode
string (opens new window)
デフォルト: 'normal'		 初期のエコモードを指定する。'normal' または 'eco' がサポートされている
options.fullscreenControl
boolean (opens new window)
デフォルト: true		 true の場合、フルスクリーンボタンをマップに追加する
options.lang
string (opens new window)		 言語を表す IETF 言語タグ (opens new window)。未指定の場合は、ブラウザのデフォルト言語が使われる。現在 'ja', 'en', 'ko', 'zh-Hans', 'zh-Hant', 'th', 'ne', 'pt-BR', 'fr' がサポートされている。サポートしていない言語が指定された場合は 'en' が使われる
options.modeControl
boolean (opens new window)
デフォルト: true		 true の場合、表示モード切り替えボタンをマップに追加する
options.navigationControl
boolean (opens new window)
デフォルト: true		 true の場合、ナビゲーションボタンをマップに追加する
options.pitch
number (opens new window)
デフォルト: 60		 初期のマップの傾き。画面に対する地表面の角度（0〜85）で指定する。未指定の場合は、60 に設定される
options.plugins
Array (opens new window)<PluginInterface>		 追加するプラグインの配列。各プラグインは PluginInterface を実装する必要がある
options.searchControl
boolean (opens new window)
デフォルト: true		 true の場合、検索ボタンをマップに追加する
options.secrets
Secrets		 データ取得に使用するアクセストークンを格納するオブジェクト
options.selection
string (opens new window)		 追跡する列車またはフライトの ID。列車 ID は'odpt.Train:<事業者ID>.<路線ID>.<列車番号>'、フライト ID は'odpt.FlightInformationArrival:<事業者ID>.<空港ID>.<フライト番号>'または'odpt.FlightInformationDeparture:<事業者ID>.<空港ID>.<フライト番号>'の形式で表される文字列。'odpt.*:'の部分は省略可。詳細は公共交通オープンデータセンター API 仕様 (opens new window)を参照のこと
options.trackingMode
string (opens new window)
デフォルト: 'position'		 初期の追跡モードを指定する。'position', 'back', 'topback', 'front', 'topfront', 'helicopter', 'drone', 'bird' がサポートされている
options.zoom
number (opens new window)
デフォルト: 14		 初期のマップのズームレベル。未指定の場合は、14 に設定される

# インスタンスメンバ

# addLayer(layer)

マップにレイヤーを追加します。

# パラメータ

layer (Object (opens new window) | CustomLayerInterface (opens new window) | GeoJsonLayerInterface | ThreeLayerInterface | Tile3DLayerInterface) Mapbox スタイル仕様のレイヤー定義 (opens new window)、CustomLayerInterface (opens new window) 仕様、GeoJsonLayerInterface 仕様、ThreeLayerInterface 仕様、または Tile3DLayerInterface 仕様のいずれかに準拠した、追加するレイヤー

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# easeTo(options)

center、zoom、bearing および pitch の任意の組み合わせを、新旧の値の間のアニメーションによる遷移で変更します。マップは、options で指定されていない項目については、現在の値を保持します。

注: ユーザーがオペレーティングシステムで reduced motion (動きの抑制) アクセシビリティ機能を有効にしている場合、options に essential:true が含まれていない限り、遷移は即座に行われます。

# パラメータ

options (Object (opens new window)) 遷移先とアニメーションを記述するオプション。CameraOptions (opens new window) と AnimationOptions (opens new window) が使用可能

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# flyTo(options)

center、zoom、bearing および pitch の任意の組み合わせを変更し、飛行をイメージした曲線に沿って遷移をアニメーションします。アニメーションにはズームとパンがシームレスに組み込まれており、ユーザーが長距離を移動した後でも方向感を維持できるようになっています。

ユーザーがオペレーティングシステムで reduced motion (動きの抑制) アクセシビリティ機能を有効にしている場合、options に essential:true が含まれていない限り、アニメーションはスキップされ jumpTo と同じ動作になります。

# パラメータ

options (Object (opens new window)) 遷移先とアニメーションを記述するオプション。CameraOptions (opens new window)、AnimationOptions (opens new window) に加えて、次に示すオプションが使用可能

名前 説明
options.curve
number (opens new window)
デフォルト: 1.42		 飛行経路に沿って発生するズームの「カーブ」。高い値を設定するとズームのアニメーションの誇張が最大になり、低い値を設定するとズームの効果が最小になって Map#easeTo の動きに近づく。1.42 は、van Wijk (2003) (opens new window) で論じられた、ユーザー調査の参加者によって選択された平均値。Math.pow(6, 0.25) の値は平均速度の平方根に相当する。1 の値は円運動を生成する。options.minZoom が指定された場合、このオプションは無視される
options.maxDuration
number (opens new window)		 アニメーションの最大継続時間をミリ秒単位で指定。継続時間が最大継続時間を超えると、0 にリセットされる
options.minZoom
number (opens new window)		 飛行経路のピークでのゼロベースのズームレベル。このオプションを指定すると、options.curve は無視される
options.screenSpeed
number (opens new window)		 直線的なタイミングカーブを想定した場合の、1秒あたりのスクリーンフルで表したアニメーションの平均速度。options.curve が指定された場合、このオプションは無視される
options.speed
number (opens new window)
デフォルト: 1.2		 options.curve と関連して定義されるアニメーションの平均速度。速度が 1.2 の場合、マップが飛行経路に沿って 1 秒ごとに options.curve の 1.2 倍のスクリーンフルで移動しているように見えることを意味する。スクリーンフルとは、マップの表示部分の幅のこと。これは固定の物理的な距離に対応するものではなく、ズームレベルによって変化する

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# getBearing()

現在のマップの方角を返します。方角は、コンパスの方向を「上」としたものです。例えば、90°の方角は、東が上になるように地図の向きを変えた状態です。

# 返り値

number (opens new window): 現在のマップの方角

# getCenter()

マップ中心点の座標を返します。

# 返り値

LngLat (opens new window): マップ中心点の座標

# getClockMode()

現在のクロックモードを返します。

# 返り値

string (opens new window): 現在のクロックモードを表す文字列。'realtime' または 'playback' のどちらか

# getEcoMode()

現在のエコモードを返します。

# 返り値

string (opens new window): 現在のエコモードを表す文字列。'normal' または 'eco' のどちらか

# getMapboxMap()

マップ内で使われている Mapbox の Map (opens new window) オブジェクトを返します。

# 返り値

Map (opens new window): Mapbox の Map

# getModelPosition(lnglat, altitude)

LngLat を MercatorCoordinate に投影し、東京駅を原点とした変換後のメルカトル座標を返します。

# パラメータ

lnglat (LngLatLike (opens new window)) 投影する地理的位置

altitude (number (opens new window)) 位置の高度（メートル単位）

# 返り値

{x: number (opens new window), y: number (opens new window), z: number (opens new window)}: 東京駅を原点とした変換後のメルカトル座標

# getModelScale()

メートル単位の現実世界の座標系から MercatorCoordinate に変換する際のスケールを返します。これにより、東京駅における MercatorCoordinate 単位での1メートルの距離が得られます。

# 返り値

number (opens new window): メートル単位の現実世界での座標系から MercatorCoordinate に変換する際のスケール

# getPitch()

現在のマップの傾きを返します。

# 返り値

number (opens new window): 現在のマップの傾き。画面に対する地表面の角度で表される

# getSelection()

追跡中の列車またはフライトの ID を返します。

# 返り値

string (opens new window): 追跡中の列車またはフライトの ID。列車 ID は'<事業者ID>.<路線ID>.<列車番号>'、フライト ID は'<事業者ID>.<空港ID>.<フライト番号>'の形式で表される文字列

# getTrackingMode()

現在の追跡モードを返します。追跡モードの詳細については、こちらを参照してください。

# 返り値

string (opens new window): 現在の追跡モードを表す文字列。'position', 'back', 'topback', 'front', 'topfront', 'helicopter', 'drone', 'bird' のいずれか

注意

追跡モード 'heading' は廃止されており、'topback' に置き換えられます。

# getViewMode()

現在のビューモードを返します。

# 返り値

string (opens new window): 現在のビューモードを表す文字列。'ground' または 'underground' のどちらか

# getZoom()

現在のマップのズームレベルを返します。

# 返り値

number (opens new window): 現在のマップのズームレベル

# hasDarkBackground()

マップの背景色が暗いかどうかをチェックします。

# 返り値

boolean (opens new window): マップの背景色が暗い場合は true、そうでない場合は false

# jumpTo(options)

center、zoom、bearing および pitch の任意の組み合わせを、アニメーションによる遷移なしで変更します。マップは、options で指定されていない項目については、現在の値を保持します。

# パラメータ

options (CameraOptions (opens new window)) オプションのオブジェクト

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# off(type, listener)

Map#on で追加したイベントリスナを削除します。

# パラメータ

type (string (opens new window)) リスナの登録に使用したイベントタイプ

listener (Function (opens new window)) リスナとして登録した関数

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# on(type, listener)

指定したタイプのイベントのリスナを追加します。

# パラメータ

type (string (opens new window)) 待ち受けるイベントタイプ

listener (Function (opens new window)) イベントが発生したときに呼び出される関数

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# once(type, listener)

指定したイベントタイプに対して一度だけ呼び出されるリスナを追加します。

# パラメータ

type (string (opens new window)) 待ち受けるイベントタイプ

listener (Function (opens new window)) イベントが発生したときに呼び出される関数

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# removeLayer(id)

指定された ID のレイヤーをマップから削除します。

そのようなレイヤーが存在しない場合、error イベントが発生します。

# パラメータ

id (string (opens new window)) 削除するレイヤーの ID

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setBearing(bearing)

マップの方角を設定します。方角は、コンパスの方向を「上」としたものです。例えば、90°の方角は、東が上になるように地図の向きを変えた状態です。

jumpTo({bearing: bearing}) と同じ。

# パラメータ

bearing (number (opens new window)) 設定する方角

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setCenter(center)

マップ中心点の座標を設定します。jumpTo({center: center}) と同じです。

# パラメータ

center (LngLatLike (opens new window)) 設定する中心点の座標

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setClockMode(mode)

クロックモードを設定します。リアルタイムクロックモード（'realtime'）では、列車や旅客機は現在時刻の実際の運行に合わせて地図上に表示されます。再生クロックモード（'playback'）では、時刻や時間の経過速度の指定ができるようになります。

# パラメータ

mode (string (opens new window)) クロックモードを表す文字列。'realtime' または 'playback' のどちらか

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setEcoMode(mode)

エコモードを設定します。ノーマルモード（'normal'）では、列車や旅客機のアニメーションのフレームレートは60に設定されます。エコモード（'eco'）では、フレームレートは Map のコンストラクタオプション ecoFrameRate で指定された値に設定されます。

# パラメータ

mode (string (opens new window)) エコモードを表す文字列。'normal' または 'eco' のどちらか

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setLayerVisibility(layerId, visibility)

レイヤの可視性を設定します。表示する場合は 'visible' を、表示しない場合は 'none' を指定します。

# パラメータ

layerId (string (opens new window)) 可視性を設定するレイヤーのID

visibility (string (opens new window)) このレイヤーを表示するかどうか。'visible' または 'none' のどちらか

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setPitch(pitch)

マップの傾きを設定します。jumpTo({pitch: pitch}) と同じです。

# パラメータ

pitch (number (opens new window)) 設定する傾き。画面に対する地表面の角度（0〜85）で指定する

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setSelection(id)

追跡する列車またはフライトの ID を設定します。列車 ID は'odpt.Train:<事業者ID>.<路線ID>.<列車番号>'、フライト ID は'odpt.FlightInformationArrival:<事業者ID>.<空港ID>.<フライト番号>'または'odpt.FlightInformationDeparture:<事業者ID>.<空港ID>.<フライト番号>'の形式で表される文字列です。'odpt.*:'の部分は省略可能です。詳細は公共交通オープンデータセンター API 仕様 (opens new window)を参照してください。

# パラメータ

id (string (opens new window)) 追跡する列車またはフライトの ID

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setTrackingMode(mode)

追跡モードを設定します。追跡モードの詳細については、こちらを参照してください。

# パラメータ

mode (string (opens new window)) 追跡モードを表す文字列。'position', 'back', 'topback', 'front', 'topfront', 'helicopter', 'drone', 'bird' のいずれか

注意

追跡モード 'heading' は廃止されており、'topback' に置き換えられます。

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setViewMode(mode)

ビューモードを設定します。地上表示モード（'ground'）では、地上の路線や駅、列車や旅客機が明るく表示され、地下の路線、駅、列車は半透明になります。地下表示モード（'underground'）では、地図が暗転して地上の路線や駅、列車や旅客機が半透明になる一方で、地下の路線、駅、列車が明るく表示されます。

# パラメータ

mode (string (opens new window)) ビューモードを表す文字列。'ground' または 'underground' のどちらか

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# setZoom(zoom)

マップのズームレベルを設定します。jumpTo({zoom: zoom}) と同じです。

# パラメータ

zoom (number (opens new window)) 設定するズームレベル (0〜22)

# 返り値

Map: メソッドチェーンを可能にするために自分自身を返す

# イベント

# boxzoomcancel

ユーザーが「ボックスズーム」操作をキャンセルした場合や、境界ボックスが最小サイズのしきい値を満たしていない場合に発生します。BoxZoomHandler (opens new window) を参照してください。

型 MapBoxZoomEvent (opens new window)

# boxzoomend

「ボックスズーム」操作が終了したときに発生します。BoxZoomHandler (opens new window) を参照してください。

型 MapBoxZoomEvent (opens new window)

# boxzoomstart

「ボックスズーム」操作が開始されたときに発生します。BoxZoomHandler (opens new window) を参照してください。

型 MapBoxZoomEvent (opens new window)

# click

マップ上の同じ場所でポインティングデバイス（通常はマウス）を押して離すと発生します。

型 MapMouseEvent (opens new window)

# clockmode

クロックモードが変更されたときに発生します。

型 Object (opens new window)

# プロパティ

mode (string (opens new window)): クロックモードを表す文字列。'realtime' または 'playback' のどちらか

# contextmenu

マウスの右ボタンがクリックされたとき、またはマップ内でコンテキストメニューキーが押されたときに発生します。

型 MapMouseEvent (opens new window)

# dblclick

マップ上の同じ場所でポインティングデバイス（通常はマウス）を2回連続して押して離すと発生します。

型 MapMouseEvent (opens new window)

# deselection

列車または航空機の追跡が解除された時に発生します。

型 Object (opens new window)

# プロパティ

deselection (string (opens new window)): 追跡が解除された列車またはフライトの ID。列車 ID は'<事業者ID>.<路線ID>.<列車番号>'、フライト ID は'<事業者ID>.<空港ID>.<フライト番号>'の形式で表される文字列

# drag

「移動のためのドラッグ」操作中に繰り返し発生します。DragPanHandler (opens new window) を参照してください。

型 (MapMouseEvent (opens new window) | MapTouchEvent (opens new window))

# dragend

「移動のためのドラッグ」操作が終了したときに発生します。DragPanHandler (opens new window) を参照してください。

型 (MapMouseEvent (opens new window) | MapTouchEvent (opens new window))

# dragstart

「移動のためのドラッグ」操作が開始されたときに発生します。DragPanHandler (opens new window) を参照してください。

型 (MapMouseEvent (opens new window) | MapTouchEvent (opens new window))

# ecomode

エコモードが変更されたときに発生します。

型 Object (opens new window)

# プロパティ

mode (string (opens new window)): エコモードを表す文字列。'normal' または 'eco' のどちらか

# error

エラーが発生したときに発生します。これは Mini Tokyo 3D の主要なエラー報告メカニズムです。throw の代わりにイベントを使用することで、非同期処理に対応できるようにしています。リスナが error イベントにバインドされていない場合、エラーはコンソールに出力されます。

型 Object (opens new window)

# プロパティ

message (string (opens new window)): エラーメッセージ

# load

必要なリソースがすべてダウンロードされ、最初の完全なマップの視覚的なレンダリングが行われた後、直ちに発生します。

型 Object (opens new window)

# mousedown

マップ内でポインティングデバイス（通常はマウス）が押されたときに発生します。

型 MapMouseEvent (opens new window)

# mousemove

カーソルがマップ内にあるときにポインティングデバイス（通常はマウス）が移動したときに発生します。マップ上でカーソルを移動すると、カーソルがマップ内の位置を変更するたびにイベントが発生します。

型 MapMouseEvent (opens new window)

# mouseover

ポインティングデバイス（通常はマウス）がマップ内で移動したときに発生します。マップを含む Web ページ上でカーソルを移動すると、カーソルがマップまたは子要素に入るたびにイベントが発生します。

型 MapMouseEvent (opens new window)

# mouseup

マップ内でポインティングデバイス（通常はマウス）が離されたときに発生します。

型 MapMouseEvent (opens new window)

# move

ユーザの操作や Map#flyTo などのメソッドの結果として、あるビューから別のビューへのアニメーション遷移中に繰り返し発生します。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# moveend

ユーザの操作や Map#jumpTo などのメソッドの結果として、マップがあるビューから別のビューへの遷移を完了した直後に発生します。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# movestart

ユーザの操作や Map#jumpTo などのメソッドの結果として、マップがあるビューから別のビューに遷移する直前に発生します。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# pitch

ユーザの操作や Map#flyTo などのメソッドの結果として、マップの傾きの状態遷移アニメーションの間に繰り返し発生します。

型 MapDataEvent (opens new window)

# pitchend

ユーザの操作や Map#flyTo などのメソッドの結果として、マップの傾きが変化し終わった直後に発生します。

型 MapDataEvent (opens new window)

# pitchstart

ユーザの操作や Map#flyTo などのメソッドの結果として、マップの傾きが変化し始める直前に発生します。

型 MapDataEvent (opens new window)

# resize

マップのサイズが変更された直後に発生します。

# rotate

「回転のためのドラッグ」操作中に繰り返し発生します。DragRotateHandler (opens new window) を参照してください。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# rotateend

「回転のためのドラッグ」操作が終了したときに発生します。DragRotateHandler (opens new window)を参照してください。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# rotatestart

「回転のためのドラッグ」操作が開始されたときに発生します。DragRotateHandler (opens new window)を参照してください。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# selection

列車または航空機の追跡が開始された時に発生します。

型 Object (opens new window)

# プロパティ

selection (string (opens new window)): 追跡が開始された列車またはフライトの ID。列車 ID は'<事業者ID>.<路線ID>.<列車番号>'、フライト ID は'<事業者ID>.<空港ID>.<フライト番号>'の形式で表される文字列

# touchcancel

マップ内で touchcancel (opens new window) イベントが発生したときに発生します。

型 MapTouchEvent (opens new window)

# touchend

マップ内で touchend (opens new window) イベントが発生したときに発生します。

型 MapTouchEvent (opens new window)

# touchmove

マップ内で touchmove (opens new window) イベントが発生したときに発生します。

型 MapTouchEvent (opens new window)

# touchstart

マップ内で touchstart (opens new window) イベントが発生したときに発生します。

型 MapTouchEvent (opens new window)

# trackingmode

追跡モードが変更されたときに発生します。

型 Object (opens new window)

# プロパティ

mode (string (opens new window)): 追跡モードを表す文字列。'position', 'back', 'topback', 'front', 'topfront', 'helicopter', 'drone', 'bird' のいずれか

注意

追跡モード 'heading' は廃止されており、'topback' に置き換えられます。

# viewmode

ビューモードが変更されたときに発生します。

型 Object (opens new window)

# プロパティ

mode (string (opens new window)): ビューモードを表す文字列。'ground' または 'underground' のどちらか

# wheel

マップ内で wheel (opens new window) イベントが発生したときに発生します。

型 MapWheelEvent (opens new window)

# zoom

ユーザの操作や Map#flyTo などのメソッドの結果として、あるズームレベルから別のズームレベルへのアニメーション遷移中に繰り返し発生します。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# zoomend

ユーザの操作や Map#flyTo などのメソッドの結果として、マップがあるズームレベルから別のズームレベルへの移行を完了した直後に発生します。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

# zoomstart

ユーザの操作や Map#flyTo などのメソッドの結果として、マップがあるズームレベルから別のズームレベルへの移行を開始する直前に発生します。

型 (MapMouseEvent (opens new window)|MapTouchEvent (opens new window))

最終更新日時: 2023/4/11 19:24:56

← mapboxgl →