He estado tratando de dibujar en Canvas usando OpenLayers (v6.1.1) pero, desafortunadamente, tengo problemas con la implementación de Canvas.
He intentado este enfoque simple:
const extent = [0, 0, 1024, 968]; const projection = new ol.proj.Projection({ code: 'pixel-projection', units: 'pixels', extent: extent, }); let canvas = document.createElement('canvas'); canvas.width = 1024; canvas.height = 968; let ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(0, 0, 100, 100); const imageLayer = new ol.layer.Image({ source: new ol.source.ImageCanvas({ canvas: canvas, projection: projection, imageExtent: extent, }), });
pero estoy recibiendo un error indefinido:
Además, aquí hay un violín para facilitar la navegación: https://jsfiddle.net/Loque/ur5gw270/4/
Cualquier ayuda sería muy apreciada, gracias.
ImageCanvas
necesita una opción canvasFunction
:
source: new ol.source.ImageCanvas({ canvasFunction: function() { return canvas; }, projection: projection, imageExtent: extent, ratio: 1, }),
ImageStatic
necesita una opción de url
:
source: new ol.source.ImageStatic({ url: canvas.toDataURL(), projection: projection, imageExtent: extent, }),