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

下面的情况让我不知所措

我在Android应用程序中使用OpenLayers 6。我有大约4000个geoJson特性要显示。 这只是一个矢量层，有4000个特征

对于其中的3000个，我必须设置一个单独的文本（它们在属性中都有唯一的ID）

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

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

如果每个特性都有一个单独的样式（没有缓存或按ID缓存），那么这就是我的解决方案

这就是我如何更改样式和添加文本：

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

函数开关样式（）{
向量层；
var layersObject=map.getLayers（）；
对于（var i=0；i

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

看看

重要的是：

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

---

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

您还可以定义一个函数，将（动态）样式返回为图层样式，而不是设置每个要素的样式

看看

重要的是：

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

---

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

谢谢。我注意到，当我将文本字体设置为24px时，我的应用程序崩溃，18px也可以。你能解释一下为什么吗？可能是因为ol中的文本是图像，占用了大量内存？您试图同时显示多少功能？性能不应该是一个真正的问题，除非您试图用文本同时呈现所有4000个功能（但是您无论如何都无法读取任何内容）。如果是这种情况，您可以尝试在图层上设置

minZoom

，在图层上使用

declutter

，或使用群集源。但是如果18px可以工作，我不认为这就是问题所在。我的所有功能在开始时都是可见的，但功能中的文本却不可见。我故意将字体大小设置得尽可能高，所以openlayers会自动使用declutter。期望的结果是什么？您还可以使用文本样式的

填充

选项，这样openlayers可以更方便地进行分离“分离”唯一的意思是，当功能（或其文本）以其他方式重叠时，功能将不可见。我只是编辑我的帖子，它现在看起来如何以及我是如何做的。文本分离器已经工作了。如果要素重叠，则不应使其不可见。我最大的问题是性能，当我完全缩小并快速移动地图时，我的应用程序有时会崩溃。我已经尝试过的：矢量层的renderMode:'image'，地图构造器中的renderMode:（['webgl'，'canvas']）和pixelRatio:Math.floor（window.devicePixelRatio | 1）谢谢。我注意到，当我将文本字体设置为24px时，我的应用程序崩溃，18px也可以。你能解释一下为什么吗？可能是因为ol中的文本是图像，占用了大量内存？您试图同时显示多少功能？性能不应该是一个真正的问题，除非您试图用文本同时呈现所有4000个功能（但是您无论如何都无法读取任何内容）。如果是这种情况，您可以尝试在图层上设置

minZoom

，在图层上使用

declutter

，或使用群集源。但是如果18px可以工作，我不认为这就是问题所在。我的所有功能在开始时都是可见的，但功能中的文本却不可见。我故意将字体大小设置得尽可能高，所以openlayers会自动使用declutter。期望的结果是什么？您还可以使用文本样式的

填充

选项，这样openlayers可以更方便地进行分离“分离”唯一的意思是，当功能（或其文本）以其他方式重叠时，功能将不可见。我只是编辑我的帖子，它现在看起来如何以及我是如何做的。文本分离器已经工作了。如果要素重叠，则不应使其不可见。我最大的问题是性能，当我完全缩小并快速移动地图时，我的应用程序有时会崩溃。我已经尝试过的：矢量层的renderMode:'image'，渲染器：（['webgl'，'canvas']）在贴图构造函数中，像素比率：Math.floor（window.devicePixelRatio | | 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;
  }
});