3D 區域探索入門指南

總覽

3D 區域探索工具解決方案可讓您以全新方式探索及體驗地點。這個解決方案運用 Google 地圖平台擬真 3D 圖塊和 Places API 的功能，打造引人入勝的互動式 3D 環境。

3D 區域探索工具可用於多種用途：

• 強化區域探索功能：使用者可以透過虛擬方式探索鄰里，並獲得關於當地特色和地標的深入資訊。

• 宣傳位置相關敘述：您可以加入 POI (興趣點) 並提供詳細說明，打造敘述導向的體驗，向使用者介紹特定地點的資訊。

• 激發使用 Google 地圖 3D 功能的開發靈感：這項功能可展示 Google 3D 地圖資料的潛力，讓您建立沉浸式互動地圖

開始使用：

啟用

• 擬真成像 3D 圖塊 API
• Places API

重要技術

本解決方案採用兩項重要技術建構：

Google 地圖平台 API：

我們使用 Google 地圖平台的多個 API 取得底圖和資料，以便打造這項體驗：

• Google 地圖擬真 3D 圖塊：建築物和地形的高解析度 3D 模型，可呈現逼真且視覺效果出色的都市環境。
• Places API：應用程式可識別探索區域內的 POI，並顯示相關詳細資訊，藉此提供當地知識，豐富使用者體驗。
• 自動完成功能可協助使用者搜尋特定地點或感興趣的區域。

CesiumJS

CesiumJS 負責算繪及顯示高解析度 3D 地球儀。它會處理 Google 擬真成像 3D 圖塊的載入和視覺化，提供建築物和地形的 3D 網格模型。

相機管理：CesiumJS 提供工具，可控制相機的位置、方向和移動。包括：

• 設定初始視角，在載入應用程式時聚焦於指定的鄰里。
• 實作動態攝影機機制，例如自動產生的探索動畫。
• 如果包含此類功能 (平移、縮放、旋轉)，則處理使用者與地球儀的互動。

瞭解擬真 3D 圖塊如何與 3D 圖塊轉譯器搭配使用。

重要元件

應用程式分為兩個不同的應用程式，分別為：

• 管理應用程式
• 試用版應用程式

下圖概略說明這兩個應用程式之間的差異和關聯：

進一步調查每個應用程式會有所助益：

管理應用程式

這個應用程式提供使用者友善的介面，可讓您自訂 3D 體驗：

• 地點搜尋：使用整合的 Google 地圖平台自動完成搜尋列，找出您要顯示的區域。選取位置後，攝影機就會流暢地飛到該區域。

• 攝影機：調整攝影機移動速度和運鏡類型，以營造所選的觀看體驗。

• 地點 (POI)：定義您想顯示的 POI 密度、搜尋半徑和類型 (例如餐廳、咖啡廳、地標)。

使用這個應用程式為最終使用者提供客製化體驗。

• 透過慢動作相機路徑探索 Google 芝加哥辦公室。

• 查看芝加哥地區的所有機場

• 請參閱拉斯維加斯大道周邊景點的密集視圖。

• 接著，沿著高速度正弦曲線攝影機路徑探索拉斯維加斯

• 探索大峽谷，盡覽所有主要旅遊景點

所有自訂項目的詳細說明請參閱 3D Area Explorer 自訂項目。

試用版應用程式

這是最終的面向使用者的應用程式，會載入您在管理員應用程式中建立的設定。在這個沉浸式 3D 環境中，使用者可以探索所選區域，並探索您醒目顯示的地點。

使用「管理」應用程式自訂外觀和風格後，您可以下載設定，並透過原始碼執行自訂應用程式。

使用者體驗

應用程式的主要功能包括：

1. 使用者可以以互動方式探索 3D 區域，包括建築物、地標和地形。
2. 使用者可以搜尋及探索附近地點 (例如博物館、公園、餐廳)。

3. 選取地點後，使用者就能查看與該位置相關的詳細資訊或敘述。

4. 開發人員可以透過設定和控制選項 (如果使用管理員應用程式)，自訂探索體驗。

5. 啟用自動旋轉功能，讓相機自動旋轉所選區域的中心。

必要條件

1. Google 地圖 API 金鑰：您需要啟用下列 API 的有效 API 金鑰：

   • Maps JavaScript API
   • Places API
   • Map Tiles API

2. 網路伺服器：您可以透過下列方式提供應用程式：

   • 本機網路伺服器 (例如使用 Node.js、http-server)
   • 靜態網站代管服務 (應用程式隨附 Dockerfile)

如要進一步瞭解部署選項，請參閱 GitHub 專案的 readme 部分。

部署作業

您可以在任何容器環境 (例如 GKE 或 GAE) 中，將應用程式部署為節點應用程式或 Docker 容器。託管的示範使用以下架構：

• 在這個架構中，程式碼會位於 GitHub 專案中。
• Cloud Build 會擷取任何推送至主機的程式碼，並觸發建構作業。
• 在建構過程中，它會插入 API 金鑰並建立映像檔，然後將映像檔儲存在構件登錄庫中。
• 最後，它會將最新的穩定映像檔從 Artifact Registry 部署至 Cloud Run。
• 我們也執行了一些健康狀態檢查和監控，以便檢查已部署應用程式的健康狀態。

帳單資訊

3D 區域探索工具解決方案會使用 Google 地圖平台服務，提供身歷其境的動態體驗。部分 API 可能會產生費用。以下簡要說明 API 和定價連結。

Google 地圖平台 - 3D 圖塊 API：

故事述說解決方案會使用 3D 圖塊 API，透過地理空間資料提升視覺體驗。如需 3D Tiles API 的詳細價格資訊，請參閱 Google 地圖平台 - 3D Tiles API 價格。

Google 地圖平台 - Places API：

Places API 可用於位置資料，為敘事體驗增添豐富的資訊。如要瞭解 Google Places API 相關費用，請參閱 Google 地圖平台 - Places API 價格。

Google 地圖平台 - Autocomplete API：

自動完成功能可提升使用者互動體驗。如要瞭解 Google 地圖自動完成 API 的詳細價格，請參閱 Google 地圖平台 - Places Autocomplete 價格。

CesiumJS：

CesiumJS 用於 3D 地球儀的視覺化呈現。雖然 CesiumJS 本身是開放原始碼，但額外功能或服務可能會產生相關費用。如需瞭解任何進階服務，請參閱 CesiumJS 文件。

請務必查看各個 API 的價格詳細資料，因為系統會根據使用量個別決定收費。請注意，Google 地圖平台提供免費方案，可免費使用一定用量，具體價格則可能因要求數量和使用區域等因素而異。

如需 Google 地圖平台和 CesiumJS 使用費用的最新準確資訊，請一律參閱官方定價頁面。請務必遵守這些服務的條款及細則，有效管理及瞭解任何相關費用。

結論

本文將概略說明 3D 區域探索器的功能、元件、使用者體驗和技術需求。

這項解決方案運用 Google 的擬真 3D 圖塊和 Places API，可讓使用者透過虛擬方式探索社區、探索景點，以及瞭解當地歷史。

無論是展示某個地區、增強探索功能，或是推廣數位敘事，3D 區域探索器都能提供令人驚豔的視覺效果。

試用這個示範，並使用「管理員」應用程式自訂內容，打造吸引人且內容豐富的 3D 體驗。