OpenLayers 快速入门（九）Extent 介绍

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二

作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

OpenLayers 快速入门（一）Map对象
 OpenLayers 快速入门（二）Layer 对象
 OpenLayers 快速入门（三）Source 对象补充
 OpenLayers 快速入门（四）View 对象
 OpenLayers 快速入门（五）Controls 对象
 OpenLayers 快速入门（六）Interaction 对象
 OpenLayers 快速入门（七）矢量数据
 OpenLayers 快速入门（八）事件系统
 OpenLayers 快速入门（九）Extent 介绍
 OpenLayers 快速入门（十）常用 API 补充

Openlayers 中 extent 介绍

在 OpenLayers 中，extent（范围）是一个表示地理区域边界的数组，格式为 $minX, minY, maxX, maxY$ 。它用于定义地图的可见区域、图层范围、几何边界等

模块导入

导入 ol/extent 模块

js 复制代码

import * as extent from "ol/extent";

createEmpty()

创建一个空范围（ $Infinity, Infinity, -Infinity, -Infinity$ ）。

js 复制代码

const emptyExtent = extent.createEmpty(); // [Infinity, Infinity, -Infinity, -Infinity]

isEmpty(extent)

检查范围是否为空。

js 复制代码

extent.isEmpty([1, 2, 3, 4]); // false

getWidth(extent)、getHeight(extent)

计算范围的宽度和高度。

js 复制代码

const width = extent.getWidth([0, 0, 10, 20]); // 10
const height = extent.getHeight([0, 0, 10, 20]); // 20

getCenter(extent)

返回范围的中心点坐标 $x, y$ 。

js 复制代码

const center = extent.getCenter([0, 0, 10, 10]); // [5, 5]

containsCoordinate(extent, coordinate)

检查坐标是否在范围内。

js 复制代码

extent.containsCoordinate([0, 0, 10, 10], [5, 5]); // true

containsExtent(extent1, extent2)

检查 extent1 是否完全包含 extent2。

js 复制代码

extent.containsExtent([0, 0, 20, 20], [5, 5, 15, 15]); // true

intersects(extent1, extent2)

判断两个范围是否相交。

js 复制代码

extent.intersects([0, 0, 10, 10], [5, 5, 15, 15]); // true

buffer(extent, value)

扩展范围（负值则缩小）。

js 复制代码

const buffered = extent.buffer([0, 0, 10, 10], 2); // [-2,-2,12,12]

getIntersection(extent1, extent2)

返回两个范围的交集（无交集时返回 null）。

js 复制代码

const intersection = extent.getIntersection([0, 0, 10, 10], [5, 5, 15, 15]); // [5,5,10,10]

boundingExtent(coordinates)

根据坐标数组计算最小包围范围：

js 复制代码

const coords = [
  [0, 0],
  [5, 10],
  [10, 0],
];
const bbox = extent.boundingExtent(coords); // [0,0,10,10]