3D Maps のベストプラクティス

このガイドでは、3D マップのウェブコンポーネントと、アプリケーションとの統合に関する考慮事項について詳しく説明します。

場所検索とルート検索のユースケースの例。 — Place Search とルート検索の例。

パフォーマンスに関する注意事項

インタラクティビティと視覚要素をスムーズかつレスポンシブに表示するには、次のアプローチを検討してください。

地図を読み込む

3D マップの初期読み込みとレンダリングの設定では、ブラウザ構成の手法と UI のベストプラクティスを組み合わせて、最適なユーザーエクスペリエンスを実現します。

API の読み込み: 3D マップの非同期動的読み込みを使用して、ページの初期読み込み時に Maps JavaScript API を読み込みます。
ライブラリ: google.maps.importLibrary("maps3d") など、必要なライブラリをプログラムで読み込みます。または、web components like <gmp-map-3d> などのウェブコンポーネントを HTML ページで直接使用し、direct script loading でスクリプトを直接読み込む場合は、適切なタイミングでライブラリが自動的に読み込まれます。
基本地図の機能を管理する: カスタム mapId を使用して、基本地図の場所（スポット）をフィルタし（ハイブリッドモード）、密度を制御します。特に、アプリケーションにマーカーやポリラインなどのカスタム要素の独自のセットがある場合は、この方法をおすすめします。これにより、視覚的な混乱や重複を防ぐことができます。または、場所（スポット）、道路ポリライン、道路名、ストリート名などの基本地図のベクタータイル機能を無効にすることもできます（衛星モード）。
イベント: gmp-steadystate または gmp-error イベントをリッスンして、マーカーの読み込みやカメラのアニメーションなどの後続のロジックを構築します。

地図の読み込みシーケンス — 背景キャンバス > 縮小されたタイル > 地形メッシュ > サーフェスメッシュ（建物など）> 場所（スポット）と道路ラベル、並行して読み込まれるカスタム要素（マーカー、3D モデルなど）

ユーザーインタラクション: 地図のコンテンツを変更する前に、gmp-steadystate イベントを待ちます。ユーザーが最初の gmp-steadystate イベントの前に地図の操作（パン、ズーム）を開始した場合、イベントはユーザーが操作を停止した後にのみトリガーされます。ユーザーが地図をパンまたはズームしている間は、オーバーレイコンテンツ（マーカーやポリゴンなど）の表示や更新を避けてください。 gmp-centerchange、 gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange をリッスンして、オーバーレイコンテンツ（マーカーやポリゴンなど）の表示や更新を避けてください。
継続的な更新には requestAnimationFrame()（rAF）を使用し、負荷の高い計算をドロー呼び出しから厳密に分離します。
- rAF を使用する: 更新をブラウザの表示レートと同期して、スムーズな 60 FPS のアニメーションと電力消費の削減を実現します。
- 負荷の高い描画作業を避ける: 最終更新時に、描画以外の負荷の高いタスクを実行しないでください。
- ロジックを分離する: rAF ループ内で最小限のウェブコンポーネント更新呼び出しを行う前に、負荷の高いロジックをすべて実行します。
初期シーンの設定: <gmp-map-3d> カメラ設定（傾斜など）は読み込み速度に影響します。シーンをズームまたは傾斜させるほど、詳細なポリゴンが表示され、読み込みが必要になります。詳細レベルは、場所によっても異なります（建物が多い都市と、自然の地形のみの田舎など）。
- ズームインが少なく（高度が高い）、傾斜が少ないビューまたは傾斜のないビューをおすすめします。
- ユーザーが特定のエリアに集中できるように、地図に境界線（サンプル）を追加して、タイルを完全に読み込めるようにします。
プリローダーのビジュアル: <gmp-map-3d> は非常に高速に読み込まれますが、低スペックのデバイス（GPU が低い）や帯域幅（4G が遅い）のユーザーの場合、フル解像度で表示するまでに時間がかかることがあります。この場合は、画像、アニメーション、テキストを含むプリローダーを作成し、バックグラウンドで 3D シーンを読み込むことができます。使用するキーイベントについては、以下をご覧ください。

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

2D 地図:
- マーカーなどの地理空間データを含めながら、代替の 2D 地図（衛星）をこれらのユーザーに配信できます。

または、読み込み中に特定の場所を視覚化できるように、衛星モードの補完的な 2D 静的地図を表示することもできます。

視覚要素のパフォーマンスと管理

3D マップには、マーカー、ポリライン、ポリライン、3D モデルなどの視覚要素を、パフォーマンスを最適化し、レンダリング時間を最小限に抑えて表示する方法がいくつか用意されています。視覚要素の量が多い場合でも同様です。

マーカー

