html5-canvas - OpenLayers 3 - 平铺 Canvas 上下文

Question

我正在尝试重现 this example在 OL3 (3.6.0) 上使用下面的代码。我无法获取图像上下文以在 OSM 事件 tileloadend 上执行 getImageData() 和 putImageData()。任何指南将不胜感激。

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

在 OL3 中，您必须加载具有相应源的图 block 变量。

然后你可以使用postcompose在加载时创建一个事件并应用灰度函数来制作 Canvas 。

    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);
        });

    }

您可以找到示例 here ，其中 Canvas 不在原始层之上，但您可以根据需要更改 div。