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

圖片

總覽

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

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

  • 提升區域探索體驗：使用者可以透過高精細度的視覺資訊，虛擬探索社區，深入瞭解當地特色和地標。

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

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

開始使用：

啟用

重要技術

這項解決方案採用兩項重要技術建構而成：

Google 地圖平台 API：

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

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

CesiumJS

CesiumJS 負責轉譯及顯示高解析度 3D 地球。這個函式庫會處理 Google 擬真成像 3D 圖塊的載入和視覺化作業，提供建築物和地形的 3D 網格模型。

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

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

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

重要元件

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

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

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

圖片

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

管理應用程式

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

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

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

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

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

如需所有自訂項目的詳細說明，請參閱「3D 區域探索器自訂項目」。

試用版應用程式

這是最終的應用程式，使用者可透過這個應用程式載入您在管理應用程式中建立的設定。在這個沉浸式 3D 環境中，使用者可以探索所選區域，並發掘您標示的地點。

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

使用者體驗

圖片

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

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

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

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

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

必要條件

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

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

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

如要詳細瞭解部署選項，請參閱 GitHub 專案的讀我部分。

部署作業

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

圖片

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

帳單資訊

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

Google 地圖平台 - 3D Tiles 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 地圖平台 - 地點自動完成定價。

CesiumJS：

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

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

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

結論

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

這項解決方案運用 Google 的擬真 3D 圖塊和 Places API，可虛擬探索社區、發掘搜尋點，以及瞭解當地歷史。

無論是展示某個區域、提升探索體驗，還是宣傳數位故事，3D 區域探索工具都是視覺效果出色的平台。

試用示範內容，並使用管理應用程式自訂內容，打造引人入勝的實用 3D 體驗。