0

我迷失了以下情况。

我在 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;
        });
    }
}
4

1 回答 1

3

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

看看这个官方例子

重要的几行是：

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

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

于 2019-11-25T14:24:52.153 回答