3D 區域探索工具：自訂指南

3D 區域探索工具是一種解決方案，可讓您以迷人的 3D 方式探索社區。這個解決方案運用了 Google 的擬真 3D 圖塊、Places Search、Place Details 和 Autocomplete API。

開始使用：

使用代管的 3D 區域探索工具管理員應用程式

或

取得 API 金鑰 並從 GitHub 下載程式碼。

啟用

• 擬真成像 3D 圖塊 API
• Places API

自訂體驗

3D 區域探索工具解決方案可高度自訂，讓您根據客戶歷程打造客製化體驗。您可以使用 UI 上的控制台或 config.json 檔案來自訂。

準備好自訂內容了嗎？步驟如下：

位置

調整 config.json 檔案中的經緯度，定義體驗的起點。

攝影機控制

選擇攝影機的運行軌跡類型，即可掌控行程：經典的圓形路徑或有趣的正弦波。

• 固定軌道：

  這是在固定高度和特定興趣點附近的圓形軌道。

  探索 Google 雪梨辦公室，瞭解固定軌道的運作方式。

• 動態軌道：

  攝影機會以正弦曲線軌跡平穩移動，圍繞指定的興趣點旋轉。這項獨特的動作可讓觀眾從不同高度和角度觀察興趣點，提供生動且身歷其境的視覺體驗。

  探索艾菲爾鐵塔，瞭解動態軌道運作情形。

搜尋點 (POI)：

• 您可以決定要探索的地點類型，自訂探索內容。使用 config.json 中的 types 陣列，選擇博物館、公園、學校等地點。
• 調整 density 參數，設定顯示的搜尋點數量上限。
• 修改 searchRadius (in meters) 以納入附近的隱藏寶石，或著重於特定區域。
• 使用 speed (in revolutions per minute) 參數設定攝影機移動的速度。

預先載入探索：透過自訂網址深入探討

3D Area Explorer 可讓您透過自訂網址預先定義探索範圍。這樣一來，您就不必手動設定，可簡化使用者體驗。

打造完美網址：

只要在區域探索器網址中附加特定參數，即可預先設定位置和其他設定。例如：

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

這個網址會將起點設為指定的緯度和經度，讓您立即前往所選位置。可用的參數：

• location.coordinates.lat：所選位置的緯度。
• location.coordinates.lng：所選位置的經度。
• poi.types：以半形逗號分隔的清單，當中列有要顯示的 POI 類型。
• poi.density：所選 POI 數量上限。
• poi.searchRadius：搜尋附近 POI 的半徑。
• camera.speed：攝影機環繞速度。
• camera.orbitType：攝影機軌道類型 (「固定軌道」或「動態軌道」)。

自訂網址的優點：

• 預先定義所選設定，簡化使用者體驗。
• 分享指定行程，其中包含特定預先載入的位置和 POI。
• 將預先設定的 Area Explorer 體驗嵌入網站，提供流暢的使用體驗。

透過網址自訂功能，您可以打造量身打造的體驗，並邀請其他人展開精心安排的冒險旅程。

注意： 試試看完整的客製化網址： https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

進一步自訂

上一節探討了可透過 UI 或設定檔存取的調整選項。不過，您也可以修改其他幾個內建參數，進一步自訂應用程式。

如要進行這些進階自訂設定，您必須查看位於 src 目錄中的 src/utils/cesium.js 檔案中的程式碼。您可以變更下列變數，以變更應用程式的外觀和風格

攝影機高度

調整 CAMERA_HEIGHT 值，即可控制相機在飛往某個點時的高度。值越高，全景顯示畫面就會縮得越小，而值越低，畫面就會放大，讓您更清楚看到該區域的細節

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

• 設定：CAMERA_HEIGHT
• 預設值：100
• 說明：定義飛往某個地點時，相機相對於目標位置的高度。
• 範例值：
  • 50：放大顯示，強調細節。
  • 200：更廣闊的視野。

攝影機傾角

相機的初始傾斜角度由 BASE_PITCH 定義。使用負值表示向下傾斜，使用正值表示向上傾斜。如要在探索中加入微妙的動態移動效果，請變更 AUTO_ORBIT_PITCH_AMPLITUDE。

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

• 設定：BASE_PITCH 和 AUTO_ORBIT_PITCH_AMPLITUDE
• 預設值：
  • BASE_PITCH：-30 (向下傾斜 30 度)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (隨著時間改變音調 10 度)

說明：相機傾斜度是地圖的視覺傾斜度，以度為單位。也稱為傾斜。這些設定會定義攝影機在自動旋轉期間的初始音調和動態音調調整。

範例值：

• BASE_PITCH：0 (水平攝影機)
• AUTO_ORBIT_PITCH_AMPLITUDE：0 (沒有音高變化)

相機範圍和縮放

這些參數會設定在聚焦特定點時，要套用的縮放量。值越小，表示縮放倍率越高。

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

設定：RANGE_AMPLITUDE_RELATIVE 和 ZOOM_FACTOR

預設值：

• RANGE_AMPLITUDE_RELATIVE：0.55 (相對距離變化)
• ZOOM_FACTOR：20 (相機縮放係數)

說明：這些設定會定義攝影機移動時的範圍變化，以及用於放大檢視的縮放等級。

範例值：

• RANGE_AMPLITUDE_RELATIVE：1 (完整範圍變化)
• ZOOM_FACTOR：10 (縮放程度較低)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

重設攝影機

當使用者想將攝影機重設為原始位置時，系統會使用 CAMERA_OFFSET 值。這項設定包括標頭 (旋轉)、傾斜度 (傾斜) 和範圍 (相機離中心的距離)。

