[英]Export map in different page sizes
我寫了一段代碼來從 web 頁面導出 map。 但我需要以不同的尺寸和自定義尺寸導出它。 但是由於我不擅長 Web 開發,請指導我。 代碼在這里: https://i.stack.imgur.com/r2FHW.png [1]: https://i.stack.imgur.com/r2FHW.png
這是解決方案
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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.