如何将 vuelayers 地图导出为 png 或 jpeg？答案

【问题标题】：How to export vuelayers map to png or jpeg?如何将 vuelayers 地图导出为 png 或 jpeg？
【发布时间】：2021-06-03 16:28:30
【问题描述】：

我将如何调整将地图保存为 PDF 的 @ghettovoice JSFiddle 以将地图保存为 JPEG 或 PNG？我不知道如何尝试这个问题，所以如果你知道如何做，你可以解释它背后的逻辑。

        exportMap: function () {
            var map = this.$refs.map

            map.once('rendercomplete', function () {
                var mapCanvas = document.createElement('canvas');
                var size = map.getSize();
                mapCanvas.width = size[0];
                mapCanvas.height = size[1];
                var mapContext = mapCanvas.getContext('2d');
                Array.prototype.forEach.call(
                document.querySelectorAll('.ol-layer canvas'),
                function (canvas) {
                    if (canvas.width > 0) {
                    var opacity = canvas.parentNode.style.opacity;
                    mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                    var transform = canvas.style.transform;
                    // Get the transform parameters from the style's transform matrix
                    var matrix = transform
                        .match(/^matrix\(([^(]*)\)$/)[1]
                        .split(',')
                        .map(Number);
                    // Apply the transform to the export map context
                    CanvasRenderingContext2D.prototype.setTransform.apply(
                        mapContext,
                        matrix
                    );
                    mapContext.drawImage(canvas, 0, 0);
                    }
                }
                );
                if (navigator.msSaveBlob) {
                // link download attribuute does not work on MS browsers
                navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
                } else {
                var link = document.getElementById('image-download');
                link.href = mapCanvas.toDataURL();
                link.click();
                }
            });
            map.renderSync();

        }

【问题讨论】：

您链接的示例基于openlayers.org/en/v5.3.0/examples/export-pdf.html 有一个等效示例openlayers.org/en/v5.3.0/examples/export-map.html 用于导出png。如果您使用的是 OpenLayers 6，您应该检查最新的示例，因为它们已经发生了显着变化。
非常感谢您的领导，但是我对 Vue 插件有点陌生，我遇到困难的地方是尝试连接 Vue.js data、methods、computed和 mounted 到 OpenLayers 包装器 vuelayers。如何从vuelayers导入示例中列出的函数？
@Mike Sorrt 打扰了，但是您将如何从 Vuelayers 导入特定的 OpenLayers 函数？甚至 Ghettovoice 在他的示例 JSFiddle 中也导入了 OpenLayers。
更新了 JSFiddle jsfiddle.net/4dougeqy/1
您在导出 PDF 时也会遇到同样的错误。 crossOrigin 选项必须在已经不是默认值的图层源（例如 OSM 和 Bing）上设置，以避免污染画布。

标签： vue.js vue-component openlayers vuelayers

【解决方案1】：

问题是缺少依赖项（即 FileSaver.js 和 fakerator.js）和跨源服务器块（CORS 块）的组合（浏览器自动阻止 httpRequests 到不同的域名，除非服务器允许）。第一个是通过安装软件包来解决的，而第二个是通过将 ImageWMSLayer 的 crossOrigin 属性设置为 null 在我的情况下解决的，但对于其他来源可能设置为“匿名”。希望这对其他人有所帮助:)

【讨论】：