vector.getSource().clear() 上的 openlayers 5 烦人的闪光灯

Question

当我在 Openlayers 中加载超过 500 个矢量特征时，平板电脑和手机上的性能会严重下降。我的解决方案是清除 map 的 moveend 事件的来源。这可行，但会导致恼人的闪光，大概是在清除和重新加载源之间。

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

这是我当前的代码:

import {GeoJSON} from 'ol/format';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import VectorSource from 'ol/source/Vector.js';
import VectorLayer from 'ol/layer/Vector';

var vectorSource = new VectorSource({
 format: new GeoJSON({ dataProjection: layerProjection }),
 loader: function(extent, resolution, projection) {
   var proj = projection.getCode();
   var url = 'https://xxx.xxx/geoserver/wfs?service=WFS' +
     '&version=1.1.0&request=GetFeature&typename=' + layer + 
     '&maxFeatures=200&outputFormat=application/json&srsname=' + proj +
     '&bbox=' + extent.join(',') + ',' + proj;
   var xhr = new XMLHttpRequest();
   xhr.open('GET', url);
   var onError = function() {
     vectorSource.removeLoadedExtent(extent);
   }
   xhr.onerror = onError;
   xhr.onload = function() {
     if (xhr.status == 200) {
       //vectorSource.clear();// Causes recursion          
       vectorSource.addFeatures(
         vectorSource.getFormat().readFeatures(xhr.responseText));
     } else {
       onError();
     }
   }
   xhr.send();
 },
 strategy: bboxStrategy
});

var vector = new VectorLayer({
  source: vectorSource,
  style: style,
  visible: visible
});
map.on('moveend', function(evt) {
  console.log('refreshing vector');
  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
      })
    }),
  });
}

Answer 1

不要在每个 moveend 上清除源，但仅当它超过多个特征 max 时才清除源，这将防止过于频繁的重新加载:

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

Openlayers 应该能够显示 500 多个功能，即使在慢速设备上也是如此。

• 正如 ahocevar 所说，可能涉及样式，让我们看看您如何使用它。
• 您也可以尝试对矢量图层使用 renderMode: 'image' 选项，以便在交互和动画期间更快地渲染。
• 您可以大规模使用聚类来减少要绘制的特征数量。

例如，该站点甚至在移动设备上也显示超过 18.000 个点特征:https://c-conforme.fr