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

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

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

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

地図を読み込む

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

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

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

ユーザー操作: 地図のコンテンツを変更する前に、gmp-steadystate イベントを待ちます。ユーザーが最初の gmp-steadystate イベントの前に地図の操作（パン、ズーム）を開始した場合、イベントはユーザーが操作を停止した後にのみトリガーされます。ユーザーが地図をパンまたはズームしている間は、オーバーレイコンテンツ（マーカーやポリゴンなど）の表示や更新を避けます。gmp-centerchange、gmp-headingchange、gmp-rangechange、gmp-rollchange、gmp-tiltchange をリッスンして、オーバーレイコンテンツ（マーカーやポリゴンなど）の表示や更新を避けます。
継続的な更新には requestAnimationFrame()（rAF）を使用し、負荷の高い計算と描画呼び出しを厳密に分離します。
- rAF を使用する: 更新をブラウザの表示レートと同期させ、スムーズな 60FPS アニメーションを実現し、消費電力を削減します。
- 負荷の大きい描画作業を避ける: 最終更新中に負荷の大きい描画以外のタスクを実行しないでください。
- ロジックの分離: 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 静的地図を表示することもできます。

Visual Elements のパフォーマンスと管理

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

マーカー

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

ポリゴンとポリライン

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

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

3D モデル

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

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