Question

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

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

＆＃13;

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);
});

＆＃13;

.map {
  height: 400px;
  width: 100%;
}

＆＃13;

<!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>

＆＃13;

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

Answer 1

您可以使用animate代替setZoom 检查view的{{3}}，向下滚动到animate 你想要的代码就像：

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

document

平滑缩放自定义控件Openlayers 3

1 个答案: