3D 地圖・ Maps

Maps

瀏覽器端的 WebGL 向量圖台函式庫。圖磚傳輸的是幾何與屬性，成像在使用者的裝置上即時完成。因此支援無段縮放、任意傾角與連續旋轉，並可在同一個場景中疊加業務資料與三維模型。

看 API 文件回 3D 地圖總覽

圖層上限: 50
內建互動元件: 14
路網涵蓋: 15.9 萬公里

正在載入圖台…

拖曳可平移、右鍵拖曳旋轉・ Ctrl / Command + 滾輪縮放・樣式即時重載

視角控制

縮放為無段連續，傾角可自由設定，旋轉不受限制。由於成像是即時運算的，地標標註在任何角度與任何縮放層級下都維持水平與可讀性，不會隨底圖一起變形。

傾角 0° 至 60° 的連續運鏡，過程中無任何跳階

跨四個縮放層級推近拉遠，文字始終銳利

資料視覺化

業務資料可依型態選擇呈現方式，三者皆在前端運算，並可在同一場景中疊加。

離散資料點：以點、線、面上圖並各自套用樣式。
高密度資料：使用熱力圖呈現密度分布。
點位數量過多時：交由叢集依縮放層級自動聚合。

面、線、點逐層疊上，各自套用樣式

密度分布，換一組資料即時重繪

點一顆叢集，它就展開成裡面的座標點

地標標註與訊息視窗

地標的圖示接受任意 HTML 元素作為來源，因此品牌識別、SVG 向量圖或帶動態效果的節點都能直接當成地標；尺寸逐一指定，可用大小分層表達據點層級。訊息視窗支援純文字或自訂 HTML 內容，可設定最大寬度、關閉行為與進場動畫，並綁定於指定地標開啟。

內建互動元件控制器

十四項互動元件控制器為函式庫內建，可依需求選用並指定停靠位置。

距離量測：逐點落下、長度即時累加

圖形繪製：逐點落下、閉合成面

三維場景

底圖內含全台建物量體，另提供 1,300 座以上具貼圖的地標建模。自有的 glTF 模型可放置於指定座標與高度，並沿指定路徑移動，適用於車隊軌跡、空拍巡檢與設備定位等情境。三維內容與底圖處於同一個場景、由深度緩衝排序，模型會被建物正確遮擋，而非疊加於地圖之上的獨立圖層。

整合方式

引入一支 loader、指定一個容器，並帶入金鑰與樣式位址即可初始化。style 指向的是 Studio 輸出的樣式檔，更換樣式不需要調整程式碼。

const map = await new mapThree(document.getElementById('map'), {
  accessKey:   '<your-access-key>',
  accessToken: '<your-access-token>',
  style:       '<Studio 輸出的樣式網址>',
  center: [121.5645, 25.0336],
  zoom: 16.4,
  pitch: 60,
  bearing: 18,
});

完整的方法、參數與事件說明請見 API 文件。