このページは Cloud Translation API によって翻訳されました。

3D エリアエクスプローラスタートガイド

概要

3D エリアエクスプローラソリューションは、場所を発見して体験するまったく新しい方法を提供します。このソリューションは、Google Maps Platform の高画質 3D タイルと 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: アプリは、探索中のエリア内のスポットに関する詳細情報を特定して表示し、ローカルナレッジを活用してユーザーエクスペリエンスを向上させることができます。
Autocomplete は、ユーザーが特定の場所やスポットを検索するのに役立ちます。

CesiumJS

CesiumJS は、高解像度の 3D グローブのレンダリングと表示を行います。Google の Photorealistic 3D Tiles の読み込みと可視化を処理します。このタイルには、建物と地形の 3D メッシュモデルが含まれています。

カメラの管理: CesiumJS には、カメラの位置、向き、動きを制御するツールが用意されています。以下が該当します。

アプリの読み込み時に、指定した近隣地域にフォーカスするように初期視点を設定します。
自動化されたオービットアニメーションによる探索など、動的なカメラの動きを実現する。
地球に対するユーザーインタラクションの処理（パン、ズーム、回転など）。

Photorealistic 3D タイルが 3D Tiles レンダラと連携する方法を学びます。

主要コンポーネント

このアプリケーションは、次の 2 つのアプリに分かれています。

管理アプリ
デモアプリ

この図は、2 つのアプリケーションの違いと相関関係の概要を示しています。

各アプリをさらに調査することが有益です。

管理アプリ

このアプリには、3D エクスペリエンスをカスタマイズできるユーザーフレンドリーなインターフェースが用意されています。

場所の検索 : 統合された Google Maps Platform Autocomplete 検索バーを使用して、紹介するエリアを検索します。場所を選択すると、そのエリアにカメラがシームレスにジャンプします。
カメラ: カメラの移動速度とオービットの種類を調整して、選択した視聴体験を作成します。
場所（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 から 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:

3D 地球儀の可視化には CesiumJS が使用されます。CesiumJS 自体はオープンソースですが、追加の機能やサービスごとに費用が発生する場合があります。プレミアムサービスについては、CesiumJS のドキュメントをご覧ください。

料金は使用量に基づいて個別に決まるため、各 API の料金の詳細を確認することが重要です。Google Maps Platform では、一定量の使用量に対する無料枠が用意されています。料金の詳細は、リクエスト数や使用地域などの要因によって変わる場合があります。

Google Maps Platform と CesiumJS の使用料金について、最新かつ正確な情報については、必ず公式の料金ページをご覧ください。これらのサービスに記載されている利用規約に準拠し、関連する費用を効果的に管理して把握してください。

まとめ

このドキュメントでは、3D エリアエクスプローラの機能、コンポーネント、ユーザーエクスペリエンス、技術要件の概要について説明します。

Google の高画質 3D タイルと Places API を活用することで、地域をバーチャルに探索したり、スポットを見つけたり、地域の歴史について学んだりできます。

地域の紹介、探索の促進、デジタルストーリーテリングのプロモーションなど、3D エリアエクスプローラは視覚的に優れたプラットフォームを提供します。

デモを試して、管理アプリを使用してカスタマイズし、魅力的で有益な 3D エクスペリエンスを作成できます。