[GIS] How to get the fill value of a style when using a styleFunction

openlayers

I have a cluster layer which I styled with a style function. I want to be able to have a color picker in my frame for each vector layer so that I could change the fill value of the style independently for each layer.

When I tried to set the initial value for the color picker to the actual fill color of the layer I noticed that if I use layer.getStyle() I don't get a Style object, but a function!

How could I retrieve the fill value from that? Moreover, how could I adjust that value with a color picker?

Edit:
as dvmac01 suggested I am using the forEachFeature function to change the style.

function changeColor() {
    layer.getSource().forEachFeature(function(feature) {
        // this happens when the source is a cluster
        if(feature.get('features')) {
            var resolution = map.getView().getResolution();
            var style = clusterStyle(feature, resolution, this.value);
            feature.setStyle(style);
        } else {
            var style = new ol.style.Style({
                fill: new ol.style.Fill ({color: this.value})
            });
            feature.setStyle(style);
        }
    }, this);
}
colorPicker.addEventListener('input',changeColor);

I try to check whether the current layer is a cluster layer or a regular (polygon) layer. If I change the color of a polygon layer everything works fine. However, for my cluster layer, everything appears to be working fine when I check the styles on the developer console, but for some reason the points are not redrawn with the correct color.

If I type this in the console map.getLayers().item(2).getSource().getFeatures()[0].getStyle().getImage().getFill(); I can see that the value is the one that I selected with the color picker, yet the circles keep the original color.

Best Answer

Without seeing your code it's difficult to answer why layer.getStyle might return a function but the following code works for me. I have several inputs(either pickers or number steppers) and the result of my event listening on these triggers this function:

    var drawLayer, style, fillColPickerValue, strokeColPickerValue, strokeWidthValue; // Global variable declared upfront

    function setFillStroke(strokeColPickerValue, strokeWidthValue, fillColPickerValue) {
        drawLayer = session.activeRoute.Layers[0]; // identify the relevant layer

        drawLayer.getSource().forEachFeature(function (feature) {
            fillColPickerValue = $('body, html').find("#fillColPicker").data("kendoColorPicker").value();
            strokeColPickerValue = $('body, html').find("#strokeColPicker").data("kendoColorPicker").value();
            strokeWidthValue = $('body, html').find("#strokeWidth").data("kendoNumericTextBox").value();
            console.log(strokeWidthValue);

            style = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: fillColPickerValue,
                    opacity: 1.0
                }),
                stroke: new ol.style.Stroke({
                    color: strokeColPickerValue,
                    width: strokeWidthValue
                })
            });
            feature.setStyle(style);
        });
    }
Related Question