How to zoom out in Openlayer in the particular extent?

Question

I am creating the interaction for zoom in and zoom out using OpenLayers. I am able to achieve zoom in but I am not able to figure out how can I create zoom out to some extent. Here is my code for zoom in

$('#zoomin').click(function () {
    removeInteraction();
    $('#map').css("cursor", "zoom-in");
    map.addInteraction(dragBoxInteraction);
    dragBoxInteraction.on('boxend', function () {
        var extent = dragBoxInteraction.getGeometry().getExtent();
        map.getView().fit(extent, map.getSize());
    })
})

For zoom out I have written something like this

$('#zoomout').click(function () {
    removeInteraction();
    map.getView().animate({
        zoom: map.getView().getZoom() - 1,
        duration: 250
    })
})

Using this way I am able to draw a rectangle box and I am getting the extent and I am able to zoom in that extent.

But Using the same feature how will I zoom out?

Answer 1

You can try with this function:

 const handleSquareZoomOut = () => {
    const dragZoom = new ol.interaction.DragZoom({
      condition: ol.events.condition.always,
      out:true,
    })
    
    map.addInteraction(dragZoom)
  }