项目中要实现把OpenLayers的View移动到某点并放大到指定级别,参考 http://anzhihun.coding.me/ol3-primer/ch11/11-02.html ,发现大概代码以下:javascript
function backWithAnim() { var pan = ol.animation.pan({ duration: 2000, source: map.getView().getCenter(), easing: getEasing() // 设置对应选择的动画 }); map.beforeRender(pan); map.getView().setCenter(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857')); }
当我在编码的时候,发现这个可能只适合OpenLayers 3,我用的 OpenLayers 5,并没找到 ol.animation.pan 类,html
后来我到官方API文档 http://openlayers.org/en/latest/apidoc/module-ol_View-View.html#animate 找到了新写法,以下:java
view.animate({zoom: 10}, {center: [0, 0]});
新写法感受更好理解!通过实际使用,发现传递给animate方法的参数,编写的前后顺序会影响动画效果,下面记录一下!api
如下是我项目中截取的几行代码:测试
// 动画移动 // _this.map1.getView().animate({center: center}, {zoom: 18}) // 先移动再放大 // _this.map1.getView().animate({zoom: 18}, {center: center}) // 先放大再移动 _this.map1.getView().animate({center: center, zoom: 18}) // 同时移动和放大
我发现,每一个参数单独对象设置,动画就会按顺序执行,若是参数都写在一个对象,动画就同时执行(另外,混写的状况请自行测试),下面分别是个人屏幕动画:动画
先移动再放大:this
先放大再移动:编码
同时移动和放大:code
(完)orm