How to cache Styles but still set individual text?

Question

I'm lost with the following Situation.

I'm using OpenLayers 6 in an Android Application. I have around 4000 geoJson Features to display. It's just one vector layer with 4000 Features.

For 3000 of them, I have to set an individual text (all of them have a unique ID in a property)

When I create a Style for each feature without caching them, then my App crashes because memory usage increases to over 2GB. When I create Style and cache them by feature ID, I still have to create 3000 Styles and my app does crash also.

Now, when I cache my Styles by Color, I get 2 Styles. The app is running fine but now I can't set individual Text, because the Text is in the Style Object and I have only 2 of them.

This would be my solution if every feature gets an individual style (without caching or caching by ID).

map.once('postrender', function(event) {
    addStyle();
});


function addStyle() {
    var vectorLayer;
    var layersObject = map.getLayers();
    for (var i = 0; i < layersObject.array_.length; i++) {
        vectorLayer = layersObject.array_[i];
        break;
    }

    var arrFeatures = vectorLayer.getSource().getFeatures();
    var i = 0;
    for (i; i <= arrFeatures.length - 1; i++) {
        var feat = arrFeatures[i];
        var myId = feat.get('my_id');
        if(myId > 0){
            feat.setStyle(myStyle);
        }
    }
}

function addDescription() {

    var vectorLayer;
    var layersObject = map.getLayers();
    for (var i = 0; i < layersObject.array_.length; i++) {
        vectorLayer = layersObject.array_[i];
        break;
    }

    var arrFeatures = vectorLayer.getSource().getFeatures();
    for (var i = 1; i <= arrFeatures.length - 1; i++) {
        var feat = arrFeatures[i];
        var myId = feat.get('my_id');
        if(myId > 0){
            var description = feat.get('description')
            feat.getStyle()(feat, map.getView().getResolution()).getText().setText(description);
        }
    }
}

Is there a solution to set text without style object?

EDIT:

At the start I set only colors, without text:

var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            renderMode: 'image',
            style: function(feature) {
                style.getFill().setColor(getColorByID(feature.get('id'), feature.get('pe_nr')));
                return style;
            }
        });

And this is how I change my style and add text:

function switchStyle() {

    var vectorLayer;
    var layersObject = map.getLayers();
    for (var i = 0; i < layersObject.array_.length; i++) {
        vectorLayer = layersObject.array_[i];
        break;
    }

    if(isFoo){
        isFoo = false;
        vectorLayer.setStyle(function(feature) {
        style.getText().setText(feature.get(currentLabel));
        style.getFill().setColor(getColorByID(feature.get('id'), feature.get('pe_nr')));
        return style;
        });
    } else {
        isFoo = true;
        vectorLayer.setStyle(function(feature) {
        style.getText().setText(feature.get(currentLabel));
        style.getFill().setColor(getColor(feature.get('pe_nr')));
        return style;
        });
    }
}

Answer 1

Instead of setting the style of each feature, you can also define a function that returns a (dynamic) style as the style of a layer.

Have a look at this official example

The important lines are these:

var style = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.6)'
  }),
  stroke: new Stroke({
    color: '#319FD3',
    width: 1
  }),
  text: new Text({
    font: '12px Calibri,sans-serif',
    fill: new Fill({
      color: '#000'
    }),
    stroke: new Stroke({
      color: '#fff',
      width: 3
    })
  })
});

var vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'data/geojson/countries.geojson',
    format: new GeoJSON()
  }),
  style: function(feature) {
    style.getText().setText(feature.get('name'));
    return style;
  }
});

With the same idea you can also dynamically color your features, without creating new styles. Simply change your color-value of your Fill or Stroke inside the style-function.