Problems exporting maps and importing certain functions

[itsgifnotjiff]

https://jsfiddle.net/ghettovoice/zfjtabdv/ Shows how to export to PDF in Vue but with OpenLayers I am looking to do the same but in Vue with VueLayers ideally (love to use it thank you @Ghettovoice) what I have tried so far does not work but the exportMap method looks like

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

    }

}`

[ghettovoice]

Hello @itsgifnotjiff , here is the demo https://jsfiddle.net/ghettovoice/Ln9qr135/136/. I have adopted origin demo from openlayers site.

The problem in you sample in this line var map = this.$refs.map;. Here map is an instance of vl-map component, not an ol/Map instance. Take a not in the demo how I get te ol/Map instance from the component by ref.
Another option is using of vl-map and Vue api. https://jsfiddle.net/ghettovoice/Ln9qr135/137/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.