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

Export the map viewport instead of the layers

Browse Source 
And filter out the controls elements
This commit is contained in:
Frederic Junod
2019-04-23 10:17:14 +02:00
parent 2ac1095c52
commit 93c25d4f82
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/export-map.js
View File

@@ -25,9 +25,17 @@ const map = new Map({
}) })
}); });
// 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;
}
};
document.getElementById('export-png').addEventListener('click', function() { document.getElementById('export-png').addEventListener('click', function() {
map.once('rendercomplete', function() { map.once('rendercomplete', function() {
toPng(map.getViewport().querySelector('.ol-layers')) toPng(map.getTargetElement(), exportOptions)
.then(function(dataURL) { .then(function(dataURL) {
const link = document.getElementById('image-download'); const link = document.getElementById('image-download');
link.href = dataURL; link.href = dataURL;

11
examples/export-pdf.js
View File

@@ -43,6 +43,15 @@ const dims = {
a5: [210, 148] a5: [210, 148]
}; };
// 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() {
@@ -59,7 +68,7 @@ exportButton.addEventListener('click', function() {
const extent = map.getView().calculateExtent(size); const extent = map.getView().calculateExtent(size);
map.once('rendercomplete', function() { map.once('rendercomplete', function() {
toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) { toJpeg(map.getTargetElement(), 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');