OpenLayers 3 之 地圖視圖（View） 詳解

    初始化一幅地圖，必備的三要素之一就是視圖（view），這個對象主要是控制地圖與人的互動，如進行縮放，調節解析度、地圖的旋轉等控制。也就是說每個 map對象包含一個 view對象部分，用於控制與使用者的互動。

    主要介紹 view 的作用和用法，並分析商用的地圖應用中的相關的功能。功能的具體的實現與如何進行定製和最佳化，就超過了這篇文章的範圍了。

    view 類的定義可以在 GitHub 的 OpenLayers 項目中的 這裡 看到，我就不貼大篇幅的代碼了，只是針對特定的點貼一下核心代碼，需要看完整源碼的到上面的連結去看。 一、 view 屬性

    view 的建構函式需要的參數是一個 olx.ViewOptions對象，這個對象的描述如下：

/** * Object literal with config options for the view. * @typedef {{center: (ol.Coordinate|undefined), *     constrainRotation: (boolean|number|undefined), *     enableRotation: (boolean|undefined), *     extent: (ol.Extent|undefined), *     minResolution: (number|undefined), *     maxResolution: (number|undefined), *     minZoom: (number|undefined), *     maxZoom: (number|undefined), *     projection: ol.proj.ProjectionLike, *     resolution: (number|undefined), *     resolutions: (Array.<number>|undefined), *     rotation: (number|undefined), *     zoom: (number|undefined), *     zoomFactor: (number|undefined)}} * @api */

比較重要的屬性如下： center 是一個座標[x， y]，表示地圖視圖的中心位置； extent 是一個數組對象 – [left, bottom, right, top]，表示地圖視圖的初始範圍； projection 是地圖的投影座標系統； resolution 表示地圖的解析度，單位並不是普通的單位面積的像素，而是單位像素表示的距離單位，比如 米/像素； rotation 表示地圖的旋轉角度； zoom 表示地圖初始的縮放層級。

    這些屬性的狀態直接影響地圖的外觀和使用者的互動，該對象用於初始化 view 的屬性。 view 包含一個ol.ViewProperty數組：

ol.ViewProperty = {  CENTER: 'center',  RESOLUTION: 'resolution',  ROTATION: 'rotation'};

    除了初始化 ol.ViewProperty 中的屬性，view 的屬性還有 projection_屬性，表示投影資訊；一些限制屬性maxResolution_ ， minResolution_ ， minZoom_ 等，主要是限制地圖的最大和最小解析度（比例尺）和最小縮放層級（zoom level）等。

    定義view類的方法是 混合使用建構函式模式和原型模式，建構函式模式部分（如上面建構函式的定義），主要定義類的私人屬性和私人函數，所以以上定義的為每個對象特有的屬性，各個對象內容各異；原型模式主要定義類的公有方法，每個執行個體化的對象儲存的都是原型的指標，所以原型模式定義的方法和屬性只有一個執行個體，每個對象都引用這個執行個體。

    下面我們就分別介紹其各個執行個體化的 view 對象的常用公有方法、作用和用法。 二、 view 方法

    view 類的方法主要是針對 view 的屬性的 get 和 set 方法，其基本的方法很多，我們將常用的方法進行歸類： rotate，ifDef fitExtent，fitGeometry getCenter，getProjection，getResolution，getRotation，getZoom setCenter，setResolution，setRotation，setZoom

    下面分別介紹這些方法的作用和用法，後面還有執行個體，讓大家更清楚地瞭解這些方法執行的效果。

rotate(rotation , opt_anchor )，接受兩個參數，旋轉角度數（rotation）和旋轉中心（opt_anchor，可選），將地圖圍繞 opt_anchor 旋轉 rotation 角度；

isDef，檢查地圖的中心和解析度是否已經設定，都設定返回 true，否則返回 false；

fitExtent(extent, size)，接受兩個參數：extent 和 size，extent 類型是 ol.Extent – [left, bottom, right, top]，size由map.getSize()擷取；該功能類似於 ArcGIS 的縮放到圖層功能，將地圖的view 縮放到 extent 地區可見的合適尺度；

