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

3D Area Explorer 是解決方案，讓您能以引人入勝的 3D 方式探索社群。這項解決方案運用了 Google 的擬真成像 3D 圖塊、Places Search、Place Details 和 Autocomplete API。

開始使用：

使用代管的 3D Area Explorer 管理應用程式

或

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

啟用

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

自訂體驗

3D Area Explorer 解決方案可高度自訂，可讓您依據客戶流程打造符合需求的體驗。您可以使用 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.density：所選搜尋點數量上限。
• poi.searchRadius：搜尋附近搜尋點的半徑範圍。
• camera.speed：相機軌道速度。
• camera.orbitType：相機軌道類型 (「固定軌道」或「動態軌道」)。

自訂網址的好處：

• 預先定義所選設定，簡化使用者體驗。
• 使用特定預先載入的位置和搜尋點分享指定旅程。
• 在網站中完美嵌入預先設定的 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 天內不得快取，之後也必須更新。

這項設定會使用地理編碼工具，自動判斷 Google 加州山景城總部的座標，並啟動 3D Place Navigator 應用程式，並將攝影機以該位置為中心。

注意： 這個方法可簡化尋找座標的程序，並減少手動辨識的需求。這樣您就能使用設定中的地址或名稱，順暢探索任何位置。

進階自訂項目

如要進行更多自訂，可以深入分析程式碼。下節將說明部分選項

新增相機路徑

這項解決方案立即可用，實作兩種不同的相機路徑：

fixed-orbit" | "dynamic-orbit"

但如要建立新的相機路徑，可以使用

/src/utils/cesium.js。calculateAutoOrbitFrame

如要在設定面板中使用這項新路徑計算方式，請參閱 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 檔案，並參閱 Ccesium 說明文件，瞭解如何將 GeoJSON 或其他地理參照資料新增至全球。

移除設定區段

JavaScript 應用程式在設定檔中包含三個主要區段：demo/src/[config-panel.js](config-panel.js): location、poi 和 camera。這些各節都針對應用程式各方面提供設定選項。開發人員可以根據自身的特定需求自訂這些專區。

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

• 地點專區

如要移除 location 區段，請在程式碼中找出下列程式碼，然後加上註解或刪除區段：

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

• 搜尋點區域

如要移除 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 元素，請視情況在 HTML 程式碼中更新程式碼。例如，如果您想從管理控制台中移除特定部分 (例如相機速度)，就必須同時更新 js 和 html 程式碼。

4. 移除相機設定部分

如要從 UI 中移除攝影機設定部分，請找到以下這行程式碼，然後加上註解或刪除：

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

移除位置區段摘要

const locationSection = await getLocationSettingsSection(locationConfig);

結論

在本文件中，我們探討了 Area Explorer 提供的各種自訂選項，以打造專屬的 3D 探索體驗。您可以藉由修改相機行為、調整視覺傾斜度及變更縮放等級，打造獨特又引人入勝的使用體驗，展示您選取的設定和搜尋點。

請記得嘗試不同的設定，並依據特定需求微調參數。您可以善用自訂功能，打造充滿臨場感的個人化體驗，藉此吸引目標對象並實現構想。