13

I'm trying to set the fill opacity of a vector feature in OL3 and can't figure out how to do it if I have a hexadecimal value...I've seen examples with rgba. Any suggestions?

Here's what I have:

style : function(feature, resolution) {
          return [new ol.style.Style(
          {
            stroke : new ol.style.Stroke(
            {
              color : feature.get('color'),  
              width : 2
            }),
            fill : new ol.style.Fill(
            {
              color : feature.get('color'), //'#FF0000'
              opacity : 0.2   // I thought this would work, but it's not an option
            })
          })]
        }

4 Answers 4

19

This is late but might help someone. Using rgba property is also possible.

fill: new ol.style.Fill({color: 'rgba(255, 255, 0, 0.63)'}),
16

You can use the ol.color.asArray function. That function converts color strings to color arrays.

So this is what you can use:

var hexColor = feature.get('color');
var color = ol.color.asArray(hexColor);
color = color.slice();
color[3] = 0.2;  // change the alpha of the color

slice() is used to create a new color array. This is to avoid corrupting the "color strings to color arrays" cache that the ol.color.asArray function maintains.

See http://openlayers.org/en/master/apidoc/ol.color.html?unstable=true#asArray.

4
import ol_color from 'ol/color';

 colorWithAlpha(color, alpha) {
    const [r, g, b] = Array.from(ol_color.asArray(color));
    return ol_color.asString([r, g, b, alpha]);
 }
0

after learning from the other answers, i would do it in one line:

let half_orange = ol.color.asString(
  ol.color.asArray('orange')
  .slice(0, 3).concat(0.5));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.