如何在打开图层中创建新的缩放按钮？

Question

I have created two buttons (using Bootstrap) for zooming in and out:

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

I have also turned off the default zoom buttons for Open Layers:

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

Now my question is, how can I make my two buttons work for zoom-in and zoom-out?

Thanks!

Answer 1

After creating your html buttons in the html file, then you add a control on each one by referring the id from the html. After that listen to the click event on the map.

 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>

Answer 2

An addition to the newer versions of OL and with animations . The behavoir of the default buttons are different and smoother. So this is a solution without setZoom() . It is a bit generic, so adjust to your framework

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

And with this function

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

To disable the normal controls, when defining map:

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