一、什么是視圖變換？

視圖變換就是指視圖的 extent（范圍）、center（中心點）、zoom（縮放級別）、 resolution（分辨率）、rotation（旋轉角）等參數發生變化從而導致地圖展示范圍改變的情況。

在OpenLayers中能夠實現視圖變換的方法有不少，但是在實際開發中我們主要還是推薦使用view的animate()和fit()方法，這兩個方法功能強大可以實現許多特殊的視圖變換效果，在下面的章節中我將著重介紹這兩個方法。

二、animate方法

view.animate()方法的作用是以平滑的動畫來實現視圖的縮放級別、中心點、旋轉角度等屬性的變換。簡單來說animate()能夠實現飛行動畫或者叫視圖動畫，它能夠實現動態的效果，提升用戶的交互體驗。

1.參數介紹

animate()方法主要有兩個參數 動畫對象(們) 和 回調函數。

動畫對象

動畫對象中定義了一個動畫的相關配置，animate()方法可以接收多個動畫對象，從而將多個動畫連接起來，形成一個系列動畫。

例如，先縮放再平移：

view.animate({zoom: 10}, {center: [0, 0]});

回調函數

如果你提供一個函數作為animate()方法的最后一個參數，它將在系列動畫的末尾被調用。如果系列動畫執行完成則返回true，動畫被取消則返回false。

view.animate({duration: 2000,zoom: initialZoom.value,center: initialCenter.value,},// 回調函數isFinish => {console.log(isFinish);console.log("視角飛行完成");});

動畫的取消

動畫可以通過用戶交互（例如拖動地圖）或調用view.setCenter()、view.setResolution()、view.setRotation()（或調用這些方法中的任何一個的其他方法）來取消。

2.動畫對象中的屬性

animate()方法的動畫對象中有著如下的屬性：

名稱	說明
center	動畫結束時視圖的中心點坐標，如[116，23]。
zoom	動畫結束時視圖的縮放級別。這優先于分辨率
resolution	動畫結束時視圖的分辨率。如果還提供縮放(zoom ），則此選項將被忽略。
rotation	動畫結束時視圖的旋轉角度。
anchor	在旋轉或分辨率動畫期間保持固定的可選錨點坐標，如[116，23]。
duration	動畫的持續時間（以毫秒為單位)。
easing	在動畫過程中使用的緩動函數（默認為inAndOut 先加速后減速）。該函數會在動畫的每一幀被調用，并接收一個表示動畫持續時間的比例值作為參數。函數應該返回一個0到1之間的數字，表示當前動畫進度相對于目標狀態的完成程度。

它們大致可以分為兩類:

• 視圖參數，center、zoom、resolution、rotation，用于設置視圖該如何變化。
• 動畫參數，anchor、duration和easing，用于設置視圖動畫的內容。

下面我將對其中幾個重點的參數做一下介紹。

anchor 錨點

錨點就是旋轉動畫和分辨率動畫的中心點，通過下面這個旋轉動畫示例應該可以很明顯的看出錨點的作用：

我寫了一個圍繞錨點旋轉180°的功能

const anchor = [113.00864859159968, 23.735462919857348];function rotate() {const view = window.map.getView();const currentRotation = view.getRotation();view.animate({duration: 3000,rotation: currentRotation + Math.PI,anchor,});
}

如果沒有設置錨點，則會圍繞中心點旋轉。

easing 緩動函數

緩動函數在動畫中十分的重要，它定義了動畫在持續時間內是如何進行。像 CSS 動畫中也有設置緩動函數的屬性：

在Opnelayers中給animate()方法設置緩動函數 ( easing屬性 ) , 可以使用OpenLayers中封裝好的緩動函數(ol/easing)或者自定義。這里我肯定推薦使用OpenLayers內置的緩動函數，因為自定義一個緩動函數需要有一定的數學基礎比較困難。

OpenLayers中內置的緩動函數如下：

函數	介紹
easeIn	緩慢開始然后逐漸加速
easeOut	快速開始然后逐漸減速
inAndOut	緩慢開始，然后加速，最后再減速
linear	保持固定速度
upAndDown	與 inAndOut 相似 ，但最終的減速過程會延遲。

三、fit方法

fit()方法的作用是將視圖匹配到一個范圍或幾何圖形，讓指定的幾何圖形或范圍完整地顯示在地圖視窗內。

1.參數介紹

fit()方法的參數也有兩個：匹配目標和配置項。

匹配目標可以是一個范圍也可以是一個幾何圖形。

// 匹配一個范圍
view.fit([minx , miny , maxx , maxy])// 匹配一個幾何圖形
view.fit(new Point([116，23]))

配置項中的屬性如下：

名稱	描述
size	用于適配該范圍的矩形框的像素尺寸。默認值為與該視圖相關聯的地圖的大小。如果沒有地圖與該視圖相連，或者有多個地圖與該視圖相連，則需提供所需的矩形框尺寸（例如 map.getSize() 所獲取的尺寸）。
padding	視圖的內邊距（以像素為單位）。屬性是一個數組 [上內邊距 , 有內邊距 , 左內邊距 , 右內邊距]
nearest	如果視圖的 constrainResolution 選項為 true，則獲取最接近的范圍，而不是實際能恰好適配該視圖的最接近范圍。
minResolution	我們縮放到的最小分辨率。
maxZoom	我們縮放到的最大縮放級別。如果已經設置了minResolution，該屬性將會被忽略。
duration	同 animate()方法。
easing	同 animate()方法。
callback	同 animate()方法。

在下面的例子中我實現了一個定位到錨點圖形的功能：

function flyToGeometry() {// 獲取錨點的幾何圖形const anchorGeometry = getLayer(window.map, {layerId: "vector-test",})[0].getSource().getFeatureById("anchor").getGeometry();window.map.getView().fit(anchorGeometry, {duration: 3000,minResolution: 0.000002682209014892578,});
}

參考資料

1. OpenLayers v10.5.0 API - Class: View
2. OpenLayers v10.5.0 API - Module: ol/easing