Export OpenLayers map to PDF with fixed scale and different PDF formats

Question

I want to export my OpenLayers Map to PDF with custom scale and PDF formats (A0,A1..), so I implemented the answer in this post. On a separate basic page it worked but when I tried to implement it in my project, it didn't (wrong scale in printed map). I tried to print all the values used to calculate print zoom, I noticed that there is a bigg difference in view.getMaxResolution().

In basic page :

exportButton.addEventListener('click', function() {
    var scale = 20000;
    var format = document.getElementById('format').value;
    //a4
    var resolution = document.getElementById('resolution').value;
    //150
    var dim = dims[format];
    var width = Math.round(dim[0] * resolution / 25.4);
    console.log(width);
    //1754
    var height = Math.round(dim[1] * resolution / 25.4);
    console.log(height);
    //1240
    var size = map.getSize();
    console.log(size);
    //[1536, 614]
    var extent = map.getView().calculateExtent(size);
    console.log(extent);
    //[805947.5195034844, 451740.0253744397, 835266.4804965156, 463459.9746255603]

    var mapView = map.getView();
    var currZoom = mapView.getZoom();  // edit1
    console.log(currZoom);
    //13
    var mapProjection = mapView.getProjection();
    console.log(mapProjection);
    //wb {wb: "EPSG:26191", a: "m", i: null, oe: null, b: "enu", …}
    var mapResolutionAtEquator = mapView.getResolution();
    console.log(mapResolutionAtEquator);
    //19.087865229838002
    var viewCenter = mapView.getCenter();
    console.log(viewCenter);
    //[820607, 457600]
    var mapPointResolution = ol.proj.getPointResolution(mapProjection, mapResolutionAtEquator, viewCenter);
    console.log(mapPointResolution);
    //19.0908015439191
    var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
    console.log(mapResolutionFactor);
    //0.9998461922054795

    var source = raster.getSource();
    var loading=0;
    var loaded=0;
    var tileLoadStart = function() {
      ++loading;
    };

    var tileLoadEnd = function() {
      ++loaded;
      if (loading === loaded) {
        var canvas = this;
        window.setTimeout(function() {
          loading = 0;
          loaded = 0;
          var data = canvas.toDataURL('image/png');
          var pdf = new jsPDF('landscape', undefined, format);
          pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
          pdf.save('map.pdf');
          source.un('tileloadstart', tileLoadStart);
          source.un('tileloadend', tileLoadEnd, canvas);
          source.un('tileloaderror', tileLoadEnd, canvas);
          map.setSize(size);
          // map.getView().fit(extent, size);  edit1: not needed
          mapView.setZoom(currZoom);  // edit1: return to original zoom
          map.renderSync();
          exportButton.disabled = false;
          document.body.style.cursor = 'auto';
        }, 100);
      }
    };

    map.once('postcompose', function(event) {
      source.on('tileloadstart', tileLoadStart);
      source.on('tileloadend', tileLoadEnd, event.context.canvas);
      source.on('tileloaderror', tileLoadEnd, event.context.canvas);
    });

    var mapView = map.getView();
    var printPointResolution = (scale * 25.4) / (resolution * 1000);
    console.log(printPointResolution);
    //3.3866666666666667
    var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
    console.log(printResolutionAtEquator);
    //3.3861457709358906
    var printZoom = Math.log(mapView.getMaxResolution() / printResolutionAtEquator) / Math.log(2);
    console.log(mapView.getMaxResolution());
    //156367.7919628329
    console.log(printZoom);
    //15.494939775431552

    map.setSize([width, height]);
    mapView.setZoom(printZoom);
});

In my project :

