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

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

除了设置每个要素的样式外，还可以定义一个函数，该函数将(动态(样式返回为图层的样式。

看看这个官方例子

重要的行是这些：

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

使用相同的想法，您还可以动态地为要素着色，而无需创建新样式。只需在样式函数中更改填充或描边的颜色值即可。