ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Export PDF example extent corrections

Browse Source 
Fixes #9460 and #9665

Replace calculateExtent and fit with getResolution and setResolution as the former do not produce the desired result when the view is rotated.

Export the viewport instead of the map div (which doesn't resize) and specify the width and height in the export options

This is a minimal fix for the two issues.  Further enhancement including a fallback to export layer canvases where the browser doesn't support html-to-image could be done separately if necessary.
This commit is contained in:
mike-000
2019-07-04 10:07:31 +01:00
committed by ahocevar
parent 776dab81b8
commit 7cdfc33d15
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
examples/export-pdf.js
View File

@@ -65,18 +65,18 @@ exportButton.addEventListener('click', function() {
const width = Math.round(dim[0] * resolution / 25.4); const width = Math.round(dim[0] * resolution / 25.4);
const height = Math.round(dim[1] * resolution / 25.4); const height = Math.round(dim[1] * resolution / 25.4);
const size = map.getSize(); const size = map.getSize();
const extent = map.getView().calculateExtent(size); const viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() { map.once('rendercomplete', function() {
toJpeg(map.getTargetElement(), exportOptions).then(function(dataUrl) { exportOptions.width = width;
exportOptions.height = height;
toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
const pdf = new jsPDF('landscape', undefined, format); const pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf'); pdf.save('map.pdf');
// Reset original map size // Reset original map size
map.setSize(size); map.setSize(size);
map.getView().fit(extent, { map.getView().setResolution(viewResolution);
size: size
});
exportButton.disabled = false; exportButton.disabled = false;
document.body.style.cursor = 'auto'; document.body.style.cursor = 'auto';
}); });
@@ -85,6 +85,7 @@ exportButton.addEventListener('click', function() {
// Set print size // Set print size
const printSize = [width, height]; const printSize = [width, height];
map.setSize(printSize); map.setSize(printSize);
map.getView().fit(extent, {size: printSize}); const scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false); }, false);