openlayers 3在vector.getSource（）。clear（）上令人讨厌的闪光

Question

Limiting the amount of vector features displayed is important in OpenLayers, but this can lead to some features not being displayed. 限制显示的矢量要素的数量在OpenLayers中很重要，但是这可能导致某些要素无法显示。 When moving or zooming in, it's necessary to "refresh" the features with an XHR call. 移动或放大时，有必要通过XHR调用“刷新”功能。 In OpenLayers 2, this could be achieved by calling 在OpenLayers 2中，可以通过调用

bboxstrategy.update({ force: true })

on a map's 'zoomend' event. 在地图的“缩放”事件上。

In OL2 with the SVG renderer, the repaint was very smooth, hardly noticeable. 在带有SVG渲染器的OL2中，重新绘制非常平滑，几乎看不到。

In OL3, it appears necessary to call: 在OL3中，似乎有必要调用：

    vector.getSource().clear();

on a map's 'moveend' event. 在地图的“移动”事件上。

This results in an annoying flash when OL3 renders the new features. 当OL3渲染新功能时，这会导致令人讨厌的闪光。

Does anyone know of a better technique to reload features but avoid the flash? 有谁知道一种更好的技术来重新加载功能，但避免使用闪光灯？

Here is a working flashy example, adapted from here 这是一个工作的浮华示例，从此处改编而成

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>WFS</title>
      <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
      <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
      <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      function onMoveEnd( evt ) {
        vector.getSource().clear();
      }

      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
        return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
          'maxFeatures=500&outputFormat=application/json&srsname=EPSG:3857&' +
          'bbox=' + extent.join(',') + ',EPSG:3857';
        },
        strategy: ol.loadingstrategy.bbox
      });

      var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
          })
        })
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM({
        })
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [-8908887.277395891, 5381918.072437216],
          maxZoom: 19,
          zoom: 12
        })
      });
      map.on('moveend', onMoveEnd);
   </script>
  </body>
</html>

Answer 1

you could achieve this by using the removeLoadedExtent in a custom loader, which marks the extent as not loaded. 您可以通过在自定义加载程序中使用removeLoadedExtent（将扩展范围标记为未加载）来实现此目的。 And to avoid adding features multiple times, you can use the clear in the loader just before adding. 为了避免多次添加功能，可以在添加之前在加载程序中使用clear。

http://openlayers.org/en/latest/apidoc/ol.source.Vector.html#removeLoadedExtent http://openlayers.org/en/latest/apidoc/ol.source.Vector.html#removeLoadedExtent

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>WFS</title>
      <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
      <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
      <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
          var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
          'maxFeatures=500&outputFormat=application/json&srsname=EPSG:3857&' +
          'bbox=' + extent.join(',') + ',EPSG:3857';
          var xhr = new XMLHttpRequest();
          xhr.open('GET', url);
          var removeExtent = function() {
            vectorSource.removeLoadedExtent(extent);
          }
          xhr.onerror = removeExtent;
          xhr.onload = function() {
            if (xhr.status == 200) {
              vector.getSource().clear();
              vectorSource.addFeatures(
                vectorSource.getFormat().readFeatures(xhr.responseText));
            }
            removeExtent();
          }
          xhr.send();
        },
        strategy: ol.loadingstrategy.bbox
      });

      var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
          })
        })
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM({
        })
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [-8908887.277395891, 5381918.072437216],
          maxZoom: 19,
          zoom: 12
        })
      });
   </script>
  </body>
</html>

openlayers 3在vector.getSource（）。clear（）上令人讨厌的闪光

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-12-28 13:20:21

openlayers 3在vector.getSource（）。clear（）上令人讨厌的闪光

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-12-28 13:20:21

解决方案1
1 已采纳 2017-12-28 13:20:21