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)：

• 決定想想的地點類型，自訂探索方式 探索。使用 types 選擇博物館、公園、學校等地點 config.json 中的陣列。
• 您可以調整顯示的搜尋點數目上限，方法是調整 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.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/utils/cesium.js 檔案位於 src 目錄。下列 變數可以變更為應用程式的外觀與風格

相機高度

調整 CAMERA_HEIGHT 值，即可控制相機在飛往某個點時的高度。值越高， 會縮小和全景檢視，值越低，越接近 該區域的詳細資料

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

• 設定：CAMERA_HEIGHT
• 預設值為 100。
• Description： 定義相機在目標位置之上於 飛往某個地點
• 範例值：
  • 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"

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

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

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

新增更多地點類型

您可以在 demo/src/place-settings.js 檔案中調整設定的場所類型清單。第 4 行是從第 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 元素

如果移除區段也要移除相關 UI 元素，請更新程式碼 。舉例來說，如要移除 「相機速度」等部分，就必須同時更新 js 和 HTML 程式碼。

4. 移除攝影機設定區段

如要從 UI 中移除攝影機設定部分，請找到以下這一行， 留言或刪除影片：

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

移除位置版面摘要

const locationSection = await getLocationSettingsSection(locationConfig);

結論

在本文件中，我們將探討 Area Explorer 提供的各種自訂選項，協助您打造專屬的 3D 探索體驗。修改 相機行為、調整視覺傾斜和變更縮放等級，您可以建立 獨特且引人入勝的體驗，呈現你選取的設定與點數

別忘了測試不同設定並微調 參數來滿足特定需求運用強大的 也可以打造引人入勝的個人化體驗 將您的構想化為現實