openlayers 3迷惑なflash on vector.getSource（）。clear（）

OpenLayersで表示されるベクター機能の量を制限することは重要ですが、表示されない機能もあります。移動またはズームインするときは、XHR呼び出しでフィーチャーを「リフレッシュ」する必要があります。 OpenLayers 2では、マップの「zoomend」イベントでopenlayers 3迷惑なflash on vector.getSource（）。clear（）

bboxstrategy.update({ force: true })

と呼び出すことでこれを実現できます。

SVGレンダラを使用したOL2では、再塗りつぶしが非常に滑らかでほとんど目立たなかった。 OL3で

、呼び出す必要が表示されます。

vector.getSource().clear();

マップの 'moveend' イベントに。

これは、OL3が新しい機能をレンダリングするときに厄介な点滅を引き起こします。

誰かが機能をリロードするが、フラッシュを避けるためのより良いテクニックを知っていますか？ここで

はあなたがロードされていないとして範囲をマークしたカスタムローダー、中removeLoadedExtentを使用することによって、これを達成できる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>

出典

2017-12-24 minisaurus

から適応、作業派手な例です。また、フィーチャーを複数回追加するのを避けるため、追加する直前にローダーでクリアを使用できます。

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>

出典

2017-12-28 13:20:21

はい！ありがとう@サイモンSeyock、私はこれを使用します。） – minisaurus

openlayers 3迷惑なflash on vector.getSource（）。clear（）

答えて

関連する問題