OpenLayers: Print PDF in specific scale (e.g. 1:1000) - printing

Question

I would like to create pdfs in OpenLayers with specifis scales.
I know the example how to print pdfs in DinA4 or DinA3.
var dims = {
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
But so far I didn`t get it to create maps in a specific sacle (e.g. 1:1000 in meters).
Could anybody give me a hint please?

Answer 1

Thank you for the hint.
In OL5 it works great with that (just a little bit changed) code from the above mentioned example:
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {transform} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import WKT from 'ol/format/WKT.js';
import {defaults as defaultControls} from 'ol/control.js';
import {ScaleLine} from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import TileWMS from 'ol/source/TileWMS.js';
import Static from 'ol/source/ImageStatic.js';
import * as proj4 from 'ol/proj';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj';
import BingMaps from 'ol/source/BingMaps.js';
import * as olProj from 'ol/proj';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle,Fill, Stroke, Style, Text} from 'ol/style.js';
proj4.defs('EPSG:25832', '+proj=utm +zone=32 +x_0=-32000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);
const utm32n = transform([7.7,52.2], 'EPSG:4326', 'EPSG:25832');
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
var mzoom=12;
var rechtswert = Number(getURLParameter('rechtswert'));
var hochwert = Number(getURLParameter('hochwert'));
var mzoom = Number(getURLParameter('zoom'));
if (rechtswert == 0 || hochwert == 0) {
rechtswert = 412989; hochwert = 5791597; mzoom=18;
}
if (mzoom == 0 ) { mzoom=18
}
var osm = new TileLayer({
source: new OSM()
});
var bingMapsAerial = new TileLayer({
preload: Infinity,
source: new BingMaps({
key: 'AqpsHuO0V-IoueH******************wj0w38QDNe5cVMeZtF-4VMlu4CM8oN',
imagerySet: 'Aerial',
})
});
var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({
layers: [osm,bingMapsAerial],
target: 'map',
view: view
});
map.addControl(new ScaleLine({units: 'metric'}));
var zoom = view.getZoom();
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
var scale = document.getElementById('scale').value;
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
var scaleResolution = scale / olProj.getPointResolution(map.getView().getProjection(), resolution / 25.4, map.getView().getCenter());
map.once('rendercomplete', function(event) {
var canvas = event.context.canvas;
var data = canvas.toDataURL('image/jpeg');
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
map.getView().setResolution(scaleResolution);
}, false);
And the html-code like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<meta charset="utf-8">
<title>k,ais test</title>
<style>
#map {
width: 750px;
height: 750px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<form class="form">
<label>Page size </label>
<select id="format">
<option value="a0">A0</option>
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a4" selected>A4</option>
<option value="a5">A5</option>
</select>
<label>Resolution </label>
<select id="resolution">
<option value="72">72 dpi</option>
<option value="150">150 dpi</option>
<option value="200" selected>200 dpi</option>
<option value="300">300 dpi</option>
</select>
<label>Scale </label>
<select id="scale">
<option value="500">1:500000</option>
<option value="250" selected>1:250000</option>
<option value="100">1:100000</option>
<option value="50">1:50000</option>
<option value="25">1:25000</option>
<option value="10">1:10000</option>
</select>
</form>
<button id="export-pdf">Export PDF</button>
...
....