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

More compatible way of exporting a map as pdf

Browse Source
This commit is contained in:
Andreas Hocevar
2020-01-21 22:27:28 +01:00
parent d1b2dfb669
commit 4db204698e
1 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
examples/export-pdf.js
View File

@@ -4,8 +4,6 @@ import WKT from '../src/ol/format/WKT.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import {toJpeg} from 'html-to-image';
const raster = new TileLayer({ const raster = new TileLayer({
source: new OSM() source: new OSM()
}); });
@@ -44,14 +42,6 @@ const dims = {
}; };
// export options for html-to-image.
// See: https://github.com/bubkoo/html-to-image#options
const exportOptions = {
filter: function(element) {
return element.className.indexOf('ol-control') === -1;
}
};
const exportButton = document.getElementById('export-pdf'); const exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function() { exportButton.addEventListener('click', function() {
@@ -68,18 +58,28 @@ exportButton.addEventListener('click', function() {
const viewResolution = map.getView().getResolution(); const viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() { map.once('rendercomplete', function() {
exportOptions.width = width; const mapCanvas = document.createElement('canvas');
exportOptions.height = height; mapCanvas.width = width;
toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) { mapCanvas.height = height;
const pdf = new jsPDF('landscape', undefined, format); const mapContext = mapCanvas.getContext('2d');
pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); document.querySelectorAll('.ol-layer canvas').forEach(function(canvas) {
pdf.save('map.pdf'); if (canvas.width > 0) {
// Reset original map size const transform = canvas.style.transform;
map.setSize(size); // Get the transform parameters from the style's transform matrix
map.getView().setResolution(viewResolution); const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
exportButton.disabled = false; // Apply the transform to the export map context
document.body.style.cursor = 'auto'; CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
mapContext.drawImage(canvas, 0, 0);
}
}); });
const pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(mapCanvas.toDataURL('image/jpeg'), '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 // Set print size