3D 區域探索工具的使用說明

圖片

總覽

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

3D 區域探索工具的設計用途多元：

  • 強化區域探索：使用者可以虛擬方式探索鄰近地區，查看高度精細的視覺細節，深入瞭解當地特色和地標。

  • 宣傳以地點為基礎的敘事內容：可納入附有豐富說明的 POI (興趣點)，打造以敘事內容為主的體驗，向使用者介紹特定地點。

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

開始使用：

啟用

重要技術

這項解決方案採用兩項關鍵技術：

Google Maps Platform API：

我們使用 Google 地圖平台的幾項 API 取得基本地圖和資料，以建立這項體驗：

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

CesiumJS

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

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

  • 載入應用程式時，將初始視點設為指定鄰里。
  • 實作動態攝影機移動，例如自動軌道動畫，方便使用者探索。
  • 處理使用者與地球的互動 (平移、縮放、旋轉)。

瞭解如何使用擬真 3D 圖塊搭配 3D Tiles 算繪器。

重要元件

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

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

下圖概述這兩個應用程式的差異和關聯：

圖片

建議進一步調查各個應用程式：

管理應用程式

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

  • 地點搜尋：使用整合式 Google Maps Platform 自動完成搜尋列，尋找要展示的區域。選取位置後，攝影機就會流暢地飛到該區域。

  • 相機：調整相機移動速度和軌跡類型，打造所選的觀看體驗。

  • 地點 (興趣點)：定義密度、搜尋半徑和興趣點類型 (例如餐廳、咖啡廳、地標)。

使用這個應用程式為使用者自訂體驗。

如要詳細瞭解所有自訂項目，請參閱「3D 區域探索器自訂項目」。

試用版應用程式

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

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

使用者體驗

圖片

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

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

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

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

  5. 自動旋轉功能已啟用，攝影機會自動繞著所選區域的中心旋轉。

必要條件

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

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

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

如要查看部署選項的詳細說明，請參閱 GitHub 專案的 Readme 部分。

部署作業

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

圖片

  • 在這個架構中，程式碼位於 GitHub 專案。
  • 只要將程式碼推送至主要分支版本，Cloud Build 就會擷取程式碼並觸發建構作業。
  • 建構時，系統會插入 API 金鑰並建立映像檔，然後儲存在 Artifact Registry 中。
  • 最後，從 Artifact Registry 將最新的穩定版映像檔部署至 Cloud Run。
  • 我們也會執行一些健康狀態檢查和監控，檢查已部署應用程式的健康狀態。

帳單資訊

3D Area Explorer 解決方案使用 Google Maps Platform 服務，提供身歷其境的動態體驗。某些 API 可能會產生費用，以下是 API 總覽和定價連結。

Google Maps Platform - 3D Tiles API：

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

Google 地圖平台 - Places API：

Places API 則用於提供適地性資料，為故事體驗增添豐富資訊。如要瞭解 Google Places API 的相關費用，請前往 Google Maps Platform - Places API 定價。

Google Maps Platform - Autocomplete API：

自動完成功能可提升使用者互動體驗。如要瞭解 Google 地圖自動完成 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 體驗。