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

3D 區域探索工具是一種解決方案，可讓您以迷人的 3D 形式探索社區。這個解決方案運用了 Google 的擬真 3D 圖塊、Places 搜尋、Places 詳細資料和 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 可讓您透過自訂網址預先定義探索範圍。這樣就不必手動設定，簡化使用者體驗。

製作完美網址：

只要將特定參數附加至 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 Place Navigator 應用程式，放大至您選擇的特定位置。您可以使用 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);

結論

在本文件中，我們探索了區域探索工具提供的各種自訂選項，以打造您的 3D 探索體驗。您可以修改攝影機行為、調整視覺傾斜度和縮放等級，打造獨特且引人入勝的體驗，展示所選設定和興趣點。

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