限制显示的矢量要素数量在OpenLayers中很重要，但这可能会导致某些功能无法显示。移动或放大时，必须使用XHR调用“刷新”功能。在OpenLayers 2中，这可以通过调用来实现
bboxstrategy.update({ force: true })
在地图上的'zoomend'活动。
在带有SVG渲染器的OL2中，重绘非常流畅，几乎不可察觉。
在OL3中，似乎需要调用：
vector.getSource().clear();
在地图上的'moveend'事件中。
当OL3呈现新功能时，这会导致恼人的闪光。
有没有人知道更好的技术来重新加载功能，但避免闪存？
这是一个工作华丽的例子，改编自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>
您可以通过在自定义加载程序中使用removeLoadedExtent来实现此目的，该加载程序将范围标记为未加载。并且为了避免多次添加功能，您可以在添加之前使用加载中的clear。
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>