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

圖片

總覽

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

3D Area Explorer 適用於多種用途：

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

  • 推廣以地點為基礎的敘事：整合 POI (搜尋點) 和豐富說明，打造以敘事為主軸的體驗，向使用者介紹特定地點。

  • 激發使用 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 Maps Platform Autocomplete 搜尋列，找出要展示的區域。選取位置後，攝影機就會流暢地飛到該區域。

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

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

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

如需所有自訂項目的詳細說明，請參閱「3D Area Explorer 自訂項目」。

試用版應用程式

這是最終面向使用者的應用程式，會載入您在管理應用程式中建立的設定。在這個沉浸式 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 會在每次推送至 main 時擷取程式碼，並觸發建構作業。
  • 建構作業會插入 API 金鑰並建立映像檔，然後儲存在 Artifact Registry。
  • 最後，系統會將 Artifact Registry 中最新的穩定版映像檔部署至 Cloud Run。
  • 我們也會執行一些健康狀態檢查和監控，檢查已部署應用程式的健康狀態。

帳單資訊

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

Google Maps Platform - 3D Tiles API

3D 區域探索工具解決方案運用 3D Tiles API，透過地理空間資料提升視覺體驗。如需 3D Tiles API 的定價詳情，請參閱 Google Maps Platform - 3D Tiles API 定價。

Google Maps Platform - Places API

Places API 則用於位置資料，為 3D Area Explorer 體驗增添豐富資訊。如要瞭解 Google Places API 的相關費用，請前往 Google 地圖平台 - Places API 定價。

Google Maps Platform - Autocomplete API

自動完成功能可提升使用者互動。如要瞭解 Google Maps Autocomplete API 的定價詳情，請前往 Google 地圖平台 - Places Autocomplete 定價。

CesiumJS

CesiumJS 用於 3D 地球視覺化。CesiumJS 本身是開放原始碼，但其他功能或服務可能需要付費。如需任何付費方案，請參閱 CesiumJS 說明文件。

請務必查看各個 API 的定價詳細資料，因為費用是根據用量個別決定。請注意，Google Maps Platform 提供免費方案，可免付費使用一定額度，具體定價可能因要求數量和使用區域等因素而異。

請務必參閱官方定價頁面，取得 Google Maps Platform 和 CesiumJS 使用費用的最新準確資訊。請務必遵守這些服務規定的條款及細則，有效管理及瞭解任何相關費用。

結論

本文將概略介紹 3D Area Explorer 的功能、元件、使用者體驗和技術相關規定。

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

無論是展示區域、強化探索體驗，還是推廣數位故事，3D Area Explorer 都能提供視覺效果驚豔的平台。

試用示範，並使用管理應用程式自訂，打造引人入勝且資訊豐富的 3D 體驗。