平滑缩放自定义控件Openlayers 3
[英]Smooth zoom on custom controls Openlayers 3
问题描述
是否可以在自定义按钮控件中实现平滑缩放。
在下面的示例中，您可以看到自定义缩放控件和默认缩放控件之间的缩放动画存在很大差异。
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() { map.getView().setZoom(map.getView().getZoom() + 1); }); $('#test2').on('click', function() { map.getView().setZoom(map.getView().getZoom() - 1); });
.map { height: 400px; width: 100%; }
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <style> </style> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div> <button type="button" id="test1"> plus</button> <button type="button" id="test2"> minus</button> </div> <div id="map" class="map"></div> </body> </html>
我想知道是否可以使用自定义控件创建相同的效果平滑效果？
1 个解决方案
解决方案1
2 已采纳 2018-03-26 11:56:46
您可以使用animate代替setZoom 。
查看view的文档 ，向下滚动以创建animate 。
您想要的代码将类似于：
view.animate({
zoom: zoom - 1,
duration: 200
});
使用自定义控件构建openlayers
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.