• 設定：CAMERA_OFFSET
• 預設值：
  • heading：0 (沒有旋轉偏移)
  • pitch：Cesium.Math.toRadians(-30) (向下傾斜 30 度)
  • range: 800 (距離中心 800 公尺)
• 說明：定義重設檢視畫面的相機方位、傾斜度和範圍。
• 範例值：
  • heading：45 (度，西北方)
  • range：1500 公尺 (離中心較遠)

起始座標：

START_COORDINATES 會定義攝影機的初始經度、緯度和高度。這是探索的起點，因此請將其設為您希望使用者首先看到的區域。

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

• 設定：START_COORDINATES

• 預設值：

  • longitude：0
  • latitude: 60
  • height：15000000 (地表上方 15,000 公里)

• 範例值：

  • longitude: -122.4934, latitude: 37.7951 (金門大橋)
  • height：2000 (更接近起始位置)

載入預先定義的位置

config.json 中的 location 物件會設定區域的中心。這是 Cesium 檢視器中相機的初始觀點。coordinates：定義攝影機要先平移至的位置的經緯度 (lat 和 lng)。調整這些值，即可將相機設為地球上的任何特定位置。

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

這項設定可讓您啟動 3D 地點導覽器應用程式，並將畫面縮放至所選特定位置。您可以使用 Google 的地理編碼工具，在位置物件中指定地址或地點名稱，取得其經緯度座標：

1. 使用地理編碼工具。
2. 建立地理編碼要求 按一下「親自試用」部分，然後在「地址」欄位中輸入所選位置。您可以指定地址、地點名稱，甚至是地標。
3. 產生座標 按一下「執行」按鈕，提交要求。這項工具會傳回回應，其中包含位置的各種資訊，包括在 geometry.location 部分顯示的經緯度座標。
4. 使用地理編碼：從回應中複製擷取的經緯度值，然後貼到設定中的 coordinates 物件中。

注意：以這種方式使用的地理編碼必須遵守《Google 地圖平台服務條款》第 3.4 節的規定，也就是不得快取超過 30 天，且必須在 30 天後重新整理。

這項設定會使用地理編碼工具，自動判斷 Google 位於加州山景城的總部的座標，並啟動 3D 地點導覽器應用程式，讓相機以該位置為中心。

注意： 這個方法可簡化找出座標的程序，並減少手動辨識的需要。您可以使用設定中的地址或名稱，輕鬆探索任何地點。

進階自訂

您可以深入研究程式碼，進行其他自訂設定。以下各節將逐步說明一些選項

新增攝影機路徑

這個解決方案會實作兩種不同的相機路徑：

fixed-orbit" | "dynamic-orbit"

不過，如果您想建立新的相機路徑，可以使用

calculateAutoOrbitFrame 函式中的 /src/utils/cesium.js。

如要在設定面板中使用這項新的路徑計算方式，請參閱 demo/src/camera-settings.js. 中的實作方式

新增更多地點類型

您可以在 demo/src/place-settings.js 檔案中調整設定的場所類型清單。從第 4 行開始，是這個範例中可用的地點類型。

如果您想使用特定地點類型，但不想變更示範來源，可以將這些類型新增至 poi.types 底下的 config.json 檔案

自訂樣式 (CSS)

我們使用 CSS 變數處理樣式。所有主要瀏覽器都支援此類屬性，可讓您在集中位置變更一行內容，並更新特定 CSS 屬性。我們的 CSS 變數是在 src/main.css. 中定義，您可以在其中調整整個應用程式的顏色、字型設定、邊距或邊界。

覆蓋其他資料

如要疊加其他資料，您需要更新 src/utils/cesium.js 檔案，並參閱 cesium 說明文件，瞭解如何將 GeoJSON 或其他地理參照資料新增至地球。

移除設定區段

我們的 JavaScript 應用程式在設定檔中包含三個主要部分：demo/src/[config-panel.js](config-panel.js): location、poi 和 camera。每個部分都會提供應用程式不同方面的設定選項。開發人員可以根據特定需求自訂這些部分。

1.從設定中移除特定部分

• 位置區段

如要移除 location 部分，請在程式碼中找出下列行，然後註解或刪除：

const locationConfig = { ...config.location, ...customConfig.location };

• POI 區段

如要移除 poi 部分，請在程式碼中找出下列行，然後註解或刪除：

const poiConfig = { ...config.poi, ...customConfig.poi };

• 相機區段

如要移除 camera 部分，請在程式碼中找出下列行，然後註解或刪除：

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. 更新合併設定

移除某個區段後，請務必更新合併的設定物件。這個物件會將預設設定與任何自訂設定合併。從 combinedConfig 物件中移除對應的屬性：

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. 調整 UI 元素

如果移除某個區段也代表移除相關的 UI 元素，請在 HTML 程式碼中相應更新程式碼。舉例來說，如果您想從管理員面板中移除特定部分 (例如相機速度)，就必須同時更新 js 和 html 程式碼。

4. 移除「相機設定」區段

如要從 UI 中移除攝影機設定部分，請找出下列行並註解或刪除：

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

移除位置區段摘要

const locationSection = await getLocationSettingsSection(locationConfig);

結論

在本文件中，我們將介紹 Area Explorer 提供的各種自訂選項，協助您打造專屬的 3D 探索體驗。您可以修改攝影機行為、調整視覺傾斜度和縮放等級，打造獨特且引人入勝的體驗，展示所選設定和搜尋點。

請務必嘗試不同的設定，並根據您的特定需求微調參數。運用自訂功能的強大功能，您可以打造沉浸式個人化旅程，吸引觀眾並實現您的願景。