当前位置：首页 > news >正文

OpenLayers：视图变换的方法

news 来源：原创 2025/5/3 1:45:54

一、什么是视图变换？

视图变换就是指视图的 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,});
}