以不同的页面大小导出 map

Question

我写了一段代码来从 web 页面导出 map。 但我需要以不同的尺寸和自定义尺寸导出它。 但是由于我不擅长 Web 开发，请指导我。 代码在这里： https://i.stack.imgur.com/r2FHW.png [1]： https://i.stack.imgur.com/r2FHW.png

Answer 1

这是解决方案

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();
});