Me gustaría establecer una opción para exportar mi mapa OpenLayers como archivo .png.

Usé este ejemplo:

https://openlayers.org/en/master/examples/export-map.html

desde donde recuperé toda la codificación y enlaces relevantes.

Mi situación se ve así:

HTML

 <button type="button" class="saveBtn"><a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a> <a id="image-download" download="map.png"></a></button>

JS

 document.getElementById('export-png').addEventListener('click', function () { map.once('rendercomplete', function () { var mapCanvas = document.createElement('canvas'); //var img = new Image(); //img.crossOrigin = "anonymous"; 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(); });

La consola no dice nada. No hay reacción después de hacer clic en el botón. ¿Qué falta aquí?

Mira mi situación completa aquí:

https://mlearnweb.online/