html5 canvas - lineas - OpenLayers 3-contexto de lienzo de mosaico

graficos con canvas html5

Question

Estoy intentando reproducir este ejemplo en OL3 (3.6.0) usando el siguiente código. Tengo problemas para obtener el contexto de la imagen para hacer getImageData () y putImageData () en el evento OSM tileloadend . Cualquier guía será muy apreciada.

function map_create (div_id, lat, lng, zoom, hide_controls) {

vectorSource=new ol.source.Vector();
vectorLayer=new ol.layer.Vector({source: vectorSource});
osm=new ol.source.OSM();

osm.on("tileloadend", function(evt){


    /*var size=evt.tile.getTileCoord();
    console.log(size);*/

     var c = evt.tile.getImage();
     console.log(c.context); // undefined
     return;

     var ctx=c.getContext("2d");

     if (ctx) {
         console.log(ctx);
         /*
         var imgd = ctx.getImageData(0, 0, 100,100);
         var pix = imgd.data;
         for (var i = 0, n = pix.length; i < n; i += 4) {
             pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;
         }
         ctx.putImageData(imgd, 0, 0);
         evt.tile.imgDiv.removeAttribute("crossorigin");
         evt.tile.imgDiv.src = ctx.canvas.toDataURL();*/
     }
});

var map=new ol.Map({
    target: div_id,
    layers: [
      new ol.layer.Tile({source: osm}),
      vectorLayer
    ],
    renderer:''canvas'',
    view: new ol.View({
      center: ol.proj.transform([lng, lat], ''EPSG:4326'', ''EPSG:3857''),
      zoom: zoom
    })
  });

return map;

Answer 1

En OL3, tienes que cargar una variable de mosaico con la fuente correspondiente.

Luego puede usar postcompose para crear un evento cuando se carga y aplicar la función de escala de grises para crear un lienzo.

    function Initialize() {

        var imagery = new ol.layer.Tile({
            source: new ol.source.OSM()
        });


        var map = new ol.Map({
            target: ''map'',
            layers: [imagery],
            view: new ol.View({
                center: ol.proj.transform([-2.1833, 41.3833], ''EPSG:4326'', ''EPSG:3857''),
                zoom: 6
            })
        });


        //Apply a filter on "postcompose" events.
        imagery.on(''postcompose'', function(event) {
            greyscale(event.context);
        });

    }

Puede encontrar el ejemplo aquí , donde el lienzo no está sobre la capa original, pero puede cambiar los divs para su propósito.