[GIS] Openlayers 3 Vector Layer transparency

openlayersstyle

I'm having a hard time to get my vector features showing as i would like to.
I have a geojson file with polygon which overlaps. They are generated with OpenTripPlanner and the features are isochrones.

I have made a small test like this which looks as it should but is not transparent:
Polygons looks ok but not transparent

If I set opacity to 0.4 i get this:

Not the result i want

Is there a way? – I would like to just request the polygons from the opentripplanner api.

EDIT:

Here is some of the styling I'm doing:

var red = [255, 0, 0, 1]
var green = [0, 255, 0, 1]
var blue = [0, 0, 255, 1]

var interval_Isochrone = {
    300: red,
    600: green,
    900: blue
}


var defaultStyle = new ol.style.Style({
    fill: new ol.style.Fill({
    color: [255, 0, 0, 1]
    }),
    stroke: new ol.style.Stroke({
    color: [255, 255, 255],
    width: 1
    })
});

var styleCache_Isochrone = {}

function styleIsochrone(feature, resolution){
    var tid = feature.get('time');

    if (!tid || !interval_Isochrone[tid]){
    return [defaultStyle];
    }

    if (!styleCache_Isochrone[tid]){
    styleCache_Isochrone[tid] = new ol.style.Style({
        fill: new ol.style.Fill({
        color: interval_Isochrone[tid]
        }),
        stroke: new ol.style.Stroke({
        color: [0, 0, 0],
        width: 1
        })
    });
    }

    return [styleCache_Isochrone[tid]];
}

geojson = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'isochrone.json',
        format: new ol.format.GeoJSON()
      }),
      style: styleIsochrone
    });

Best Answer

Vittrup, can you please explain what you are trying to achieve? Your colours have been defined as rgba but with opacity set at 1. Your second screenshot seems to show correctly i.e. green/blue changing colour when sat on top of red. If you require each of the layers/shapes to be transparent then adapt your colour values to something like:

var red = [255, 0, 0, 0.5]
var green = [0, 255, 0, 0.5]
var blue = [0, 0, 255, 0.5]
Related Question