4

I cannot get Stroke opacity working in OpenLayers 3 no matter what I try. What I try to achieve is to draw a line to OSM tile map with 0.5 opacity.

Here is sample code:

var lineString = new ol.geom.LineString([
   [4.9020, 52.3667],
   [4.9030, 52.3667],
   [4.9040, 52.3667],
   [4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: lineString,
            name: 'Line'
        })]
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'yellow',
            opacity: 0.5,
            width: 15
        })
    })
});    

var view = new ol.View({
    center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
   zoom: 18
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    lineLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: view
});

You can see it here: http://jsfiddle.net/abgcvqw3/1/

Laowai
  • 419
  • 1
  • 4
  • 15

1 Answers1

20

The opacity is set through the color option, as the fourth element of the color value (the A, for "Alpha" in RGBA).

For example here's how you can have a semi transparent yellow:

color: [255, 255, 0, 0.5]

And here is another notation:

color: 'rgba(255,255,0,0.5)'
erilem
  • 2,634
  • 21
  • 21
  • 1
    According the documentation the opacity is set using property called 'opacity', not using color option. And I already figured out that I can use color property so not sure why you needed to post this. – Laowai Dec 03 '14 at 07:35
  • 3
    Where do you see an "opacity" option for `ol.style.Stroke` in the docs? See http://openlayers.org/en/master/apidoc/ol.style.Stroke.html?unstable=true. – erilem Dec 03 '14 at 08:13
  • 2
    I guess that "opacity" option was in the end only on the 3.0.0 beta version, openlayers.org/en/v3.0.0-beta.1/apidoc/ol.style.html, even though its also in the workshop material http://openlayers.org/ol3-workshop/vector-style/style-intro.html#symbolizers. – Laowai Dec 04 '14 at 01:13