$(".export_btn").click(function(){
    proj4.defs("EPSG:26191", "+proj=lcc +lat_1=33.3 +lat_0=33.3 +lon_0=-5.4 +k_0=0.999625769 +x_0=500000 +y_0=300000 +a=6378249.2 +b=6356515 +towgs84=31,146,47,0,0,0,0 +units=m +no_defs");

    var dims = {
        a0: [1189, 841],
        a1: [841, 594],
        a2: [594, 420],
        a3: [420, 297],
        a4: [297, 210],
        a5: [210, 148]
    };
    var scale = $('#scale').val();
    var format = 'a4';//$('#format').val();
    var resolution = 150;//$('#resolution').val();

    var loading = 0;
    var loaded = 0;

    var scale = 20000;
    var dim = dims[format];
    var width = Math.round(dim[0] * resolution / 25.4);
    console.log(width);
    //1754
    var height = Math.round(dim[1] * resolution / 25.4);
    console.log(height);
    //1240
    var size = Geoportail.map.getSize();
    console.log(size);
    //[1536, 614]
    var extent = Geoportail.map.getView().calculateExtent(size);
    console.log(extent);
    //[805445.7382534844, 454071.7967316347, 834764.6992465156, 465791.74598275527]
    var mapView = Geoportail.map.getView();
    var currZoom = mapView.getZoom();  // edit1
    console.log(currZoom);
    //13
    var mapProjection = mapView.getProjection();
    console.log(mapProjection);
    //wb {wb: "EPSG:26191", a: "m", i: null, oe: null, b: "enu", …}
    var mapResolutionAtEquator = mapView.getResolution();
    console.log(mapResolutionAtEquator);
    //19.087865229838002
    var viewCenter = mapView.getCenter();
    console.log(viewCenter);
    //[820105.21875, 459931.771357195]
    var mapPointResolution = ol.proj.getPointResolution(mapProjection, mapResolutionAtEquator, viewCenter);
    console.log(mapPointResolution);
    //19.090586736530412
    var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
    console.log(mapResolutionFactor);
    //0.999857442480424

    var source = Geoportail.mapOptions.basemaps[Geoportail.getVisibleBaseMap()].layer.getSource();
    var loading=0;
    var loaded=0;
    var tileLoadStart = function() {
      ++loading;
    };

    var tileLoadEnd = function() {
      ++loaded;
      if (loading === loaded) {
        var canvas = this;
        window.setTimeout(function() {
          loading = 0;
          loaded = 0;
          var data = canvas.toDataURL('image/png');
          var pdf = new jsPDF('landscape', undefined, format);
          pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
          pdf.save('map.pdf');
          source.un('tileloadstart', tileLoadStart);
          source.un('tileloadend', tileLoadEnd, canvas);
          source.un('tileloaderror', tileLoadEnd, canvas);
          Geoportail.map.setSize(size);
          // map.getView().fit(extent, size);  edit1: not needed
          mapView.setZoom(currZoom);  // edit1: return to original zoom
          Geoportail.map.renderSync();
          exportButton.disabled = false;
          document.body.style.cursor = 'auto';
        }, 100);
      }
    };

    Geoportail.map.once('postcompose', function(event) {
      source.on('tileloadstart', tileLoadStart);
      source.on('tileloadend', tileLoadEnd, event.context.canvas);
      source.on('tileloaderror', tileLoadEnd, event.context.canvas);
    });

    var mapView = Geoportail.map.getView();
    var printPointResolution = (scale * 25.4) / (resolution * 1000);
    console.log(printPointResolution);
    //3.3866666666666667
    var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
    console.log(printResolutionAtEquator);
    //3.386183871867036
    var printZoom = Math.log(mapView.getMaxResolution() / printResolutionAtEquator) / Math.log(2);
    console.log(mapView.getMaxResolution());
    //4886.4934988385285
    console.log(printZoom);
    //10.494923542310213
    Geoportail.map.setSize([width, height]);
    mapView.setZoom(printZoom);
});

I'm using Openlayer 4.6.5

Answer 1

After analyzing the map initializer, I noticed that I was setting the minZoom attribute in my map view. After removing it, I now get the same value of mapView.getMaxResolution ().

Conclusion: The minZoom and maxZoom attributes influence the formula