Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

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

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

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

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

地図を読み込む

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

API の読み込み: 3D Maps の非同期動的読み込みを使用して、最初のページ読み込み時に Maps JavaScript API を読み込みます。
ライブラリ: google.maps.importLibrary("maps3d") など、必要に応じてライブラリをプログラムで読み込みます。また、ダイレクトスクリプト読み込みを使用して、HTML ページで <gmp-map-3d> などのウェブコンポーネントを直接使用する場合、ライブラリは適切なタイミングで自動的に読み込まれます。
ベースマップの対象物を管理する: カスタム mapId を使用して、ベースマップのスポット（HYBRID モード）をフィルタし、その密度を制御します。特に、アプリケーションにマーカーやポリラインなどの独自のカスタム要素がある場合に便利です。これにより、視覚的な煩雑さと重複の可能性を回避できます。また、POI、道路ポリライン、道路名、通り名（航空写真モード）などの基本地図ベクタータイル機能を無効にすることもできます。
イベント: 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 地図（SATELLITE）を配信できます。

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

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

3D Maps には、マーカー、ポリライン、ポリライン、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 回のオペレーションでパス配列全体を変更します。1 回の代入オペレーション（例: polyline.path = newPathArray;）は、複数回の反復更新よりもはるかに効率的です。
押し出しポリラインを避ける（可能な場合）: ポリラインは高度値を使用して 3D 空間に配置できますが、ポリラインを押し出す（ストローク幅と大きな高度スパンを指定するなど）と、グラフィック処理が重くなる可能性があります。パフォーマンスを向上させるため、可能な限り、地上（RELATIVE_TO_GROUND）の 2D ポリラインまたは最小のストローク幅を使用してください。
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: * など）を含めるようにホスティングサーバーを構成する必要があります。そうしないと、地図でモデルを読み込むことができません。