概要
3D エリア エクスプローラ ソリューションは、場所を探索して体験するためのまったく新しい方法を提供します。このソリューションは、Google Maps Platform の高画質 3D タイルと Places API の機能を活用して、魅力的でインタラクティブな 3D 環境を作成します。
3D エリア エクスプローラは、次のような複数の目的で使用できます。
エリア探索の強化: ユーザーは地域の特徴やランドマークについて理解を深めながら、詳細まで高度に視覚化された近隣地域をバーチャルに探索できます。
場所に基づくナラティブを促進する: 豊富な説明を含む POI（スポット）を組み込むことで、特定の場所についてユーザーに教育や情報提供を行うナラティブ主導のエクスペリエンスを作成できます。
Google マップの 3D 機能を使用した開発を促進する: Google の 3D マッピング データを使用して、没入感のあるインタラクティブな地図を作成できることを示します。
スタートガイド
有効にする
主なテクノロジー
このソリューションは、次の 2 つの主要なテクノロジーを使用して構築されています。
Google Maps Platform API
このエクスペリエンスを作成するために、Google Maps Platform のいくつかの API を使用して基本地図とデータを取得します。
- Google Maps Photorealistic 3D Tiles: 建物や地形の高解像度 3D モデルにより、都市環境をリアルで視覚的に魅力的な表現で表示できます。
- Places API: アプリは、探索されたエリア内のスポット（POI）を特定して詳細情報を表示し、地域の情報でユーザー エクスペリエンスを充実させることができます。
- 予測入力を使用すると、ユーザーは特定の場所や関心のある地域を検索できます。
CesiumJS
CesiumJS は、高解像度の 3D 地球儀のレンダリングと表示を行います。建物や地形の 3D メッシュモデルを提供する Google の Photorealistic 3D Tiles の読み込みと可視化を処理します。
カメラ管理: CesiumJS には、カメラの位置、向き、動きを制御するツールが用意されています。これには以下が該当します。
- アプリの読み込み時に、指定した地域に焦点を合わせるように初期視点を設定する。
- 探索用の自動オービット アニメーションなど、動的なカメラの動きを実装する。
- 地球儀に対するユーザー操作（パン、ズーム、回転など）の処理（そのような機能が含まれている場合）。
Photorealistic 3D Tiles が 3D Tiles レンダラと連携する方法を学習する。
主要コンポーネント
このアプリケーションは、次の 2 つの異なるアプリに分割されています。
- 管理アプリ
- デモアプリ
次の図は、2 つのアプリケーションの違いと相関関係の概要を示しています。
各アプリをさらに調査すると有益です。
管理アプリ
このアプリケーションには、3D エクスペリエンスをカスタマイズできるユーザー フレンドリーなインターフェースが用意されています。
場所の検索 : 統合された Google Maps Platform の予測入力検索バーを使用して、紹介するエリアを検索します。場所を選択すると、カメラがそのエリアにシームレスに移動します。
カメラ: カメラの移動速度と軌道タイプを調整して、選択した視聴エクスペリエンスを作成します。
場所（POI）: 表示するスポット（レストラン、カフェ、ランドマークなど）の密度、検索半径、タイプを定義します。
このアプリを使用して、エンドユーザーのエクスペリエンスをカスタマイズします。
ラスベガス ストリップ周辺の観光スポットの密集したビューをご覧ください。
グランド キャニオンを探索して、主要な観光スポットをすべて確認する
すべてのカスタマイズの詳細な説明については、3D エリア エクスプローラのカスタマイズをご覧ください。
デモアプリ
これは、管理アプリで作成した構成を読み込む、最終的なユーザー向けアプリケーションです。この没入型の 3D 環境で、ユーザーは選択したエリアを探索し、ハイライト表示した場所を見つけることができます。
管理アプリを使用してデザインをカスタマイズしたら、構成をダウンロードして、ソースコードからカスタム アプリケーションを実行できます。
ユーザー エクスペリエンス
このアプリケーションの主な機能は次のとおりです。
- ユーザーは、建物、ランドマーク、地形など、エリアを 3D でインタラクティブに探索できます。
- ユーザーは、近くの場所（博物館、公園、レストランなど）を検索して見つけることができます。
場所を選択すると、その場所に関連する詳細情報や説明が表示されます。
デベロッパーは、設定とコントロール（管理アプリを使用している場合）を使用して、探索エクスペリエンスをパーソナライズできます。
自動回転が有効になっているため、カメラは選択したエリアの中心を軸に自動的に回転します。
前提条件
Google Maps API キー: 次の API が有効になっている有効な API キーが必要です。
ウェブサーバー: 次のいずれかからアプリケーションを提供できます。
- ローカル ウェブサーバー（Node.js、http-server などを使用）
- 静的ウェブ ホスティング サービス（アプリケーションには Dockerfile が付属しています）
デプロイ オプションの詳細については、GitHub プロジェクトの readme セクションをご覧ください。
デプロイ
アプリは、GKE や GAE などのコンテナ環境にノード アプリケーションまたは Docker コンテナとしてデプロイできます。ホスト型デモでは、次のアーキテクチャを使用します。
- このアーキテクチャでは、コードは GitHub プロジェクトにあります。
- Cloud Build は、main への push でコードを取得し、ビルド オペレーションをトリガーします。
- ビルドの一環として、API キーを挿入してイメージを作成し、Artifact Registry に保存します。
- 最後に、Artifact Registry から Cloud Run に最新の安定版イメージをデプロイします。
- また、デプロイされたアプリの健全性を確認するために、いくつかのヘルスチェックとモニタリングが実行されています。
お支払い情報
3D エリア エクスプローラ ソリューションは、Google Maps Platform サービスを使用して、没入感のある動的なエクスペリエンスを提供します。一部の API では料金が発生する場合があります。以下に、API の概要と料金へのリンクを示します。
Google Maps Platform - 3D Tiles API
3D エリア エクスプローラ ソリューションは、3D Tiles API を利用して、地理空間データによる視覚的なエクスペリエンスを強化します。3D Tiles API の料金について詳しくは、Google Maps Platform の 3D Tiles API の料金をご覧ください。
Google Maps Platform - Places API
Places API は、位置情報ベースのデータに使用され、3D エリア エクスプローラの機能に豊富な情報を追加します。Google Places API に関連する費用については、Google Maps Platform - Places API の料金をご覧ください。
Google Maps Platform - Autocomplete API
予測入力機能により、ユーザー インタラクションが向上します。Google Maps Autocomplete API の料金の詳細については、Google Maps Platform の Places Autocomplete の料金をご覧ください。
CesiumJS
CesiumJS は、3D 地球儀の可視化に使用されます。CesiumJS 自体はオープンソースですが、追加機能やサービスには独自の費用がかかる場合があります。プレミアム サービスについては、CesiumJS のドキュメントをご覧ください。
料金は使用量に基づいて個別に決定されるため、各 API の料金の詳細を確認することが重要です。Google Maps Platform には、一定の使用量を無料で利用できる無料枠が用意されています。料金の詳細は、リクエスト数や使用リージョンなどの要因によって異なる場合があります。
Google Maps Platform と CesiumJS の使用料金に関する最新かつ正確な情報については、必ず公式の料金ページをご覧ください。これらのサービスに記載されている利用規約を遵守し、関連する費用を効果的に管理して把握してください。
まとめ
このドキュメントでは、3D エリア エクスプローラの機能、コンポーネント、ユーザー エクスペリエンス、技術要件の概要について説明します。
Google の高画質 3D タイルと Places API を活用することで、周辺地域のバーチャルな探索、スポットの発見、地域の歴史の学習が可能になります。
3D エリア エクスプローラは、エリアの紹介、探索の強化、デジタル ストーリーテリングの促進など、視覚的に優れたプラットフォームを提供します。
デモを試して、管理アプリを使用してカスタマイズし、魅力的で有益な 3D エクスペリエンスを作成してください。