TransWikia.com

OpenLayers setting opacity without disappearing the edge that marks it

Geographic Information Systems Asked on May 3, 2021

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.

One Answer

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}),
     ...

Answered by Mike on May 3, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP