我正在使用 OL3 处理一个项目,其中我需要能够手动(通过按下按钮)或自动(基于时间)重新加载矢量图层,如果它们自上次使用 HTTP 条件 GET(304 header 等)加载以来已更新.
我发现这篇关于 KML 图层的非常旧的帖子( https://gis.stackexchange.com/questions/333/how-to-dynamically-refresh-reload-a-kml-layer-in-openlayers ),但它似乎使用了 OL3 中不再存在的变量,我不确定它是否只允许加载自上次加载以来已修改的文件。乍一看,似乎是强制完全重新加载,即使文件没有被修改。
API 中似乎没有任何类似于 OL3 中 map 或图层对象的重新加载功能的内容。有没有办法做到这一点?
更新 1:
我找到了一种可能的方法来回答这个问题:https://gis.stackexchange.com/questions/125074/openlayers3-how-to-reload-a-layer-from-geoserver-when-underlying-data-change使用代码:
layer.getSource().updateParams({"time": Date.now()});
但是,当我运行此代码时,出现错误:
TypeError: selectedLayer.getSource(...).updateParams is not a function
检查 OL3 的 API 引用后,似乎不存在此类功能。最接近的是 setProperties() 或 setAttributions()。两者都不起作用。似乎并非所有层类型都实现了 getSource()。
更新 2:
refresh() 重新加载图块,但似乎并未从服务器请求它们。相反,它们似乎是从缓存(而不是 HTTP 缓存)加载的。没有请求,没有 HTTP 304 或类似的东西。将尝试 KML 方法的变体并很快发布结果。
更新 3:
在尝试了很多不同的解决方案后,我偶然发现了一些适用于矢量图层的东西。通过调用层 source.clear() 函数,然后调用 Map.updateSize(),层会自动从其源 URL 重新加载。发出 XHR GET 请求,如果源文件已更改,则会从文件中重新加载。如果源文件没有改变,将发出 304 并从缓存中重新加载源文件。
下面是一个应该使用此方法重新加载给定层的函数:
function refreshLayer(selectedLayer)
{
var selectedLayerSource = selectedLayer.getSource();
if(selectedLayerSource instanceof ol.source.Vector)
{
//do vector reload
selectedLayerSource.clear();
map.updateSize();
}
else
{
//reload the entire page
window.location.reload();
}
}
但是,似乎在最初的几次尝试中(取决于浏览器)发送请求,发回 200 代码,但该层没有反射(reflect)任何更改。经过几次尝试(并重新加载页面几次)后,它就可以工作了。一旦它开始为一个层工作,它就会继续工作,就像更改源文件一样。有谁知道发生了什么?
更新 4:
使用 Jonatas 答案的改编版,我得到了更好的结果。重新加载时会立即弹出新功能。但是,旧要素不会从 map 中删除,并且许多已移动位置的要素会在 map 上显示两次。下面是我的代码:
function refreshSelectedLayer()
{
console.log("This feature is still in the process of being implemented. Refresh may not actually occur.");
var selectedLayerSource = selectedLayer.getSource();
if(selectedLayerSource instanceof ol.source.Vector)
{
var now = Date.now();
var format = selectedLayerSource.getFormat();
var url = selectedLayerSource.getUrl();
url = url + '?t=' + now;
loader = ol.featureloader.xhr(url, format);
selectedLayerSource.clear();
loader.call(selectedLayerSource, [], 1, 'EPSG:3857');
map.updateSize();
}
else if(selectedLayerSource instanceof ol.source.Tile)
{
selectedLayerSource.changed();
selectedLayerSource.refresh();
}
}
请注意,var selectedLayer 是在代码中的其他地方设置的。任何想法为什么会出现这些非常奇怪的结果?
更新 5:
我注意到,如果我删除除以下所有其他代码:
source.clear();
调用 XHR GET 请求并且功能不会消失。为什么清除源不会删除所有功能?
更新 6:
在发现 ol.source.clear() 实际上并没有从给定的数据源/层中删除特征后,我使用以下代码替换了它:
selectedLayerSource.forEachFeature(function(feature){
selectedLayerSource.removeFeature(feature);
});
通过在每一步之前和之后输出图层中的特征,我得到了这个:
var now = Date.now();
var format = selectedLayerSource.getFormat();
var url = selectedLayerSource.getUrl();
url = url + '?t=' + now;
console.log("time: "+now+" format: "+format+" url: "+url);
loader = ol.featureloader.xhr(url, format);
console.log(selectedLayerSource.getFeatures());
console.log("Deleting features...");
/*
Try adding code here to manually remove all features from source
*/
selectedLayerSource.forEachFeature(function(feature){
selectedLayerSource.removeFeature(feature);
});
console.log(selectedLayerSource.getFeatures());
console.log("Loading features from file...");
loader.call(selectedLayerSource, [], 1, 'EPSG:3857');
window.setTimeout(function(){
console.log(selectedLayerSource.getFeatures());
map.updateSize();
}, 500);
输出到控制台:
"time: 1471462410554 format: [object Object] url: http://server/file.ext?t=1471462410554" file.php:484:3
Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 1 more… ] file.php:491:3
Deleting features... file.php:492:3
Array [ ] file.php:501:3
Loading features from file... file.php:503:3
GET XHR http://server/file.ext [HTTP/1.1 200 OK 34ms]
Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 1 more… ]
在对 GeoJSON 和 KML 层进行多次测试后,我确认此方法有效!!!
但是,由于加载程序异步发出请求,因此在调用加载程序函数后,我会遇到如何执行代码的问题。显然,使用 setTimeout() 是一种可怕的方法,并且仅用于测试目的。成功/失败回调函数将是完美的,当查看 featureloader.js 的源代码时,它们似乎作为 ol.featureloader.loadFeaturesXhr 中的参数提供。请参阅以下来自 featureloader.js 的代码块:
/**
* @param {string|ol.FeatureUrlFunction} url Feature URL service.
* @param {ol.format.Feature} format Feature format.
* @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection)|function(this:ol.source.Vector, Array.<ol.Feature>)} success
* Function called with the loaded features and optionally with the data
* projection. Called with the vector tile or source as `this`.
* @param {function(this:ol.VectorTile)|function(this:ol.source.Vector)} failure
* Function called when loading failed. Called with the vector tile or
* source as `this`.
* @return {ol.FeatureLoader} The feature loader.
*/
ol.featureloader.loadFeaturesXhr = function(url, format, success, failure)
在创建加载器时,我尝试像这样实现这些功能:
loader = ol.featureloader.xhr(url, format,
function(){
console.log(selectedLayerSource.getFeatures());
map.updateSize();
console.log("Successful load!");
},
function(){
console.log("Could not load "+selectedLayerName+" layer data from "+url);
}
);
但是这两个函数都没有被调用。有什么建议?我觉得我在这里错过了一些非常简单的东西......
更新 7:
使用@Jonatas Walker 提供的解决方案,我将其调整为使用 jQuery:
var now = Date.now();
var format = selectedLayerSource.getFormat();
var url = selectedLayerSource.getUrl();
url = url + '?t=' + now;
//make AJAX request to source url
$.ajax({url: url, success: function(result){
//manually remove features from the source
selectedLayerSource.forEachFeature(function(feature){
selectedLayerSource.removeFeature(feature);
});
//create features from AJAX results
var features = format.readFeatures(result, {
featureProjection: 'EPSG:3857'
});
//add features to the source
selectedLayerSource.addFeatures(features);
},
error: function(err){
alert("Could not load features from "+selectedLayerName+" at "+url+" error code: "+err.status);
}
});
在使用 GeoJSON 和 KML 源进行大量测试后,事实证明这是一种非常可靠的刷新方法!
最佳答案
尝试对此进行改编:
function refreshSource() {
var now = Date.now();
var source = vectorLayer.getSource();
var format = new ol.format.GeoJSON();
var url = '//your_server.net/tmp/points.json?t=' + now;
var loader = ol.featureloader.xhr(url, format);
source.clear();
loader.call(source, [], 1, 'EPSG:3857');
}
诀窍是通过更改 url 告诉浏览器这是一个新的加载。
关于javascript - OpenLayers 3 重新加载层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38708524/