平滑縮放自定義控件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.