如何在开放层中创建新的变焦按钮？

Question

我还关闭了打开层的默认缩放按钮：

var map = new ol.Map({
    controls: ol.control.defaults({
        zoom: false,
    })
})

现在我的问题是，如何使我的两个按钮用于缩放和缩放？

thanks！

在HTML文件中创建HTML按钮后，您可以通过引用HTML的ID对每个控件添加一个控件。之后，请在地图上收听点击事件。

Answer 1

var zoomType;
document.getElementById('customZoomOut').onclick = function() {
    zoomType="customZoomOut";
};
document.getElementById('olZoomOutLink').onclick = function() {
    zoomType="olZoomOutLink";
};

var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
    view: new ol.View({ center: [0, 0], zoom: 2 })
});

map.on('click', function(evt) {
    if(zoomType=="olZoomOutLink"){
         var view = map.getView();
         var zoom = view.getZoom();
         view.setZoom(zoom - 1);
    }
    if(zoomType=="customZoomOut"){
         var view = map.getView();
         var zoom = view.getZoom();
         view.setZoom(zoom + 1);
    }
});

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>

<div class="btn-toolbar" id="buttontoolbar">
  <div id="newSim" , class="btn-group-vertical">
    <button type="button" title="Zoom in" class="btn btn-default" id="olZoomOutLink"><img src="plus.svg"></button>
    <button type="button" title="Zoom out" class="btn btn-default" id="customZoomOut"><img src="minus.svg"></button>
  </div>
</div>

添加了OL和

动画的较新版本。默认按钮的行为是不同的。因此，这是一个没有

setZoom()

的解决方案。这有点通用，因此请调整到您的框架

Answer 2

<button onclick="zoomTo(+1)">+</button> 
<button onclick="zoomTo(-1)">-</button> 

和此功能

zoomTo(amount){
    const view = map.getView();
    const zoom = view.getZoom();
    view.animate({ zoom: zoom + amount})
}

定义映射时禁用正常控件：

new Map({
    ...
    controls: []
})

您可以通过动态调整视图缩放级别来在OpenLaylayers中创建自定义缩放按钮。下面的功能平稳地将缩放缩放为in或out：

Solution：

Answer 3

function onZoom(value: number): void {
    const view = map.getView();

    if (!view) return;

    const currentZoom = view.getZoom() ?? 0;
    const newZoom = view.getConstrainedZoom(currentZoom + value);

    // Cancel any ongoing zoom animations to prevent conflicts
    if (view.getAnimating()) {
        view.cancelAnimations();
    }

    // Custom easing function for smooth zooming
    const easeIn = (t: number) => 1 - Math.pow(1 - t, 3);

    // Animate the zoom transition
    view.animate({
        zoom: newZoom,
        duration: 250, // Adjust duration as needed
        easing: easeIn,
    });
}

usage：

<button onClick={() => onZoom(+1)}>Zoom In</button>
<button onClick={() => onZoom(-1)}>Zoom Out</button>