How to cache Styles but still set individual text? - gis

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.