最適なカスタマイズ方法:
- PinElement: 基本的なマーカーの変更（色、スケール、枠線、テキストグリフ）には、<gmp-pin> 要素または PinElement クラスを使用します。これは、最もパフォーマンスの高いカスタマイズ方法です。
- HTMLImageElement マーカーまたは SVGElement マーカーは慎重に使用する: 透明度を追加したり、アイコンなどの画像を SVGElement に挿入したりする場合に使用します（base64 エンコードが必要です）。これらは読み込み時にラスタライズされ、パフォーマンスのオーバーヘッドが発生します。HTMLImageElement と SVGElement は、Marker3DElement のデフォルトスロットに割り当てる前に、<template> 要素でラップする必要があります。
- 現時点では、プレーンな HTML や CSS の追加はできません。
競合の動作を管理する: マーカーの collisionBehavior プロパティを活用します。常に表示する必要がある重要なマーカーの場合は、動作を適切に設定します。重要度の低いマーカーの場合は、非表示にすることで、特にズームレベルが高い場合に、地図をすっきりと表示できます。
重要な場所（スポット）のみ: drawsWhenOccluded を使用する（またはプロパティをプログラムで設定する）のは、建物や地形を透かして見ることが絶対に必要なマーカー（救助対象、埋設されたユーティリティライン、ユーザーのアバターなど）のみです。
オクルージョンをテストする: 地図は 3D であるため、マーカーは建物や地形によって視覚的に隠される（オクルージョン）可能性があります。さまざまなカメラアングルとマーカーの高度をテストして、重要な場所（スポット）が表示されたままになるようにするか、オクルージョンが発生したときに表示と高度を調整するロジックを実装します。
高度を活用する: 3D マップでは、マーカーは高度値を含む位置を使用する必要があります。地形や建物に関連付けられたマーカーの場合は、altitudeMode: 'RELATIVE_TO_GROUND'、'RELATIVE_TO_MESH' などの設定を使用して、地図が傾斜または回転したときにマーカーが正しく固定されるようにします。

ポリゴンとポリライン

ポリゴンの読み込みの例 — シナリオ例: 1, 000 個のポリゴンを読み込むのに 100 ～ 150 ミリ秒かかります（最新のノートパソコン: macOS M3 Pro、Chrome）

ジオメトリを簡略化する: レンダリングする前に、パスデータに簡略化アルゴリズムを適用します。これにより、一般的な形状を維持しながら頂点の数を減らし、特に複雑な境界やルートの場合にレンダリング速度が大幅に向上します。
ズームレベルによる間引き: データセットが非常に大きい場合は、ユーザーがエリアにズームインしたときにのみ、詳細なジオメトリを読み込むことを検討してください。ズームレベルが低い場合は、ポリラインまたはポリゴンの簡略化されたバージョンのみで十分です。
押し出しポリゴンの事前計算: ポリゴンが押し出し (extruded: true)されている場合、パスデータは3D ボリューム（メッシュ）を定義します。複雑で頂点の多いポリゴンを処理するには、計算コストが高くなります。ポリゴンのソースデータはできるだけシンプルにしてください。
ポリラインとポリゴンのパフォーマンスをテストする: 多数または複雑なポリライン/ポリゴンを追加する場合は、特に 3D 用に押し出しを行う場合に、フレームレートの低下を引き起こさないようにしてください。必要に応じて、頂点の数を制限するか、簡略化アルゴリズムを使用します。
シェイプを更新する場合は、ループ処理で個々の要素を変更するのではなく、1 回のオペレーションでパス配列全体を変更 します。1 回の割り当てオペレーション（polyline.path = newPathArray; など）は、複数の反復更新よりもはるかに効率的です。
押し出しポリラインを避ける（可能な場合）: ポリラインは高度値を使用して 3D 空間に配置できますが、ポリラインを押し出す（ストローク幅と大きな高度スパンを指定するなど）と、グラフィックの負荷が高くなる可能性があります。可能な限り、地面上の 2D ポリライン（RELATIVE_TO_GROUND）を使用するか、ストローク幅を最小限に抑えてパフォーマンスを向上させます。
drawsOccludedSegments は、重要なルーティング要素にのみ使用します。背景やコンテキストのシェイプの場合は、地図の 3D ジオメトリによって自然にオクルージョンされるようにします。重要でない非表示のジオメトリを表示すると、レンダリングの複雑さが増します。

3D モデル

<gmp-map-3d> では、3D モデル .glb のレンダリングと、gmp-click イベントなどのインタラクティビティが非常に高速です。

圧縮してファイルサイズを最小限に抑える: 特にモバイルネットワークで高速に読み込めるように、複雑な .glb モデルファイルは 5 MB 未満に抑えます（理想的にはそれ以下）。これを実現する主な方法は、Draco 圧縮を .glb ファイル内のメッシュデータに適用することです。これにより、視覚的な品質の低下を最小限に抑えながら、ファイルサイズを大幅に削減できます（多くの場合、50% 以上）。
モデルの原点を中心に配置する: 3D モデリングソフトウェアで、モデルの原点（0, 0, 0 ポイント）がモデルのベースの中央に配置された状態でモデルをエクスポートします。これにより、地図上での配置と回転が簡素化され、モデルが緯度経度座標に正しく固定されます。
CORS を管理する: モデルファイルがウェブアプリケーションとは異なるドメインまたは CDN でホストされている場合は、必要なクロスオリジンリソースシェアリング（CORS）ヘッダー（Access-Control-Allow-Origin: * など）を含めるようにホスティングサーバーを構成する必要があります。そうしないと、地図でモデルを読み込むことができません。