gpt4 book ai didi

javascript - 自定义控件 Openlayers 3 上的平滑缩放

转载 作者:行者123 更新时间:2023-12-01 02:16:13 25 4
gpt4 key购买 nike

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

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

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>

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

最佳答案

您可以使用 animate 代替 setZoom
检查查看document ,向下滚动到动画
你想要的代码将是这样的:

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

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

关于javascript - 自定义控件 Openlayers 3 上的平滑缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49490576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com