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

Fix freeze on export PDF example

Browse Source 
The PDF was only generated AFTER requesting new tiles. When no new tiles where needed,
the callback never completed. Also fixed fitting the correct extent.

Fixes #7830.
This commit is contained in:
Erik Timmers
2018-03-18 12:20:51 +01:00
parent 502482a2b9
commit b5d02dad47
1 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
examples/export-pdf.js
View File

@@ -5,6 +5,7 @@ import {defaults as defaultControls} from '../src/ol/control.js';
import WKT from '../src/ol/format/WKT.js';
import TileLayer from '../src/ol/layer/Tile.js';
import VectorLayer from '../src/ol/layer/Vector.js';
import {unByKey} from '../src/ol/Observable.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
@@ -74,37 +75,51 @@ exportButton.addEventListener('click', function() {
++loading;
};
function tileLoadEnd() {
++loaded;
if (loading === loaded) {
const canvas = this;
window.setTimeout(function() {
loading = 0;
loaded = 0;
const data = canvas.toDataURL('image/png');
const 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);
map.renderSync();
exportButton.disabled = false;
document.body.style.cursor = 'auto';
}, 100);
}
let timer;
let keys = [];
function tileLoadEndFactory(canvas) {
return () => {
++loaded;
if (timer) {
clearTimeout(timer);
timer = null;
}
if (loading === loaded) {
timer = window.setTimeout(() => {
loading = 0;
loaded = 0;
const data = canvas.toDataURL('image/jpeg');
const pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
keys.forEach(unByKey);
keys = [];
map.setSize(size);
map.getView().fit(extent, {size});
map.renderSync();
exportButton.disabled = false;
document.body.style.cursor = 'auto';
}, 500);
}
};
}
map.once('postcompose', function(event) {
source.on('tileloadstart', tileLoadStart);
source.on('tileloadend', tileLoadEnd, event.context.canvas);
source.on('tileloaderror', tileLoadEnd, event.context.canvas);
const canvas = event.context.canvas;
const tileLoadEnd = tileLoadEndFactory(canvas);
keys = [
source.on('tileloadstart', tileLoadStart),
source.on('tileloadend', tileLoadEnd),
source.on('tileloaderror', tileLoadEnd)
];
tileLoadEnd();
});
map.setSize([width, height]);
map.getView().fit(extent);
const printSize = [width, height];
map.setSize(printSize);
map.getView().fit(extent, {size: printSize});
loaded = -1;
map.renderSync();
}, false);