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

画像

概要

3D エリア エクスプローラ ソリューションは、まったく新しい方法で 場所です。このソリューションでは、Google マップの プラットフォーム Photorealistic 3D タイルプレイス API 訴求力のあるインタラクティブな 3D 環境を作成できます。

3D エリア エクスプローラは、次のような複数の目的で使用できるように設計されています。

  • エリア探索を強化する: ユーザーは、 詳細なビジュアル データを取得して、地域の特徴や 使用できます。

  • 位置情報に基づくストーリーのプロモーション: スポットを組み込む機能 詳細な説明とともに(スポット) ストーリー主体のエクスペリエンスを構築して、 提供します

  • Google マップの 3D 機能を使用して開発意欲を高める: Google の 3D マッピング データが持つ、臨場感あふれる インタラクティブな地図

ご利用方法:

<ph type="x-smartling-placeholder">

有効にする

主なテクノロジー

このソリューションは、次の 2 つの主要なテクノロジーを使用して構築されています。

Google Maps Platform API:

Google Maps Platform の複数の API を使用して、基本地図とデータを取得します。 手順は次のとおりです。

  • Google Maps Photorealistic 3D Tiles: 建物や地形の高解像度 3D モデルにより、現実的で 都市環境を視覚的にアピールできます。
  • Places API: アプリは、Google Cloud のリソースの スポット(POI)の情報(スポット) 地域に根ざした情報です。
  • 予測入力 ユーザーが特定の場所や地域を検索できる できます。

CesiumJS

CesiumJS は高解像度の 3D のレンダリングと表示を担当 クリックします。Google の Photorealistic 3D の読み込みと可視化を処理 タイル: 建物や地形の 3D メッシュモデルを提供します。

カメラの管理: CesiumJS には、カメラのカメラ 位置、向き、動きですこれには以下が該当します。

  • 指定した周辺地域にフォーカスする最初の視点を設定します 表示されます。
  • カメラの動的な移動(自動軌道など)の実装 アニメーションで探索できます
  • 地球に対するユーザー インタラクションの処理(そのような機能が含まれている場合) (パン、ズーム、回転)。

Photorealistic 3D Tiles の詳細 3D Tiles レンダラを使用する

主要コンポーネント

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

  • 管理アプリ
  • デモアプリ

この図は、クラウド リソースと 2 つのアプリケーションがあります。

画像

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

管理アプリ

このアプリケーションでは、カスタマイズできるユーザー フレンドリーなインターフェースを 3D 体験:

  • 場所検索 : 統合された Google Maps Platform の予測入力を使用 検索バーをクリックして、紹介するエリアを探します。選択したら そのエリアにカメラがシームレスに移動します

  • [カメラ]: カメラの移動速度と軌道のタイプを調整して、 選択します。

  • 場所(POI): スポットの密度、検索半径、種類を定義できます レストラン、カフェ、ランドマークなど、ユーザーの興味を引くことができます。

このアプリを使用すると、エンドユーザーのエクスペリエンスをカスタマイズできます。

<ph type="x-smartling-placeholder">

すべてのカスタマイズの詳細な説明が 3D エリア エクスプローラのカスタマイズ

デモアプリ

これが最後のユーザー向けアプリケーションで、構成を読み込み、 作成できます。この臨場感あふれる 3D 環境では、 選択したエリアを探索したり、ハイライト表示した場所を確認したりできます。

管理アプリを使用してデザインをカスタマイズすると、 構成をダウンロードしてソースコードからカスタム アプリケーションを実行します。

ユーザー エクスペリエンス

画像

アプリケーションの主な機能は次のとおりです。

  1. ユーザーは、建物 地形、ランドマーク、地形などです
  2. ユーザーは付近の場所(美術館、公園、 レストラン)。
  3. 場所を選択すると、詳細情報やナラティブが表示される 表示されます。

  4. デベロッパーは設定やツールで探索エクスペリエンスをパーソナライズできる (管理アプリを使用している場合)。

  5. 自動回転が有効になり、カメラが自動的に回転します 選択された領域の中央に配置されます。

前提条件

  1. Google Maps API キー: 次の API には有効な API キーが必要です。 enabled:

  2. ウェブサーバー: 次のいずれかからアプリケーションを提供できます。

    • ローカル ウェブサーバー(Node.js、http-server などを使用)
    • 静的ウェブ ホスティング サービス(アプリケーションに Dockerfile が含まれる)

デプロイ オプションの詳細については、README をご覧ください。 セクションがあります。

デプロイ

このアプリは任意の環境内でノード アプリケーションまたは Docker コンテナとして GKE などのコンテナ環境や、 GAE。ホストされるデモでは次のものを使用します。 アーキテクチャ:

画像

  • このアーキテクチャでは、コードは GitHub プロジェクトにあります。
  • Cloud Build が main への push の際にコードを取得し、ビルドをトリガーします。 あります。
  • ビルドの一環として API キーを挿入し、イメージを作成してから、 アーティファクトリポジトリに保存します
  • 最後に、最新の安定版イメージを Artifact Registry から Cloud あります。
  • ヘルスチェックとモニタリングも実行して、 モニタリングします。

お支払い情報

3D エリア エクスプローラ ソリューションでは、Google Maps Platform サービスを使用して、 臨場感あふれるダイナミックな エクスペリエンスが得られますAPI によっては料金が発生する場合があります。こちらが概要です 料金情報へのリンクもあります。

Google Maps Platform - 3D Tiles API:

Storytelling ソリューションは、3D Tiles API を利用して視覚効果を高め、 地理空間データでの経験を積むことができます。3D Tiles の料金の詳細 API については、Google Maps Platform - 3D Tiles API をご覧ください 料金をご覧ください。

Google Maps Platform - Places API:

Places API は位置情報ベースのデータに採用されており、 ストーリーテリングの エクスペリエンスを高めますGoogle Cloud リソースの費用を把握するには、 Places API、Google Maps Platform にアクセス - Places API 料金をご覧ください。

Google Maps Platform - Autocomplete API:

予測入力機能により、ユーザー操作が強化されます。料金について詳しくは、 Google Maps Platform をご覧ください。 Places Autocomplete 料金をご覧ください。

CesiumJS:

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

API ごとに料金の詳細を確認し、料金が発生するため 使用状況に基づいて個別に決定されます。なお、Google Maps Platform では 無料枠が用意されています。 詳細は、リクエスト数や使用状況などの要因によって あります。

正確で最新の情報については、常に公式料金ページをご覧ください。 Google Maps Platform と CesiumJS の使用料金に関する情報をご覧ください。コンプライアンスの確保 使用、管理、使用することを目的として、 関連する費用を把握できるようにします。

まとめ

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

Google の Photorealistic 3D Tiles と Places API を活用することで、 周辺地域のバーチャル探索、スポットの検索、 地域の歴史を学ぶことができます。

ある地域を紹介したり、探索を強化したり、デジタル コンテンツをプロモーションしたりする 3D エリア エクスプローラは、視覚に訴えるプラットフォームです。

デモをお試しいただき、管理アプリを使用してカスタマイズすることで、 豊富な情報量を持つ 3D 体験です。