次の状況で迷っています。
Android アプリケーションで OpenLayers 6 を使用しています。表示する geoJson 機能が約 4000 あります。これは、4000 個のフィーチャを含む 1 つのベクター レイヤーです。
それらの 3000 については、個別のテキストを設定する必要があります (それらはすべて、プロパティで一意の ID を持っています)。
キャッシュせずに各機能のスタイルを作成すると、メモリ使用量が 2GB を超えてアプリがクラッシュします。スタイルを作成して機能 ID でキャッシュすると、3000 個のスタイルを作成する必要があり、アプリもクラッシュします。
ここで、Styles by Color をキャッシュすると、2 つの Styles が取得されます。アプリは正常に動作していますが、テキストがスタイル オブジェクトにあり、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;
});
}
}