Opacity is not applied for Fill for KML layer in openlayers 5

Question

I am currently upgrading our openlayers from 2.x to 5.3. We have some KML files on the server which should be displayed as individual layers on the map. This is working perfectly fine after the upgrade except that the fill of the polygons of the KML do not apply the opacity provided in the color alpha [r,g,b,alpha].

I know this issue has been discussed frequently but the suggested solution always included to add the opacity in the alpha of the color, which is not working for me. I tried to use both, a color array and defining the color via rgba text. But the opacity of the KML content fill is always one.

However, the opacity is working when I add the opacity field to the layer object. But I only need the fill to have an opacity and not the stroke. As this might be of interest, I have integrated Google layers in my project by applying the OL3GM project. Thus, the ol.js file is integrated by this ol3gm project.

//pConfig contains all the relevant information
var lKmlLayers = [];
for(var i = 1; i < pConfig['kmlFiles'].length;++i) {
    var lLayerName = getBaseName(pConfig['kmlFiles'][i][1]);
    var lDropBoxPathParamValue = '?dropBoxPath=' + pConfig['kmlFiles'][i][0];
    var lContextParamValue = '&context=' + pConfig['context'];
    var lProjectIdParamValue = '&projectId=' + pConfig['projectId'];
    var lKmlFileNameParamValue = '&kmlFileName=' + pConfig['kmlFiles'][i][1];
    //here I define the fill color and set the opacity value
    var fillColor = ol.color.asArray(pConfig['kmlFiles'][i][2]);
    fillColor = fillColor.slice();
    fillColor[3] = 0.3;
    var strokeColor = ol.color.asArray(pConfig['kmlFiles'][i][2]);
    strokeColor = strokeColor.slice();
    strokeColor[3] =1;
    lKmlLayers[i-1] = new ol.layer.Vector({
        title:lLayerName,
        source: new ol.source.Vector({
        url: pConfig['context'] + '/filedata' + lDropBoxPathParamValue + lContextParamValue + lProjectIdParamValue + lKmlFileNameParamValue,
        format: new ol.format.KML()
        }),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                    color: fillColor
            }),
            stroke: new ol.style.Stroke({
                    color: strokeColor,
                    width: 1
            })
        }),
        //opacity: 0.3//if I add this, the opacity is applied for the complete layer
    });
}

The opacity of the fill is not applied. The KML layers fill is always displayed with an opacity of 1 although I set it to 0.3. Can somebody tell me why and tell me how to fix this? Thank you for your support.

Answer 1

In this case specifying

format: new ol.format.KML({ extractStyles: false })

was sufficient to prevent styles being applied directly to the features and allow the layer style to take effect. In some cases that might not work as OpenLayers can apply a default style and you would need to loop through the features and remove the styles. See Heatmap in Openlayers using an XML (KML formatted) string, styling is incorrect