如何在Bing Maps V8中重新加载加载失败的瓦片源图片？

解决方案 #

嘿，很高兴能帮你解决这个问题！确实，Bing Maps V8的AnimatedTileLayer默认不会自动重试加载失败的瓦片，不过我们可以通过两种实用的方式来处理，让损坏的图片能重新加载：

方案一：监听瓦片图片错误事件，实时重试

每次动画帧加载完成后，我们可以遍历当前帧的所有瓦片图片，给它们绑定error事件，一旦加载失败就重新发起请求（加随机参数绕过缓存）。修改你的onFrameLoaded事件处理函数即可：

Microsoft.Maps.Events.addHandler(animatedTileLayer, 'onFrameLoaded', function (e) {
    var radmsg = displayradMessages[e.index];
    var opacity = currentOpacity;
    document.getElementById('satframeTimeStamp').value = radmsg;
    
    // 新增：处理瓦片加载失败逻辑
    if (animatedTileLayer._htmlElement) {
        // 获取当前帧的所有瓦片图片
        const tileImgs = animatedTileLayer._htmlElement.querySelectorAll('img');
        
        tileImgs.forEach(img => {
            // 标记已处理的图片，避免重复绑定事件
            if (!img.hasAttribute('data-retry-handled')) {
                img.setAttribute('data-retry-handled', 'true');
                
                img.addEventListener('error', function() {
                    // 给URL加随机时间戳，强制浏览器重新请求
                    const originalSrc = this.src;
                    const retrySrc = originalSrc + (originalSrc.includes('?') ? '&' : '?') + 'retry=' + Date.now();
                    this.src = retrySrc;
                });
            }
        });
        
        // 原有的透明度设置逻辑
        if (animatedTileLayer._htmlElement.style.opacity !== opacity) {
            animatedTileLayer._htmlElement.style.opacity = opacity;
        }
    }
});

这个方案的好处是快速修改现有代码，不需要重构瓦片源的创建逻辑，适合快速解决问题。

方案二：自定义带重试逻辑的TileSource（更稳定）

如果想让重试逻辑更模块化，避免依赖Bing Maps内部的DOM结构（防止版本更新导致_htmlElement属性变化），可以自定义一个继承自Microsoft.Maps.TileSource的类，在瓦片加载失败时自动重试：

// 自定义带重试功能的TileSource
function RetryEnabledTileSource(options) {
    // 继承基础TileSource的属性和方法
    Microsoft.Maps.TileSource.call(this, options);
    // 可配置最大重试次数，默认3次
    this.maxRetries = options.maxRetries || 3;
}

// 继承原型链
RetryEnabledTileSource.prototype = Object.create(Microsoft.Maps.TileSource.prototype);
RetryEnabledTileSource.prototype.constructor = RetryEnabledTileSource;

// 重写getTile方法，添加重试逻辑
RetryEnabledTileSource.prototype.getTile = function(x, y, zoom) {
    const img = document.createElement('img');
    let retryCount = 0;
    const self = this;

    // 定义加载瓦片的函数
    function loadTile() {
        let tileUri = self.getUri(x, y, zoom);
        // 加随机参数避免缓存失败的响应
        tileUri += (tileUri.includes('?') ? '&' : '?') + 't=' + Date.now();
        img.src = tileUri;
    }

    // 监听图片加载失败事件
    img.addEventListener('error', function() {
        if (retryCount < self.maxRetries) {
            retryCount++;
            // 延迟500ms重试，避免瞬间大量请求
            setTimeout(loadTile, 500);
            console.log(`重试瓦片 [${x}, ${y}, ${zoom}]，次数：${retryCount}`);
        }
    });

    // 首次加载瓦片
    loadTile();
    return img;
};

然后修改你创建瓦片源的代码，用自定义的RetryEnabledTileSource替换原来的Microsoft.Maps.TileSource：

// 替换原有的TileSource创建逻辑
var radtileSource = new RetryEnabledTileSource({
    uriConstructor: 'http://example.com/smt/' + ApiKey + '/' + layerName + '/' + ts + '/{zoom}/{x}/{y}.png',
    maxRetries: 3 // 可根据需求调整重试次数
});

这个方案更健壮，把重试逻辑封装在瓦片源内部，代码结构更清晰，也更适配未来的Bing Maps版本更新。

额外小建议

• 重试时添加延迟可以避免给服务器造成过大压力
• 可以在控制台打印重试日志，方便调试加载失败的瓦片
• 如果你的瓦片服务器有缓存策略，添加随机参数是必须的，确保浏览器不会复用缓存的失败响应

内容的提问来源于stack exchange，提问作者AKB