OpenLayers：自定义tileLoadFunction加载失败时不重试的解决办法

嘿Simon，我明白你遇到的麻烦了——自定义的tileLoadFunction用XHR加载切片能正常工作，但一旦请求失败，OL就不会再尝试加载这个切片了对吧？这是因为默认情况下，OL并不知道你的XHR请求失败了，它会以为切片已经处理完成，自然不会重试。

要解决这个问题，关键是在XHR请求失败时明确告诉OpenLayers这个切片加载失败了，具体来说就是调用tile对象的setError()方法。下面是修改后的完整代码示例，我给你标注了关键的处理部分：

function getTile(tile, url) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob'; // 加载图片切片时，设置为blob更合适

  // 请求成功的处理逻辑
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 将返回的blob转换为可访问的图片URL
      var imgUrl = URL.createObjectURL(xhr.response);
      var tileImage = tile.getImage();
      
      // 图片加载完成后释放blob URL资源，避免内存泄漏
      tileImage.onload = function() {
        URL.revokeObjectURL(imgUrl);
      };
      
      // 将图片设置给tile，让OL知道切片加载成功
      tileImage.src = imgUrl;
    } else {
      // 状态码不是200，说明请求失败，标记切片错误
      tile.setError();
    }
  };

  // 处理网络错误（比如断网、服务器无响应）
  xhr.onerror = function() {
    tile.setError();
  };

  // 处理请求被中断的情况
  xhr.onabort = function() {
    tile.setError();
  };

  xhr.open('GET', url);
  // 如果你需要携带会话Cookie，记得开启withCredentials
  xhr.withCredentials = true;
  xhr.send();
}

几个关键要点： #

• 调用tile.setError()：这是核心操作，一旦调用这个方法，OpenLayers就会将该切片标记为"加载失败"，后续会根据自身的重试逻辑（比如当视图再次覆盖该切片区域时）重新调用你的tileLoadFunction。
• 覆盖所有失败场景：除了onerror，还要处理onabort和非200的状态码，确保所有可能的失败情况都被捕获。
• 成功时正确设置切片内容：必须把加载成功的图片设置给tile的图像元素，否则OL可能会一直认为切片未加载完成。

另外，如果你需要控制重试的次数，可以在创建TileSource的时候配置maxRetryCount参数（OpenLayers 6及以上版本支持），比如：

new ol.source.TileImage({
  tileLoadFunction: getTile,
  maxRetryCount: 3, // 设置最多重试3次
  // 其他配置项...
})

这样调整后，当切片请求失败时，OpenLayers就会知道需要重新尝试加载啦～

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