--- title: View 示例 date: 2021-09-08 author: ac tags: - OpenLayers categories: - GIS --- ## [View Animation](https://openlayers.org/en/latest/examples/animation.html) 示例 > 开始学`ol`会觉得很奇怪，因为从`ArcGIS API for JS 3.x`刚转过来，它里面并没有将控制分辨率、缩放级别、地图范围、投影等分离出来，这些相关的API全在map对象里面，而`ol`将它们封装到了`View`中。 ### 1 View对象 `View`对象是代表地图的简单`2D`视图，可以用于更改地图中心、分辨率、和旋转的对象；其中的projection属性，确定地图的坐标系（默认是墨卡托投影`EPSG:3857`）。 View有三种状态： - center：视图的初始中心。 - resolution：视图的初始分辨率。单位是projection每像素的单位（例如米/像素），所有关于地图缩放有关的计算都是使用`resolution`。 - rotation：视图的初始旋转（弧度）（顺时针正旋转，0表示北）。 跟地图缩放有关的还有`zoom`属性，但实际上`zoom`没有封装在`view`对象中，不过`view`中还是提供了`setZoom()`和`getZoom()`方法访问`zoom`属性。 ### 2 状态的限制 通过`setCenter`、`setResolution`和`setRotation`方法可以改变view的状态。但地图不可能无限的放大或缩小，所以使用`resolutions`设置地图的所有层级的分辨率或使用`maxResolution`、`MaxZoom`和`zoomFactor`限制缩放的大小。如果设置了`resolutions`属性，其他三个属性将失效。 ### 3 Animation动画 当改变view状态的时候，可以使用`animate(option)`方法从原来的状态平滑的过渡到另一个状态。 `option`配置对象，以`JSON`对象的方式配置参数，同时也可以有多个配置对象形成链式连续的动画效果。 | type | Description | | :--------: | ------------------------------------------------------------ | | center | 动画结束后view的中心 | | zoom | 动画结束后view的缩放级别，优先于`resolution` | | resolution | 动画结束后view的地图分辨率，如果设置了`zoom`则该配置项会被忽略 | | rotation | 动画结束后view的旋转角度，顺时针正旋转，0表示北 | | anchor | 锚点，是一个Coordinate类型的参数，用于固定某点进行动画 | | duration | 动画的过渡时间，单位为毫米 | | easing | 动画使用的缓冲函数。该函数将为每一帧调用，并带有表示动画持续时间的一小部分的数字。应该返回一个0到1之间的数字，表示向目标状态的进展。 | ```html View

My Map

View动画animation

让View平滑地改变状态（中心点、缩放级别、旋转）

```