このページには、臨場感のあるインタラクティブな 3D エクスペリエンスを創出できる Maps JavaScript の Photorealistic 3D Maps の主要機能に関する情報が記載されています。以降で扱う内容は次のとおりです。
- ユーザー インターフェース イベントを処理し、シームレスな操作を実現する
- 3D 空間を移動できる探索コントロールを導入する
- 使い方ガイド用のプリセットのカメラパスを利用する
- 特定のエリアにフォーカスを合わせた状態を維持するため、カメラ制限を適用する
ユーザー インターフェース イベント
このセクションでは、3D 地図での操作をプログラマティックにリッスンして処理できるインタラクティブなイベントと状態変更通知の概要を説明します。ブラウザ内の JavaScript は「イベント駆動型」です。つまり、プログラムがリッスンしそれに応じてコードを実行するイベントを生成することでユーザー操作に応答します。
イベントには、主に以下の 2 つのタイプがあります。
- ユーザー操作イベント（マウスのクリックなど）。3D 地図のビューポートからコードに伝播されます。このイベントにより、3D 地図環境内でユーザーの直接的なアクションに応答できます。サンプルを表示
- 状態変更通知。基盤となる 3D 地図データモデルとレンダリング状態の更新が反映されます。その際には、従来の
property_changed命名規則が使用されます。
3D マッピング API の各オブジェクトは、一連の名前付きイベントを公開します。これらのイベントに対し、プログラムで組み込みの addEventListener() 関数を使用してイベント リスナーを登録し、イベントが発生したときにロジックを実行できます。次の例は、ユーザーが 3D 地図を操作したときにトリガーされる一般的なイベントを示しています。
次の例は、ユーザーが地図を操作したときにトリガーされるイベントを示しています。
探索コントロール
Maps JavaScript API の Photorealistic 3D Maps に表示される地図には、ユーザーが地図を操作できる UI 要素が含まれます。こうした要素はユーザー コントロールと呼ばれます。探索コントロールはデフォルトで含まれていますが、アプリケーションで無効に設定することもできます。
次の画像では、Maps JavaScript の Photorealistic 3D Maps を使用したデフォルトのコントロールが表示されています。
Maps JavaScript の Photorealistic 3D Maps のコントロールの一覧は次のとおりです。
- ズーム コントロールには、地図のズームレベルを変更する [+] ボタンと [-] ボタンが表示されます。
- 傾斜コントロールを利用すると、カメラの傾斜を変更できるようになります。
- 回転コントロールを使用すると、カメラの向きを変更できるようになります。
- 移動コントロールを使用すると、「←」、「→」、「↑」、「↓」ボタンが表示され、地図の中心点を変更できるようになります。
カメラのコントロールとアニメーション
プリセットのカメラパス
Maps JavaScript の Photorealistic 3D Maps ではプリセットのカメラパスを利用できます。カメラパスは、アニメーションの持続時間を変更（速度を増減）したり、パスを組み合わせたりすることでカスタマイズし、より映画的な体験を創出できます。
Maps JavaScript の Photorealistic 3D Maps は、次のカメラパスに対応しています。
FlyCameraToアニメーションは、地図の中心から指定した場所まで飛びます。FlyCameraAroundアニメーションは、指定した数だけ地図上の 1 点を中心に回転します。
利用可能なこの 2 つのパスを組み合わせて、地図上の特定地点に飛んだり、その地点を中心に回転したりして、任意のタイミングで止まることができます。
カメラの制限
カメラのパンや最大高度をコントロールするか、特定の地図内でのユーザーの移動を制限する緯度 / 経度の境界を作成することをおすすめします。これには、カメラの制限を使用します。
カメラの制限の仕組みと実装の例については、デモをご覧ください。