fitGeometry(geometry, size, opt_options)，參數是地理要素，地圖尺寸和選擇性參數；根據給定的地理要素，將 view 縮放到適合地理要素顯示的尺寸；

get ，getCenter() 擷取地圖的中心，返回一個地圖中心的座標；getResolution()擷取地圖的解析度，即比例尺，返回一個表示比例尺的數值； getProjection()擷取地圖使用的”投影座標系統”，如EPSG:4326；getRotation()擷取地圖的“旋轉角度”；getZoom()擷取地圖的縮放層級，返回一個表示縮放層級的數值；以上的函數均不需要任何參數；

set ，setCenter(center)，參數為ol.Coordinate類型 – [x, y]，作用為設定地圖的中心座標；setResolution(number)設定地圖的解析度（比例尺）；setRotation(number)，參數為旋轉的角度對應的值，並不是度數，如Math.PI，不是180度，作用是將地圖旋轉相應點角度，順時針為正；setZoom(number)設定地圖的縮放層級。

    這些方法中，fit類方法和 set 類方法，調用都可以看到效果，其它的都是計算或者擷取相應已經存在的值。下面我們通過執行個體來看看這些方法的效果。 三、 view 類應用執行個體

    我們將 HTML 頁面中加一個按鈕，然後綁定一個點擊事件，點擊觸發我們的功能。首先在 HTML 的最後面添加按鈕：

<input id="setViewTrigger" type="button" value="Trigger"></input>

然後進行函數綁定：

