multiple style functions

Question

In my code I'm putting on an ol.interaction.Select interaction. I need to set the style and this is easy.

   new ol.interaction.Select({
            filter : function(feature, layer) {
                return me.inFilterSelect(feature, layer);
            },
            wrapX : false,
            style : stylePoligon
        });

I now have the need to set two styles, but one must be a function style (the styles depends on some attributes attached on the feature), and the other could be a function too or a simple new ol.style.style({...}).

How can I set such a thing, multiple styles of different types (one function and one ol.style.style) or multiple functions style? I'm using openlayer 4.0.1.

Answer 1

OpenLayers supports multiple styles. If you want to use more than one style, use an array with your styles or functions returning styles. Did you tried that? Why it is not working?

new ol.interaction.Select({
            filter : function(feature, layer) {
                return me.inFilterSelect(feature, layer);
            },
            wrapX : false,
            style : [stylePolygon, functionReturningStyle]
        });

Please show your attempt with an array to let us know where the problem is.

Answer 2

Your function stylePoligon can return multiple styles. Each style returned has tyle ol.style.Style.

Example using feature's attribute dominio to select the style for the feature:

    function stylePoligon(feature, resolution) {
        var res;
        // console.log(feature);
        var dominio = feature.get('dominio');
        switch (dominio) {
            case 'PLANTA ORDENAMENTO':
                res = new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 206, 161, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffcea1',
                        width: 2
                    })
                });
                break;
            case 'PLANTA CONDICIONANTES':
                res = new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(126, 224, 154, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#7ee09a',
                        width: 2
                    })
                });
                break;
            case 'infraestruturas':
                res = new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(152, 88, 0, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#985800',
                        width: 2
                    })
                });
                break;
            case 'LOTEAMENTO':
                res = new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 171, 185, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffabb9',
                        width: 2
                    })
                });
                break;
            default:
                res = defaultStyle;
                break;
        }
        return [res];
    }

I use defaultStyle as:

    var defaultStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: [0, 0, 128, 0.8],
            width: 2
        })
    });