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 環境中,使用者可以探索所選區域,並發掘您標示的地點。

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

使用者體驗

圖片

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

  1. 使用者可以互動式探索 3D 區域,包括建築物、地標和地形。
  2. 使用者可以搜尋及發掘附近的地點 (例如博物館、公園、餐廳)。
  3. 選取地點後,使用者可以查看與該地點相關的詳細資訊或敘述。

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

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

必要條件

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

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

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

如需部署選項的詳細說明,請參閱 GitHub 專案的讀我部分。

部署作業

您可以在任何容器環境 (例如 GKEGAE) 中,將應用程式部署為節點應用程式或 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 地圖平台 - 地點 API:

Places API 用於提供位置相關資料,為說故事體驗增添豐富資訊。若要瞭解與 Google Places API 相關的費用,請造訪 Google Maps Platform - Places API Pricing

Google 地圖平台 - Autocomplete API:

自動完成功能可提升使用者互動體驗。有關 Google Maps Autocomplete API 的定價詳情,請造訪 Google Maps Platform - Places Autocomplete Pricing

CesiumJS:

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

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

要獲取有關 Google Maps Platform 和 CesiumJS 使用費用的最準確、最新的信息,請務必參考官方定價頁面。務必遵守本服務所列明的條款和條件,以便有效管理和瞭解任何相關費用。

結論

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

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

無論是展示某個區域、增強探索體驗,或是推廣數位故事敘述,3D 區域探索器都能提供一個視覺效果驚豔的平台。

試用演示版,並使用管理員應用程式進行自訂,以創建引人入勝且資訊豐富的 3D 體驗。