OpenLayers setting opacity without disappearing the edge that marks it

Question

I'm trying to set the transparency of the polygons on the map. This works and I can save them in the database with this code:

$('#constructii_trasp').on('change', function(){
                            var constructii_transp = $('#constructii_trasp').val();
                            var valoare_transp = constructii_transp / 100
                            console.log(valoare_transp);
                            
                            
                            
                            $.post( "ser_edit_pdf.php", 
                                 {
                                      save_setari_transparenta_constructii: 1,
                                      transp_constructii: valoare_transp
                                 },
                                 function( data ) {
                                    console.log('save setup');
                                    console.log(data);
                                    var color = JSON.parse(data);
                        
                                      constructii.setOpacity(color.opacity_constructii); 
                                    
                                    })
                              
                            
                        });

The style in function :

features.forEach(function(feature){
                                                    feature.setId(undefined);
                                                    feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
                                                    
                                                    
                                                var const_stile = new ol.style.Style({
                                                    fill: new ol.style.Fill({color: color.color_constructii}),
                                                    stroke: new ol.style.Stroke({
                                                      color: [0,51,204], width: 1
                                                    }),
                                                  text: new ol.style.Text({
                                                    font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
                                                    placement: 'center',
                                                    fill: new ol.style.Fill({
                                                      color: 'white'
                                                    })
                                                  })
                                                });
                                                
                                                
                                            
                                               
                                                var id_pdf = "";
                                                
                                              
                                                
                                                 var data = "N:"+feature.get('numar_const')+"/F:"+feature.get('folosinta')+"/S:"+feature.get('suprafata')+" MP.";
                                                
                                                if(feature.get('layer') == "CONSTRUCTIE"){
                                                    const_stile.getText().setText(data);
                                                    feature.setStyle(const_stile);
                                                }
                                                
                                               
                                             
                                                 
                                                });
                                                
                                                if (found_extent == 0) {
                                                    features.forEach(function(feature){
                                                        
                                                        ol.extent.extend(extent, feature.getGeometry().getExtent());
                                                    });
                                                }
                                                
                                                vectorSource.constructii.clear();
                                                vectorSource.constructii.addFeatures(features);
                                                

But when I set a value for the opacity of the polygons, the polygon delimitation line disappears ...

I would like the delimitation line not to be opaque and to remain drawn, but only the interior of the polygon to decrease in transparency.

Answer 1

You should set the opacity as the alpha component of the fill color instead of setting the opacity of the whole layer

 var colorArray = ol.color.asArray(color.color_constructii).slice(0, 3).concat([color.opacity_constructii]);
 var const_stile = new ol.style.Style({
     fill: new ol.style.Fill({color: colorArray}),
     ...