一、范圍的概念

1.什么是范圍？

在Openlayers中范圍（Extent）是用于表示地理空間區域的一種概念。它通常由一個數字數組構成，數組中的內容為：[最小x坐標，最小y坐標，最大x坐標，最大y坐標]。

Extent實際上表示了一個矩形的空間范圍：

2.什么是視圖范圍？

視圖范圍可以理解為Openlayers的map在瀏覽器視口中所顯示的地理空間范圍，這個范圍被map所關聯的view（視圖）來存儲和管理，所以稱之為視圖范圍。

二、視圖范圍的使用

1.設置視圖范圍

想要設置視圖范圍可以在實例化View時通過extent屬性來設置。

但是在實例化完成后似乎就沒有辦法去修改一個視圖的extent了。

2.獲取視圖范圍

獲取地圖當前的視圖范圍是一個常見的操作，當前的視圖范圍可以幫助我們去甄別一些要素是否應該被現實從而實現要素的“懶加載”。這個范圍一般可以通過view.calculateExtent()方法計算得到。

  // 當前的視圖范圍const extent = map.getView().calculateExtent();

如果map已經與view進行了綁定，則直接調用calculateExtent()就可以計算出視圖的范圍。但是在一些特殊情況下（如，map沒有與view相綁定或者view綁定了多個map）想要獲取視圖范圍，此時就要給calculateExtent()傳遞一個box size 作為參數，最終計算出來的范圍將適配這個size，可以使用map.getSize()方法獲取地圖的尺寸用來作為參數計算視圖范圍。

// 如果map沒有與view相綁定
const extent = view.calculateExtent( map.getSize() );

三、其它類型中的范圍

1.圖層、數據源和幾何的范圍

Openlayers中 Layer（圖層）、Source（數據源）、Geometry（幾何）等重要的類型都有自己的 extent屬性，通常用于表示包含其內容的地理范圍。調用它們的getExtent()方法就可以獲取到它們的范圍。

// 獲取圖層的范圍
layer.getExtent()// 獲取數據源的范圍
source.getExtent()// 獲取幾何圖形的范圍
point.getExtent()
polyline.getExtent()
polygon.getExtent()

在實際的開發中，我經常會使用這些范圍來實現圖層的定位或幾何圖形的定位。

// 視角切換到圖層范圍
map.getView.fit(layer.getExtent())// 視角切換到某個幾何圖形
map.getView.fit(pointFeature.getGeometry().getExtent())

2.投影坐標系的范圍

投影坐標系也有自己的范圍，例如 EPSG:4326 的范圍就是 [-180, -90, 180, 90]。投影坐標系的范圍同樣也是通過它們的getExtent()方法獲取。

import { get as getProjection } from "ol/proj";getProjection("EPSG:4326").getExtent(),

在創建切片數據源的tileGrid時就有可能會用到投影范圍。

const tileGrid = new createXYZ({extent: getProjection("EPSG:4326").getExtent(),maxZoom: 18,
}),

四、常用的范圍方法

Openlayers中封裝了一批專門用來操作Extent的方法，這些方法可以輔助我們在實際開發中實現很多的功能。

1.獲取范圍的特征信息的方法

前面提到過范圍可以理解為就是一個“矩形框”，有一些方法專門用來計算矩形框的特征信息：

方法	描述
getSize	獲取范圍的尺寸
getArea	獲取范圍的面積
getWidth	獲取范圍的寬度
getHeight	獲取范圍的高度
getCenter	獲取范圍的中心點
getTopLeft	獲取范圍的左上角點
getTopRight	獲取范圍的右上角點
getBottomLeft	獲取范圍的左下角點
getBottomRight	獲取范圍的右下角點

2.范圍查詢方法

范圍最常用的一種場景就是進行范圍查詢。containsCoordinate(extent, coordinate) 、 containsXY(extent, x, y) 和 containsExtent(extent1, extent2) 三個方法可以用來進行范圍查詢。其中前兩個方法用于檢查坐標是否位于范圍內，最后一個方法則用于檢查一個范圍是否包含于另一個范圍內。

下面這個例子就展示了如何利用containsExtent方法檢查一個Featrue要素是否位于范圍內：

const extent = [...]; // 范圍
const feature = new Feature(...); //要素// 檢查要素是否位于范圍內
const res = containsExtent(extent, feature.getGeometry().getExtent())

3.范圍工廠方法

還有一些方法可以創建一個范圍，例如boundingExtent(coordinates)方法，它可以創建一個包含所有給定坐標的范圍。

下面的例子展示如何使用boundingExtent()方法創建一個包含所有點要素的范圍：

const pointFeatures = [...];// 創建一個包含所有點要素的范圍
const extent = boundingExtent(pointFeatures.map(r => r.getGeometry().getCoordinates())
);

參考資料

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