Question

我正在尝试使用下面的代码在OL3（3.6.0）上重现this example。我无法获取图像上下文来在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中，您必须使用相应的源加载tile变量。

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

    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，其中画布不在原始图层上，但您可以更改您的purpouse的div。

OpenLayers 3 - 平铺画布上下文

1 个答案: