3D 區域探索工具自訂功能

3D 區域探索工具解決方案可讓您以迷人的 3D 方式探索社區。這項解決方案運用了 Google 的擬真 3D 圖塊、Place Search、Place Details 和 Autocomplete 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.density：所選的搜尋點數量上限。
  • poi.searchRadius：搜尋附近搜尋點的半徑。
  • camera.speed：攝影機軌道速度。
  • camera.orbitType：攝影機軌道類型 (「fixed-orbit」或「dynamic-orbit」)。

自訂網址的優點：

  • 預先定義所選設定，簡化使用者體驗。
  • 分享預先載入特定地點和搜尋點的目標行程。
  • 在網站中流暢嵌入預先設定的 Area Explorer 體驗。

只要自訂網址，就能打造專屬體驗，並邀請其他人踏上精心設計的冒險旅程。

進一步自訂

上一節介紹了可透過 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. 建立地理編碼要求：按一下「Try It Yourself」部分，然後在「Address」欄位中輸入所選位置。您可以指定地址、地點名稱，甚至是地標。
  3. 生成座標：點按「執行」按鈕提交要求。這項工具會傳回包含地點相關資訊的回應，包括geometry.location部分下方顯示的經緯度座標。
  4. 使用地理編碼：從回應中複製擷取的經緯度值，然後貼到設定中的 coordinates 物件。

注意：以這種方式使用的地理編碼，必須遵守 Google 地圖平台服務條款第 3.4 節所述的條款，也就是快取時間不得超過 30 天，且必須在 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 檔案，並參閱 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 探索體驗。您可以修改攝影機行為、調整視覺傾斜角度，以及變更縮放等級，打造獨特且引人入勝的體驗，呈現所選設定和搜尋點。

請記得嘗試不同的設定，並根據特定需求微調參數。善用自訂功能，就能打造身歷其境的個人化旅程，吸引觀眾並實現您的願景。