「3D 區域探索工具」是一項解決方案,可協助你在 以及引人入勝的 3D 模型這項解決方案利用以下優勢: Google 的擬真成像 3D 圖塊 Places Search、 Place Details、 和 Autocomplete API。
開始進行:
啟用
自訂體驗
3D 區域探索工具解決方案提供高度自訂彈性,你可以視需要
提升客戶流程體驗您可以自訂
透過使用者介面的控制台或 config.json
檔案
準備好自訂了嗎?步驟如下:
位置
調整經緯度以定義搜尋起點
該檔案位於 config.json
檔案中。
相機控制
選擇攝影機的軌道類型:經典 像是環形路徑或是引人入勝的正弦波
固定軌道:
這是固定高度的圓形軌道,繞著特定點的 興趣。
動態軌道:
相機在指定的正弦波浪線軌跡中流暢地移動 搜尋點。這種獨特的動作讓觀眾能觀察重點 吸引感興趣的使用者註意 沉浸式視覺體驗。
搜尋點 (POI):
- 決定想想的地點類型,自訂探索方式
探索。使用
types
選擇博物館、公園、學校等地點config.json
中的陣列。 - 您可以調整顯示的搜尋點數目上限,方法是調整
density
參數。 - 修改
searchRadius (in meters)
,加入附近隱藏的寶石或焦點 特定區域的資料 - 使用
speed (in revolutions per minute)
參數,為攝影機動作設定選擇的速度。
預先載入探索資料:透過網址自訂功能深入探索
3D 區域探索工具可讓您使用網址預先定義探索 。這樣就不必手動設定 使用者體驗
製作完美網址:
只要在「區域探索工具」網址中附加特定參數,即可預設 位置和其他設定例如:
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 體驗流暢嵌入網站中。
您可以運用網址自訂功能 打造專屬的體驗 邀請其他人一同展開精選冒險
進一步自訂
上一節探討可透過 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
:0latitude
:60height
: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 的地理編碼工具取得經緯度 地址或地點名稱的座標,方法是在位置中指定 物件:
- 存取地理編碼 工具:
- 建立地理編碼要求 按一下「立即試用」區段和 在「地址」中輸入所選位置] 欄位。您可以指定位址 地點名稱,甚至是地標
- 產生座標 按一下「執行」按鈕即可提交要求。
工具會傳回含有該地點各種資訊的回應
包括經緯度座標
geometry.location
部分。 - 使用地理編碼:從
並貼到設定的
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);
結論
本文件介紹了各種可用的自訂選項 ,打造專屬的 3D 探索體驗。修改 相機行為、調整視覺傾斜和變更縮放等級,您可以建立 獨特且引人入勝的體驗,呈現你選取的設定與點數
別忘了測試不同設定並微調 參數來滿足特定需求運用強大的 也可以打造引人入勝的個人化體驗 將您的構想化為現實