How to fix layer styling in OpenLayers 5?

Question

I'm trying to draw a new layer every time user clicks on the map. My styling function can be seen below;

function CatchmentLayerStyleFunction(feature) {
    var colors = ['rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)',
        'rgba(0,0,255,0.5)', 'rgba(36, 201, 149,0.5)',
        'rgba(207, 242, 9,0.5)', 'rgba(241, 137, 9,0.5)',
        'rgba(8, 240, 240,0.5)', 'rgba(237, 118, 231,0.5)',
        'rgba(237, 26, 82, 0.5)', 'rgba(237, 26, 222)'];
    var color = new Style({
        stroke: new Stroke({
            color: colors[Math.floor(Math.random() * colors.length)],
            lineDash: [4],
            width: 3
        }),
        fill: new Fill({
            color: colors[Math.floor(Math.random() * colors.length)]
        })
    });

    return color
};

As you can see I'm randomly coloring the polygons. My function that adds the layers to map is like ;

var vectorSource = new VectorSource({
                renderMode: 'image',
                features: (new GeoJSON()).readFeatures(data[0], {
                    dataProjection: 'EPSG:4326',
                    featureProjection: 'EPSG:3857'
                })
            });
            map.addLayer(new VectorLayer({
                'title': 'Catchment',
                source: vectorSource,
                style: CatchmentLayerStyleFunction
            }));
            map.getView().fit(vectorSource.getExtent());
        });

But as you can see in the gif, everytime I pan or zoom on the map styles of these newly added polygons are changing. How can one fix styles for the layers ?

Answer 1

You would need to assign a color to the feature and, once set, continue to use that, for example:

function CatchmentLayerStyleFunction(feature) {
    var colors = ['rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)',
        'rgba(0,0,255,0.5)', 'rgba(36, 201, 149,0.5)',
        'rgba(207, 242, 9,0.5)', 'rgba(241, 137, 9,0.5)',
        'rgba(8, 240, 240,0.5)', 'rgba(237, 118, 231,0.5)',
        'rgba(237, 26, 82, 0.5)', 'rgba(237, 26, 222)'];
    var color = feature.get('color');
    if (!color) {
        color = new Style({
            stroke: new Stroke({
                color: colors[Math.floor(Math.random() * colors.length)],
                lineDash: [4],
                width: 3
            }),
            fill: new Fill({
                color: colors[Math.floor(Math.random() * colors.length)]
            })
        });
        feature.set('color', color);
    }
    return color;
};