總覽
3D Area Explorer 解決方案提供了探索地點和體驗位置的全新方式。這項解決方案運用 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 地圖平台自動完成搜尋列,尋找要顯示的區域。選取位置後,攝影機就會流暢飛向該區域。
Camera:調整攝影機動作速度和軌道類型,以建立所選的瀏覽體驗。
地點 (搜尋點):定義您要呈現的密度、搜尋半徑和搜尋點類型 (例如餐廳、咖啡廳、地標)。
請使用這個應用程式為使用者提供自訂體驗。
與所有重要旅遊景點探索宏偉的峽谷
請參閱 3D Area Explorer 自訂項目的詳細說明。
試用版應用程式
這是最終向使用者顯示的應用程式,會載入您在管理應用程式中建立的設定。在這個沉浸式 3D 環境中,使用者將可探索所選區域,並探索您所標示的地點。
使用管理應用程式自訂外觀和風格後,您可以下載設定,並從原始碼執行自訂應用程式。
使用者體驗
這個應用程式的主要功能如下:
- 使用者可以以互動方式探索 3D 區域,包括建築物、地標和地形。
- 使用者可以搜尋及探索附近地點 (例如博物館、公園、餐廳)。
使用者只要選取地點,就能查看該地點的詳細資訊或說明。
開發人員可以透過設定和控制項 (如果使用「管理」應用程式) 打造個人化的探索體驗。
已啟用自動旋轉功能,可讓相機根據所選區域的中心自動旋轉。
必要條件
Google Maps API 金鑰:需具備有效的 API 金鑰,並啟用下列 API:
網路伺服器:您可以透過下列任一位置提供應用程式:
- 本機網路伺服器 (例如使用 Node.js、http-server)
- 靜態網站代管服務 (應用程式隨附 Dockerfile)
您可以在 GitHub 專案的 README 區段中查看部署選項的詳細說明。
部署作業
您可以在 GKE 或 GAE 等任何容器環境中,將應用程式部署為節點應用程式或 Docker 容器。託管示範使用以下架構:
- 在這個架構中,程式碼位於 GitHub 專案中。
- Cloud Build 會在任何推送至主要容器時擷取程式碼,並觸發建構作業。
- 在建構作業中,它會插入 API 金鑰並建立映像檔,然後儲存在 Artifact Registry 中。
- 最後,它會將 Artifact Registry 中的最新穩定映像檔部署至 Cloud Run。
- 我們也正在執行一些健康狀態檢查和監控,以檢查已部署應用程式的健康狀態。
帳單資訊
3D Area Explorer 解決方案使用 Google 地圖平台服務,提供身歷其境的動態體驗。部分 API 可能會產生費用。以下簡單介紹各項 API 與定價連結
Google 地圖平台 - 3D Tiles API:
故事廣告解決方案使用 3D Tiles API,透過地理空間資料提升視覺體驗。如需 3D Tiles API 的定價詳細資料,請參閱 Google 地圖平台的 3D Tiles API 定價。
Google 地圖平台 - Places API:
Places API 用於位置資料相關服務,為報導體驗提供豐富的資訊。如要瞭解 Google Places API 的相關費用,請參閱 Google 地圖平台 Places API 定價。
Google 地圖平台 - Autocomplete API:
自動完成功能可促進使用者互動。如需 Google Maps Autocomplete API 的定價詳細資料,請前往 Google 地圖平台 Places Autocomplete 定價。
CesiumJS:
CesiumJS 用於 3D 地球視覺化。雖然 CesiumJS 本身為開放原始碼,但其他功能或服務可能會產生相關費用。如需任何付費服務的相關資訊,請參閱 CesiumJS 說明文件。
請務必查看每個 API 的定價詳細資料,因為費用是依據用量決定。請注意,Google 地圖平台提供可免費使用特定數量用量的免費方案。定價具體內容可能會因要求數量和用量地區等因素而異。
如需最正確且最新的 Google 地圖平台與 CesiumJS 使用費用資訊,請務必參閱官方定價頁面。請務必遵守這些服務中列出的條款及細則,才能有效管理和瞭解任何相關費用。
結論
本文件概要說明 3D 區域探索工具的功能、元件、使用者體驗和技術相關規定。
這個 API 使用 Google 的擬真成像 3D 圖塊和 Places API,可讓您虛擬探索社區、探索搜尋點,以及瞭解當地歷史。
無論是呈現某個區域、強化探索體驗,還是宣傳數位故事,3D Area Explorer 都提供一個美觀吸睛的平台。
您可以試用試用版,然後使用管理應用程式自訂此版本,打造引人入勝且資訊豐富的 3D 體驗。