javascriptzoomingopenlayers-3getview

Zoom to Openlayers 3 function


I'm using this function from Openlayers 3 cookbook:

function zoomTo() {
  map.beforeRender(
    ol.animation.pan({
      source: map.getView().getCenter(),
      duration: 150
    }),

    ol.animation.zoom({
      resolution: map.getView().getResolution(),
      duration: 500,
      easing: ol.easing.easeIn
    })
  );
  map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());

}

This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.

I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?


Solution

  • I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.

    function zoomTo() {
        map.beforeRender(
            ol.animation.pan({
               source: map.getView().getCenter(),
               duration: 150
            }),
    
            ol.animation.zoom({
               resolution: map.getView().getResolution(),
               duration: 500,
               easing: ol.easing.easeIn
            })
        );
        map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
            padding : [100, 100, 100, 100]
        });
    }