概要
3D エリア エクスプローラ ソリューションにより、まったく新しい方法で場所を見つけて体験できます。このソリューションでは、Google Maps Platform Photorealistic 3D Tiles と Places API の機能を活用して、魅力的でインタラクティブな 3D 環境を作成します。
3D エリア エクスプローラは、次のような複数の用途に使用できます。
地域探索の強化: ユーザーは、細部を視覚的に示しながら周辺地域を仮想的に探索し、地域の特徴やランドマークに関する分析情報を得ることができます。
位置情報に基づくストーリーの推進: スポット（スポット）と詳細な説明を組み込むことで、特定の場所についてユーザーに情報を伝え、情報を提供するストーリー主体のエクスペリエンスを構築できます。
Google マップの 3D 機能を使用して開発を促進: Google の 3D マッピング データを使用して、没入感のあるインタラクティブな地図を作成できる可能性を実証
ご利用方法:
有効にする
主なテクノロジー
このソリューションは、次の 2 つの主要テクノロジーを使用して構築されています。
Google Maps Platform API:
Google では、Google Maps Platform の複数の API を使用して基本地図とデータを取得することで、この地図エクスペリエンスを作り出しています。
- Google マップの Photorealistic 3D Tiles: 建物や地形の高解像度 3D モデルにより、都市環境をリアルで視覚的に表現できます。
- Places API: 探索エリア内のスポットに関する詳細情報を識別して表示し、地域の情報でユーザー エクスペリエンスを拡充できます。
- オートコンプリートは、ユーザーが特定の場所や関心のある地域を検索するのに役立ちます。
CesiumJS
CesiumJS は、高解像度の 3D 地球のレンダリングと表示を行います。建物や地形の 3D メッシュモデルを提供する Google の Photorealistic 3D Tiles の読み込みと可視化を処理します。
カメラ管理: CesiumJS には、カメラの位置、向き、動きを制御するためのツールが用意されています。該当するものは次のとおりです。
- アプリが読み込まれるときに、指定した周辺地域に焦点を合わせるように初期の視点を設定する。
- 探索用の自動軌道アニメーションなど、動的なカメラの移動を実装する。
- 地球を操作したユーザーがパン、ズーム、回転する機能を含む場合、その操作を処理する。
Photorealistic 3D Tiles で 3D Tiles レンダラと連携する方法を確認する。
主要コンポーネント
このアプリケーションは、次の 2 つのアプリに分かれています。
- 管理アプリ
- デモアプリ
次の図は、2 つのアプリケーションの違いと相関関係の概要を示しています。
各アプリをさらに調査すると、役に立つことがあります。
管理アプリ
このアプリは、3D 体験をカスタマイズできるユーザー フレンドリーなインターフェースを備えています。
場所の検索 : 統合された Google Maps Platform のオートコンプリート検索バーを使用して、紹介するエリアを検索できます。場所を選択すると、カメラはそのエリアにシームレスにジャンプします。
カメラ: カメラの移動速度と軌道タイプを調整して、選択した表示方法を作成します。
場所（POI）: 表示対象とするスポットの密度、検索範囲、スポットの種類（レストラン、カフェ、ランドマークなど）を定義します。
このアプリを使用して、エンドユーザーのエクスペリエンスをカスタマイズします。
ラスベガス ストリップ周辺の観光スポットの密集ビューをご覧ください。
すべての主要な観光スポットでグランド キャニオンを探索
すべてのカスタマイズについては、3D エリア エクスプローラのカスタマイズについて詳しい説明があります。
デモアプリ
これは、管理アプリで作成した構成を読み込む、最終的なユーザー向けアプリです。この没入型の 3D 環境では、ユーザーは選択された領域を探索し、ハイライトされた場所を見つけることができます。
Admin アプリを使用して外観をカスタマイズしたら、構成をダウンロードして、ソースコードからカスタム アプリケーションを実行できます。
ユーザー エクスペリエンス
アプリケーションの主な機能は次のとおりです。
- ユーザーは、建物、ランドマーク、地形などのエリアを 3D でインタラクティブに探索できます。
- ユーザーは付近の場所（美術館、公園、レストランなど）を検索して見つけることができます。
場所を選択すると、その場所に関する詳細情報やストーリーを表示できます。
デベロッパーは設定やコントロールから探索エクスペリエンスをカスタマイズできます（管理アプリを使用している場合）。
自動回転が有効になり、選択した領域の中心を中心としてカメラが自動的に回転します。
前提条件
Google Maps API キー: 次の API を有効にした有効な API キーが必要です。
ウェブサーバー: 次のいずれかからアプリケーションを配信できます。
- ローカル ウェブサーバー（Node.js、http-server などを使用）
- 静的ウェブ ホスティング サービス（アプリケーションには Dockerfile が付属）
デプロイ オプションの詳細については、GitHub プロジェクトの readme セクションをご覧ください。
デプロイ
アプリは、GKE や GAE などの任意のコンテナ環境にノード アプリケーションまたは Docker コンテナとしてデプロイできます。ホスト型デモでは、次のアーキテクチャを使用します。
- このアーキテクチャでは、コードは GitHub プロジェクトに格納されています。
- Cloud Build は、メインに push するとコードを取得し、ビルド オペレーションをトリガーします。
- ビルドの一環として API キーを挿入し、イメージを作成して Artifact Registry に保存します。
- 最後に、Artifact Registry から Cloud Run に最新の安定版イメージをデプロイします。
- また、デプロイされたアプリの状態をチェックするために、いくつかのヘルスチェックとモニタリングが実行されています。
お支払い情報
3D エリア エクスプローラ ソリューションは、Google Maps Platform サービスを使用して、没入感のある動的なエクスペリエンスを提供します。一部の API では料金が発生する場合があります。これは API の概要と料金へのリンクです
Google Maps Platform - 3D Tiles API:
ストーリーテリング ソリューションでは、3D Tiles API を利用して地理空間データによる視覚的エクスペリエンスを向上させます。3D Tiles API の料金について詳しくは、Google Maps Platform の 3D Tiles API の料金をご覧ください。
Google Maps Platform - Places API:
位置情報ベースのデータには Places API が使用され、ストーリーテリングのエクスペリエンスに豊富な情報が追加されます。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 の Photorealistic 3D Tiles と Places API を活用することで、近隣の仮想探索、スポットの検出、地域の歴史の学習が可能です。
3D エリア エクスプローラは、地域の紹介、探検の強化、デジタル ストーリーテリングの促進など、視覚に訴えるプラットフォームを提供します。
デモを試し、管理アプリを使用してカスタマイズし、魅力的で有益な 3D エクスペリエンスを実現してください。