說是相機位置可能會有點抽象 (對！我就是直接英翻中的，標題真難下)
其實就是使用者在地圖的第一視角位置啦～

Mapbox 對於 Camera 提供了以下功能：

• 可以設置、調整相機位置
• 監聽相機變化
• 獲取相機位置
• 限制相機位置以設置邊界

除了單純的控制地圖視點位置，在 Camera 更改為新值時，Mapbox 也有提供過度動畫可以使用，增加使用者體驗！

那我們分為相機位置和動畫來做介紹～開始吧

相機位置

常用的相機位置可以大致分成：Center, Zoom, Bearing, Pitch，官網有放一張動畫我覺得解釋的很清楚，分享一下～ 傳送門

大致清楚名詞定義後，接下來我們針對這些類別介紹有哪些應用！

Center

• getCenter()：回傳地圖的中心位置
• setCenter(center, eventData)：設置地圖的中心位置

ex. 取得地圖中心位置：

// Return a LngLat object such as {lng: 0, lat: 0}.
const center = map.getCenter();
// Access longitude and latitude values directly.
const {lng, lat} = map.getCenter();

Zoom

• getZoom()：回傳 zoom level
• setZoom(zoom, eventData)：設置 zoom level
• zoomTo(zoom, options, eventData)：將地圖縮放到指定的 zoom level (帶有過渡動畫)
  • duration：過度持續時間 (毫秒)
  • offset：經緯度偏差值

ex. 設置是否帶有動畫：

// Zoom to the zoom level 5 without an animated transition
map.zoomTo(5);

// Zoom to the zoom level 8 with an animated transition
map.zoomTo(8, {
  duration: 2000,
  offset: [100, 50]
});

• zoomIn(options, eventData)：縮放層級提高 1 個層級
• zoomOut(options, eventData)：降低縮放層級 1 個層級

Bearing

• getBearing()：回傳地圖旋轉角度
• setBearing(bearing, eventData)：設置地圖旋轉角度

ex. 將地圖旋轉 90 度：

// Rotate the map to 90 degrees.
map.setBearing(90);

Pan

• panBy(offset, options, eventData)：按指定的偏移量平移地圖
• panTo(lnglat, options, eventData)：使用動畫過渡將地圖平移到指定位置

ex. 地圖平移到指定位置：

map.panTo([121, 24], {duration: 5000});

Pitch

• getPitch()：回傳地圖傾斜角度
• setPitch(pitch, eventData)：設置地圖傾斜角度

ex. 將地圖傾斜 40 度：

map.setPitch(80);

在設定上，除了可以用 set 去控制，也可以在初始化地圖的時候就先設置好～

ex. 地圖傾斜 45 度：

const map = new mapboxgl.Map ({
  container: this.mapContainer.current,
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: zoom,
  pitch: 45,
});

輸出地圖：

今天就是介紹一些地圖視角的名詞跟應用，使用上蠻單純的就不帶上範例程式了～
下一篇來說一下關於動畫呈現以及和 Camera 相關的 Event，應該會有趣一點

Reference

• Camera and animations
• Camera｜Mapbox