javascript - 是否可以定义一个将重试加载的层，例如指数退避？

Question

我正在使用 OpenLayers 连接到本地服务器，与 Google 或 Cloudmade 等专业级服务器不同，该盒子实际上需要一段时间来计算特定图 block 的结果。由于这是我正在绘制的数学函数，因此没有很大的机会来加速服务器甚至预渲染图 block 。

我对 Leaflet 的初步试验很快得出结论，Leaflet 实际上将所有重新加载和加载错误处理留给了浏览器，而 OpenLayers 至少有一个事件，当 tile 服务器确实返回错误代码时会触发该事件.

我遵循的想法基本上是在收到请求时开始渲染图 block 并立即触发 HTTP 503，依赖于客户端重试。

为了再试一次，我实现了一个像这样的简单层:

    var myLayer = new OpenLayers.Layer.OSM.MYLayer("mine", {
        'transparent':"true",
        'format':"image/png",
        'isBaseLayer':false});
    myLayer.events.register("tileerror", myLayer, function (param) {
        // Try again:
        var targetURL = param.tile.layer.getURL(param.tile.bounds);
        var tile = param.tile;
        tile.timeout = tile.hasOwnProperty("timeout") ? tile.timeout * 2 : 1000;
        setTimeout(function (tileToLoad, url) {
            if (tileToLoad.url === url) {
                tileToLoad.clear();
                tileToLoad.url = url;
                tileToLoad.initImage();
            }
        }.bind(undefined, tile, targetURL), tile.timeout);
    });

我从 OpenLayers 的源代码中找出了重新加载图 block 所需的代码，但也许有更简洁的方法来完成此操作。

我的问题是:tile 本身被重复使用，DOM 中的 div 也是如此，因此重新加载过程实际上可能会尝试将 tile 重新加载到 DIV 中，只要已成功重复使用，例如因为用户滚动到服务器能够快速提供数据的其他地方。

我想这个问题可以归结为 - 是否有一种官方方法可以使用 tileerror 事件来简单地尝试重新加载，或者至少有一种更简单的 API 方法来触发重新加载？我在 OpenLayers 本身的源代码上花了很长时间，但无法阐明为什么它仍然出错(tileToLoad.url == url 的测试并没有真正做到这一点)。

感谢您的帮助!

Answer 1

好的，经过更多的尝试和错误后，我发现我实际上可以将一个 eventListener 添加到我的 Layer 类，这将执行我想要的操作 - 尝试在一定等待后再次重新加载图 block 。诀窍是连续调用 setImgSrc() 进行清理并使用 true 参数绘制，这实际上是一个(未记录的)强制标志。感谢代码!

OpenLayers.Layer.OSM.MyLayer= OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize:function (name, options) {
    var url = [
       "xxxx"
    ];
    options = OpenLayers.Util.extend({
        "tileOptions":{
            eventListeners:{
                'loaderror':function (evt) {
                    // Later reload
                    window.setTimeout(function () {
                        console.log("Drawing ", this);
                        this.setImgSrc();
                        this.draw(true);
                    }.bind(this), 3000); // e.g. after 3 seconds
                }
            }
        }
    }, options);
    var newArguments = [name, url, options];
    OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},

CLASS_NAME:"OpenLayers.Layer.OSM.MyLayer"
});