3D 區域探索入門指南

圖片

總覽

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

3D 區域探索工具的設計能夠滿足多種用途：

  • 強化區域探索功能：使用者能以高超的視覺詳細資料探索鄰近地區，深入分析當地地圖項目和地標。

  • 宣傳位置相關敘述：您可以加入 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 地圖平台自動完成搜尋列，找出您要顯示的區域。選取位置後，攝影機就會順暢地飛到該區域。

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

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

您可以使用這個應用程式為使用者提供個人化體驗。

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

試用版應用程式

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

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

使用者體驗

圖片

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

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

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

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

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

必要條件

  1. Google 地圖 API 金鑰：您需要啟用下列 API 的有效 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 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 地圖平台 - Places Autocomplete 價格。

CesiumJS：

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

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

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

結論

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

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

不論是展示區域、強化探索功能，還是宣傳數位敘事，3D 區域探索工具都能提供令人驚豔的視覺效果。

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