OpenLayers：extent与view extent 介绍

一、范围的概念

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