I have written a piece of code to export map from web page. But I need to export it in different sizes and a custom size. But as I am not good with Web Development, Please guide me. The Code is here: https://i.stack.imgur.com/r2FHW.png [1]: https://i.stack.imgur.com/r2FHW.png
Here is the Solution
exportButton.addEventListener(
'click',
function () {
var C1 = document.getElementById('width').value
var C2 = document.getElementById('height').value
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148],
custom: [C1, C2]
};
var exportOptions = {
filter: function (element) {
var className = element.className || '';
return (
className.indexOf('ol-control') === -1 ||
className.indexOf('ol-scale') > -1 ||
(className.indexOf('ol-attribution') > -1 &&
className.indexOf('ol-uncollapsible'))
);
},
};
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var dim = dims[format];
var size = map.getSize();
map.once('rendercomplete', function () {
exportOptions.width = dim[0];
exportOptions.height = dim[1];
domtoimage
.toPng(map.getViewport(), exportOptions)
.then(function (dataUrl) {
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
}).finally(() => {
// Reset original map size
//scaleLine.setDpi();
map.getTargetElement().style.width = '';
map.getTargetElement().style.height = '';
map.updateSize();
//map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
});
map.render();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.