openlayers 5 vector.getSource（）.clear（）上的恼人flash

当我在Openlayers中加载超过500个矢量功能时，平板电脑和电话的性能会严重降低。我的解决方案是在地图的

moveend

事件中清除源代码。这是可行的，但会导致恼人的闪光，大概是在源的清除和重新加载之间

这种“闪烁”的早期解决方案不再有效，它导致对WFS的递归调用

这是我目前的代码：

从'ol/format'导入{GeoJSON}；
从“ol/loadingstrategy.js”导入{bboxasbboxstrategy}；
从“ol/source/Vector.js”导入VectorSource；
从“ol/layer/Vector”导入VectorLayer；
var vectorSource=新矢量源({
格式：new GeoJSON（{dataProjection:layerProjection}），
加载器：函数（范围、分辨率、投影）{
var proj=projection.getCode（）；
var url='1〕https://xxx.xxx/geoserver/wfs?service=WFS' +
“&version=1.1.0&request=GetFeature&typename=”+layer+
“&maxFeatures=200&outputFormat=application/json&srsname=”+proj+
“&bbox=”+扩展。连接（“，”）+“，”+proj；
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，url）；
var onError=函数（）{
vectorSource.Removeloadextent（范围）；
}
xhr.onerror=onerror；
xhr.onload=函数（）{
如果（xhr.status==200）{
//vectorSource.clear（）；//导致递归
vectorSource.addFeatures(
vectorSource.getFormat（）.readFeatures（xhr.responseText））；
}否则{
onError（）；
}
}
xhr.send（）；
},
策略：bboxStrategy
});
var vector=新矢量层({
来源：矢量源，
风格：风格，
可见的：可见的
});
map.on（'moveend'，函数（evt）{
log（“刷新向量”）；
vectorSource.clear（）
});

有没有办法避免Openlayers 5中的清除/重新加载闪存？或者，我是否应该使用另一种方法来加载向量层（我拥有的层通常是具有5000到10000个特征的点层）

[编辑]在@ahocevar发表评论后，我使用的风格如下：

import {Style, Circle, Fill, Stroke} from 'ol/style';
import Defaults from './PointDefaults';

export default function() {
  return new Style({
    image: new Circle({
      radius: Defaults.radius,
      fill: new Fill({
        color: 'green',
      }),
      stroke: new Stroke({
        color: Defaults.strokeColor,
        width: Defaults.strokeWidth
      })
    }),
  });
}

---

不要在每个moveend上清除源，但只有当它超过多个功能时才会清除，这将防止过于频繁的重新加载：

map.on('moveend', function(evt) {
  if (vectorSource.getFeatures().length > max) {
    vectorSource.clear()
  }
});

Openlayers应该能够显示500多种功能，即使在速度较慢的设备上也是如此

• 正如ahocevar所说，可能涉及到这种风格，让我们看看你是如何使用它的
• 您还可以尝试对向量层使用

  renderMode:“image”

  选项，以便在交互和动画期间更快地渲染
• 您可以使用大规模聚类来减少要绘制的特征数量

---

例如，此站点甚至在移动设备上显示超过18000个点要素：

问题在于，您正在为每个渲染帧的每个要素创建一个新的

样式

，其中包含一个新的

圆圈

图像。在您的情况下，甚至不需要样式函数，因为所有特征的样式都是相同的。因此，

style

模块应该导出样式，而不是返回样式的函数：

import {Style, Circle, Fill, Stroke} from 'ol/style';
import Defaults from './PointDefaults';

export default new Style({
  image: new Circle({
    radius: Defaults.radius,
    fill: new Fill({
      color: 'green',
    }),
    stroke: new Stroke({
      color: Defaults.strokeColor,
      width: Defaults.strokeWidth
    })
  })
});

---

2年后，我找到了一个解决方案，它不是非常“浮华”，而是有点（我想我对这个问题的措辞肯定太模糊了）

我正在使用

vectorSource.refresh（）

鉴于此：

map.on('moveend', function(evt) {
 console.log('refreshing vector');
 vectorSource.refresh()
});

---

我现在使用的OpenLayers版本是v6.5.0

问题可能是您的

风格

。重用样式对象是良好矢量性能的关键。如果有疑问，请编辑您的问题，使其包含样式。我很怀疑：）我添加了样式；它在图层创建时导入一次，就像我想的。您正在使用每个特征创建一个新的圆形图像。默认样式的缓存大小是32个图像，因此如果具有32个以上的功能，则速度会非常非常慢。我添加了一个答案，说明你应该如何写你的风格；我接受了ahocevar的答案，但这也很有帮助。我接受这个答案有点仓促。在加载了大约1000项功能后，移动设备的速度仍然很慢。似乎我需要找到一种方法来抑制设备内存中的特征数量，也避免了调用Vector Surviv.Car（）的闪存，你应该考虑使用矢量瓦片代替WFS。那么你根本不需要清除特征。