OpenLayers 3 - 平铺画布上下文 [英] OpenLayers 3 - tile canvas context

问题描述

我正在尝试在OL3（3.6.0）上重现此示例使用下面的代码。我无法获取图像上下文来在OSM事件 tileloadend 上执行getImageData（）和putImageData（）。任何指南都将非常感激。

I am trying to reproduce this example on OL3 (3.6.0) using the code below. I am having trouble to get image context to do getImageData() and putImageData() on OSM event tileloadend. Any guide will be very appreciated.

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;

推荐答案

在OL3中，你必须加载一个tile变量相应的来源。

In OL3 you have to load a tile variable with the corresponding source.

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

Then you can use postcompose to make an event when loaded and apply the grayscale function to make a 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);
        });

    }

您可以找到示例这里，画布不在原始图层上，但你可以改变你的purpouse的div。

You can find the example here, where the canvas is not over the original layer, but you can change the divs for your purpouse.

这篇关于OpenLayers 3 - 平铺画布上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！