平滑缩放自定义控件 Openlayers 3

Question

是否可以在自定义按钮控件中实现平滑缩放。

在下面的示例中，您可以看到自定义缩放控件和默认缩放控件之间的缩放动画存在相当大的差异。

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>

我想知道是否可以使用自定义控件创建相同效果的平滑效果？

Answer 1

您可以使用 animate 代替 setZoom。
检查 view 的 document，向下滚动到 animate。
您想要的代码如下：

view.animate({
  zoom: zoom - 1,
  duration: 200
});

https://codepen.io/anon/pen/WzZYeE

平滑缩放自定义控件 Openlayers 3

Smooth zoom on custom controls Openlayers 3

javascript

openlayers

openlayers-3