var trigger = document.getElementById("setViewTrigger");trigger.addEventListener("click", function(){     //擷取地圖的 view     var view = map.getView();     //這裡寫相應執行的動作     . . .},false);

地圖初始情況如下圖，每一個功能調用後，只貼一張效果效果圖，就不貼原圖了：

1、rotate(rotation, opt_anchor)

    rotate 方法第一個參數是角度，為數值，單位不是度，180度對應數值PI，也就是3.1415926 · · ·；且正數表示順時針旋轉，如要想順時針旋轉60度，那麼傳入 Math.PI /3。

在單擊事件中添加如下調用：

view.rotate(Math.PI / 3);

調用函數後效果圖：

2、fitExtent(extent, size)

    只要涉及到座標運算的都要注意座標轉換，這幅地圖的預設座標係為 EPSG:3857，如果使用的 EPSG:4326要注意進行座標轉換，使用ol.proj.transformExtent（轉換Extent）和ol.proj.transform（轉換座標）進行座標轉換。

在事件函數中添加如下這句：

view.fitExtent(ol.proj.transformExtent([76,18,140,56], 'EPSG:4326', 'EPSG:3857'), map.getSize()); 

其中 [76,18,140,56]是中國的外包矩形座標，結果應該是適合顯示中國全圖的尺度。

函數調用後效果圖：

3、fitGeometry(geometry, size, opt_options)

    要縮放到要素層級，首先要先獲得相應要素，這裡我選擇的是代表“尼泊爾”的版圖；然後再傳入參數，進行縮放。在事件函數中添加如下代碼：

    var feature = vectorLayer.getSource().getFeatures()[28];    var polygon = feature.getGeometry();    view.fitGeometry(polygon, map.getSize()); 

效果應該是將“尼泊爾”縮放到最合適可見的層級。調用後效果如圖：

4、get

get 函數都不需要參數，只需要獲得地圖的 view 對象，在 view 對象上調用即可。 4.1 getZoom()

var zoom = view.getZoom();alert(zoom);

初始狀態的縮放值：

初始狀態的縮放值為2，這與初始的設定相吻合：

我們接著將地圖放大兩次，然後再檢查zoom值：

可見 zoom 值變成了4，可見zoom值就是地圖的縮放層級。百度地圖或者Google地圖等旁邊的側條顯示國家、省、市等層級的值就與這個相關。 4.2 getCenter()

函數執行結果是返回地圖的中心座標，類型為ol.Coordinate。添加如下代碼：

var center = view.getCenter();alert(center);

執行結果：

4.3 getProjection()

    函數執行結果是返回一個ol.proj.Projection對象，代表地圖的投影座標系統，該對象有一個方法 getCode()，返回投影的 ESPG 代碼。例如，添加如下代碼：

var projection = view.getProjection().getCode();alert(projection);

運行結果如下：

4.4 getResolution()

函數返回一個數值，代表地圖當前的解析度（比例尺），例如，添加如下代碼：

var resolution = view.getResolution();alert(resolution);

運行結果如下：

縮放到中國的版圖，觀察其解析度的值是否改變：

4.5 getRotation()

    函數返回一個數值，代表旋轉的角度。正常情況下，為 0。我們嘗試旋轉 Math.PI/3，也就是60度，然後再調用函數擷取，結果如下：

結果為1.0471975511965976，也就是 Math.PI /3。 5、set 5.1 setCenter(center)

    接受一個參數：中心座標，類型為 ol.Coordinate，無傳回值。我們取尼泊爾境內的中心座標：[82.66363, 29.64666]，然後將傳入的座標設定為地圖的中心：

view.setCenter(ol.proj.transform([82.66363, 29.64666], 'EPSG:4326', 'EPSG:3857'));

    首先我們將地圖平移到大海的地方，然後執行這一句，地圖就會平移到尼泊爾為中心。該函數並不會改變地圖的縮放層級（zoom）和解析度（resolution），只是將傳入的座標設定地圖的中心。

設定新的中心後：

5.2 setResolution(resolution)

    接受一個參數，一個代表解析度（比例尺）的數值，無傳回值，操作結果就是將地圖的解析度（比例尺）設定為傳入的數值。和 setCenter 一樣，這個函數並不負責其他的功能，它只會就地，將地圖的解析度設定為相應的值，地圖中心並不會變。

view.setResolution(100);

    解析度（比例尺）表示真實的地物與圖上的地物的大小比例，所以解析度的值越大，那麼表示地圖會顯示的越小，值越小，地圖越大，越清楚。

    預設的解析度，為 39135.75848201024，我們把解析度設定為 100000，理論上應該地圖會縮小。調用函數效果如下圖：

5.3 setZoom(zoom)

    接受一個數值參數，將地圖的縮放層級設定為相應的數值代表的縮放層級，同樣地圖中心也不會受到影響。

    縮放層級（zoom level）分為多級，值越小，那麼表示地圖會顯示的越小，值越大，地圖越大，越清楚，與解析度的值正好相反的規則。

    地圖最初的縮放層級是 2，我們將其設定為 10，效果如下：

view.setZoom(10);

執行結果：

    像百度地圖中的左邊有一個比例尺條，分為國家、省、市、縣等幾個縮放層級，也是利用該項功能。當檢測到縮放層級的值變化時，將尺規的刻度移動到對應的位置，即可。

5.4 setRotation(rotation)

    設定地圖的旋轉角度，接受參數為旋轉的角度，執行結果就是將地圖圍繞當前的地圖中心，旋轉相應的角度。該函數和 rotate(rotation, opt_anchor) 方法極為類似，用法直接參照 rotate方法就可以。

view.setRotation(Math.PI / 2);

調用函數後，地圖順時針旋轉了90度：

四、總結

    OK，到此為止，基本 view 所有的功能都介紹完了。總之，view主要控制地圖與使用者的最基本的互動，每個 map 對象必須包含一個 view 對象，也就是說每個 map 必須都支援縮放、平移等基本互動動作。

    這樣，聯合上一篇的 OpenLayers 之 圖層(Layers) 詳解 ，我將 建立一幅地圖需要的三個要素： layers、view 和 target，已經講了最重要的兩個了，剩下一個 target，就是存放地圖的 HTML 元素的 ID 值，沒有講的必要，就略過了。