[GIS] Color Blend Mode for OpenLayers Vector Feature

openlayers-2

Currently I'm developing a WebGIS app using OpenLayers 2.13.1, GeoServer, and PostGIS. The app has buffer analysis feature which is working fine like the picture below.

buffer

What I'm looking for is: is there a 'color blend' mode (or creating one) for the vector feature in OL?

Like 'multiply' or 'overlay', such as those in image editing software. The feature style properties in OL (of course) only allow me to set the fillOpacity to max. value of 1 (100% / opaque). Thus will only result like the picture above.

What I want is the more amount of overlaying features the darker the color will be, so that it's easier to see the density of the buffer result. That's why, I guess 'color-blend' mode should solve my problem. I've searched over the internet but didn't get what I want.

Maybe someone here might have some clue on how to do that?

Or is that even possible to do?

Any other approaches to achieve the same goal besides 'color-blend' would be fine too.

Best Answer

After searching a little deeper, I just remembered that vector layer in OL is drawn on canvas. So it's easier to work with since HTML5 canvas has the 'color-blend' property called globalCompositeOperation.

//First get the DOM Element of the layer   
var div = document.getElementById(buffer_layer.id);

//Then get the canvas element;
//it returns an array, so we will take the first index only
var canvas = div.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");

//Now set the blending mode
context.globalCompositeOperation = "blending_mode";

//blending mode can be replaced with normal | multiply | screen | overlay | darken |
//lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | 
//hue | saturation | color | luminosity

Finally, I get this picture with "color-dodge" applied:

buffer with color-dodge

Related Question