@@ -7,6 +7,7 @@ docs: >
|
|||||||
tags: "export, pdf, openstreetmap"
|
tags: "export, pdf, openstreetmap"
|
||||||
resources:
|
resources:
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js
|
- https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js
|
||||||
|
- https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
|
|||||||
+11
-11
@@ -56,17 +56,17 @@ exportButton.addEventListener('click', function() {
|
|||||||
const size = map.getSize();
|
const size = map.getSize();
|
||||||
const extent = map.getView().calculateExtent(size);
|
const extent = map.getView().calculateExtent(size);
|
||||||
|
|
||||||
map.once('rendercomplete', function(event) {
|
map.once('rendercomplete', function() {
|
||||||
const canvas = event.context.canvas;
|
domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
|
||||||
const data = canvas.toDataURL('image/jpeg');
|
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(data, '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, {size});
|
||||||
map.getView().fit(extent, {size});
|
exportButton.disabled = false;
|
||||||
exportButton.disabled = false;
|
document.body.style.cursor = 'auto';
|
||||||
document.body.style.cursor = 'auto';
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Set print size
|
// Set print size
|
||||||
|
|||||||
Reference in New Issue
Block a user