OpenLayers 3自定义按钮控件能否实现平滑缩放？

当然可以在自定义按钮控件中实现和默认缩放控件一致的平滑缩放动画！你当前代码里用setZoom()直接修改缩放级别是瞬间完成的，所以没有过渡效果，而OpenLayers的默认缩放控件其实是调用了视图的animate()方法来实现平滑动画的。

解决方案：使用view.animate()替代setZoom() #

只需要把按钮点击事件里的setZoom()替换成animate()方法，就能实现平滑缩放了，代码示例如下：

var map = new ol.Map({ 
    "target": "map", 
    "layers": [ 
        new ol.layer.Tile({ 
            "source": new ol.source.OSM() 
        }) 
    ], 
    "view": new ol.View({ 
        "center": ol.proj.fromLonLat([37.41, 8.82]), 
        "zoom": 4 
    }) 
}); 

$('#test1').on('click', function() { 
    const currentZoom = map.getView().getZoom();
    map.getView().animate({
        zoom: currentZoom + 1,
        duration: 250 // 动画时长，单位毫秒，和默认控件保持一致
    });
}); 

$('#test2').on('click', function() { 
    const currentZoom = map.getView().getZoom();
    map.getView().animate({
        zoom: currentZoom - 1,
        duration: 250
    });
}); 

额外说明： #

• duration参数可选，如果不设置，会使用OpenLayers的默认值（250毫秒），和原生缩放控件的动画速度完全匹配。
• 你还可以通过easing参数自定义动画的缓动效果，比如easing: ol.easing.easeInOut，默认的缓动效果已经和原生控件一致，一般不需要额外调整。
• animate()方法还支持同时修改多个视图属性，比如缩放的同时平移地图，非常灵活。

内容的提问来源于stack exchange，提问作者Svinjica