等价于OpenLayers 3中的layer.redraw(true)?


13

我的OL3应用程序中有一个geojson图层,我想每5秒重绘一次(以在地图上显示运动)。

我该怎么做 ?找不到等效的Layer.redraw()。


您是否看过ol.animation?通常,矢量绘图更流畅,并且在ol3中处理方式有所不同,但是从您的问题中并不清楚您要做什么。
约翰·鲍威尔

@JohnBarça-我的GeoJson数据来自postgres,它将每5秒钟更新一次新的GPS数据。我想重新绘制图层,以便每次显示地图上单位的当前位置(它一直在变化……)
Alophind 2014年

因此,您要使用递归setTimeout调用(或类似方法)每5秒请求数据,而您只想知道如何强制矢量特​​征刷新?
约翰·鲍威尔

@JohnBarça-如果有更好的方法我愿意学习,但这是我的工作,我想在地图上实时显示GPS的位置。GPS将其位置发送到PostGIS,然后从那里使用GeoJSON(或我可以使用GeoServer)读取数据,但我希望该图层每隔一段时间进行一次更新。
Alophind 2014年

当然,我知道您要做什么。任何代码示例的机会,因为根据我的经验,如果您将动画循环放入settimeout中,并使用ajax调用远程服务器,然后使用Format.GeoJSON或类似方法加载返回的json,则功能将得到更新。
约翰·鲍威尔

Answers:


9

通过这种方法,您可以每隔5秒从返回GeoJSON文档中功能的Web服务刷新向量源:

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

window.setTimeout(function() {
  $.ajax('http://example.com/data.json', function(data) {
    var features = geojsonFormat.readFeatures(data
        {featureProjection:"EPSG:3857"});
    geojsonSource.clear();
    geojsonSource.addFeatures(features);
  });
}, 5000);

此处使用jQuery通过Ajax($.ajax)请求数据,但是显然您可以使用您选择的库。

此代码段还假定地图的投影为“ EPSG:3857”(网络墨卡托),并且GeoJSON文档中的坐标为经度和纬度。


3
此代码混淆了我,应该vectorSourcegeojsonSource合并?
凯利·托马斯

我想你的意思是window.setInterval不是setTimeout; 否则只会执行一次。
乔纳森

9

我知道这个问题很旧,但是我终于找到了一种解决方案,可以刷新openlayers 3上的一层。

您必须像这样更新图层源的参数:

var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);

3
似乎并非所有来源都支持该updateParams方法。OL3.18.2只能说明它ImageArcGISRestImageMapGuideImageWMSTileArcGISRestTileWMS,而不是,例如,ol.source.Vector
Arjan

Date#getTime可能比Date#getMilliseconds更好,因为它会使每次都确保唯一的编号,从而使缓存无效并强制重新绘制图层。
walkermatt

5

您可以使用刷新WFS图层myLayer.getSource().clear()


1
这是通过OpenLayers 3 v。0.14.2和WFS GeoJSON矢量源为我完成的。
德克

3
如果他们有钱,单行回答也没错。应该有一个声誉奖才能删除此信息框。
丹尼斯·鲍祖斯

1
答案是正确的,但是这可能会出现闪烁:调用时,clear()所有现有功能都会立即从地图中删除,只有在收到HTTP响应后才重新添加。这对于用于指定值true VectorOptions#urlVectorOptions#loader。对于实时数据,手工做一些的WebSockets或XHR魔法,然后调用getSource().clear()之后getSource().addFeatures(...)看起来更好地给最终用户。
Arjan

3

对于OL2,我使用了尚未添加到OL3中的图层刷新策略。下面是一个自调用函数,它将使用ajax请求来获取GeoJSON,然后读取它并将其添加到源中。

var yourSource = new ol.source.GeoJSON();

//add this source to a layer, the layer to a map with a view etc
...

//now fetch the data
var fetchData = function () {
    jQuery.ajax(url,
    {
        dataType: 'json',
        success: function (data, textStatus, jqXHR) {
            yourSource.clear(); //remove existing features
            yourSource.addFeatures(yourSource.readFeatures(data));
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    //call this again in 5 seconds time
    updateTimer = setTimeout(function () {
        fetchData();
    }, 5000);
};
fetchData(); //must actually call the function!

希望这可以帮助。


2

这非常适合图层:

layer.changed();

按照http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed


1
您需要更多地说明如何layer.changed();完美地使用图层。文档说明Increases the revision counter and dispatches a 'change' event.并没有真正帮助。使用changed()方法如何回答有关每5秒重绘地图的问题?
nmtoken

我已经使用Ajax保存了修订的geojson源,而我遇到的问题是,如果我关闭该层并重新打开它,则地图将使用该源的缓存(未修订)版本。清除缓存后,该层将按预期使用修订后的源。不幸的是,这个建议layer.changed();对我没有任何作用,但是可以解决问题source.changed();
彼得·库珀

1

无需显式刷新。每次更新图层的内容时,都会刷新地图,以请求新的帧渲染。

要强制手动渲染,您必须使用map.render()map.renderSync()方法。


那不会更新内容,只会更新地图画布本身。
Mapper
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.