OpenLayers 3 - canvas context
I am trying to reproduce this example on OL3 (3.6.0) using the following code. I am having trouble creating image context for getImageData () and putImageData () for tileloadend OSM events. Any guide would be greatly 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;
+3
source to share
1 answer
In OL3, you need to load the tile variable with the appropriate source.
Then you can use postcompose
to create a load event and apply the grayscale feature to create the 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);
});
}
You can find an example here where the canvas is not above the original layer, but you can change the divs for your purpouse.
+2
source to share