OL6, dynamic color/opacity/transparancy depending on number (percentage) in feature

Question

I'm inspired by this section: https://openlayers.org/workshop/en/vector/style.html especially the 'dynamic styling'. Is there an easy way to include dynamic styling in my map?

I'm thinking about changing the opacity of a polygon based on the number in the feature. In my geojson file I've a feature with percentages (VVD_perc)

I think I have to change something in my styling-section around this line: color: 'rgba(100, 100, 100, 0.25)', but I'm not sure what to change, and where.

I'm thinking of the higher the percentages, the polygon gets less transparent. so the opacity gets from:

color: 'rgba(100, 100, 100, 0.01)'by 1 percent to color: 'rgba(100, 100, 100, 1)' by 100%.

The styling section in the java-script part looks like this:

var partijStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(100, 100, 100, 0.25)',
    }),
  stroke: new ol.style.Stroke({
    color: '#319FD3',
    width: 2
  }),
  text: new ol.style.Text({
    font: '10px Calibri,sans-serif',
    fill: new ol.style.Fill({
    color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    })
  })
});

this is the section where I call for the feature with the percentages. Maybe that is usefull too?

var vvdLayer = new ol.layer.Vector({
  source: geojsonSource,
  //style: partijStyle
  style: function(feature) {
    partijStyle.getText().setText(feature.get(('VVD_perc'))
        );
    return  partijStyle;
 }
});

I hope one of you can put me in the right direction. If there is a book or website with an example about this, I'm already happy.

Thank you Mike for another big help I made some other changes too. I hope it helps others. It appears one cannot make calculations in the setColor() part. For that you need to make a var as in variabele first. You can call for that variable between the ().

Below you see a couple of examples. Note I changes the name of the style from partijStyle to vvdStyle. vvd_cstands for vvd_color.

    //var vvd_c = 'rgba(255, 50, 0, ' + (feature.get('VVD_perc')/100) + ')';
    //var vvd_c = 'rgba(255,'+ (1000/4) +', 0, ' + (feature.get('VVD_perc')/100) + ')';
    //var vvd_c = 'rgba(255,'+ (255-(feature.get('VVD_perc')))  +', 0, ' + (feature.get('VVD_perc')/100) + ')';
    var vvd_c  = 'rgba('+ (feature.get('VVD_perc')+150) +','+ (255-(feature.get('VVD_perc')))  +', 0, ' + (feature.get('VVD_perc')/100) + ')';
    vvdStyle.getFill().setColor(vvd_c) 

Answer 1

You can dynamically set some other properties of the style in the same way as you set the text

var vvdLayer = new ol.layer.Vector({
  source: geojsonSource,
  style: function(feature) {
    var perc = feature.get('VVD_perc');
    var color = rgba(100, 100, 100, ' + (perc/100) + ')';
    partijStyle.getFill().setColor(color);
    partijStyle.getText().setText(perc);
    return  partijStyle;
 }
});