openlayers 3在vector.getSource().clear()上令人讨厌的闪光 [英] openlayers 3 annoying flash on vector.getSource().clear()
问题描述
限制显示的矢量要素的数量在OpenLayers中很重要，但这可能导致某些要素无法显示.移动或放大时，必须通过XHR调用刷新"功能.在OpenLayers 2中，可以通过调用
Limiting the amount of vector features displayed is important in OpenLayers, but this can lead to some features not being displayed. When moving or zooming in, it's necessary to "refresh" the features with an XHR call. In OpenLayers 2, this could be achieved by calling
bboxstrategy.update({ force: true })
在地图的缩放"事件上.
on a map's 'zoomend' event.
在带有SVG渲染器的OL2中，重新绘制非常平滑，几乎没有引起注意.
In OL2 with the SVG renderer, the repaint was very smooth, hardly noticeable.
在OL3中，似乎有必要调用:
In OL3, it appears necessary to call:
vector.getSource().clear();
在地图的"moveend"事件上.
on a map's 'moveend' event.
当OL3渲染新功能时，这会导致令人讨厌的闪光.
This results in an annoying flash when OL3 renders the new features.
有人知道更好的技术来重新加载功能但要避免使用闪存吗?
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>
推荐答案
您可以通过在自定义加载程序中使用removeLoadedExtent来实现此目的，该操作将范围标记为未加载.为了避免多次添加功能，可以在添加之前在加载器中使用clear.
you could achieve this by using the removeLoadedExtent in a custom loader, which marks the extent as not loaded. And to avoid adding features multiple times, you can use the clear in the loader just before adding.
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()上令人讨厌的闪光的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
