如何缓存样式，但仍设置单个文本？

Question

我迷失了以下情况。

我正在Android应用程序中使用OpenLayers 6。我要显示大约4000个geoJson功能。它只是具有4000个要素的一个矢量层。

对于其中的3000个，我必须设置一个单独的文本（所有属性均具有唯一的ID）

[我为每个功能创建样式而不缓存它们时，由于内存使用量增加到2GB以上，我的应用程序崩溃了。当我创建样式并按功能ID缓存它们时，我仍然必须创建3000个样式，并且我的应用程序也会崩溃。

现在，当我按颜色缓存样式时，会得到2种样式。该应用程序运行正常，但现在我无法设置单个文本，因为文本在样式对象中，我只有2个。

如果每个功能都具有单独的样式（不进行缓存或通过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);
        }
    }
}

是否有解决方案来设置没有样式对象的文本？

编辑：

一开始我只设置颜色，没有文本：

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;
            }
        });

这就是我改变风格和添加文字的方式：

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

除了设置每个要素的样式之外，您还可以定义一个返回（动态）样式作为图层样式的函数。

看看this official example

重要的几行是这些：

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;
  }
});

基于相同的想法，您也可以在不创建新样式的情况下为功能动态着色。只需在样式功能内更改“填充”或“描边”的颜色值即可。