Openlayer animate动效优化

一、问题产生

问题产生很简单。公司要做一个需求，定位飞行功能，即，点击定位，获取经纬度，一个飞行的动画，飞到目标点和层级。拿到这个需求的时候，心里想，这简单啊。直接查OpenLayer API.找到了这样的一个函数：

view.animate(var_args)

于是手气刀落，敲下了这样一段代码：

//获取目标定位点等函数省略
this.map.getView().animate({
   center: center, zoom: 13}) // 同时移动和放大

顺带提一下。注意参数不同，表现也是不同的。

• 同时配置了center和zoom，那么表现就是同时移动和放大。
• 先配置center，再配置zoom，那么表现就是先平移，再缩放
• 反之，先配置zoom，再配置center，表现是先缩放，再平移

问题来了：

没错。跨地区过快的平移速度会导致瓦片加载跟不上屏幕移动的速度，用户体验很差。

二、问题分析：

可以采用先拉伸视角，再平移，再缩放视角的方式解决。于是我们就有了这样一段代码：

this.map.getView().animate({
   zoom: 7,duration:2000}, {
   center: center