gpt4 book ai didi

javascript - openlayers 3 vector.getSource().clear() 上烦人的闪光

转载 作者:行者123 更新时间:2023-12-03 02:49:21 25 4
gpt4 key购买 nike

限制显示的矢量特征数量在 OpenLayers 中很重要,但这可能会导致某些特征无法显示。移动或放大时,需要通过 XHR 调用“刷新”功能。在 OpenLayers 2 中,这可以通过调用

来实现
bboxstrategy.update({ force: true })

map 的“zoomend”事件。

在带有 SVG 渲染器的 OL2 中,重绘非常平滑,几乎不明显。

在 OL3 中,似乎有必要调用:

    vector.getSource().clear();

map 的“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来实现此目的,该加载器将范围标记为未加载。为了避免多次添加功能,您可以在添加之前在加载器中使用清除。

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>

关于javascript - openlayers 3 vector.getSource().clear() 上烦人的闪光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47960731/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com