如何在OpenLayers 4.6.4中获取瓦片加载的真实错误信息

嘿，刚好对OL 4.x的瓦片加载机制比较熟悉，来给你梳理一下：

首先得明确：OpenLayers 4.6.4默认的瓦片加载方式（用<img>标签）受浏览器安全限制，无法直接获取HTTP请求的真实错误信息（比如404、500状态码）——因为浏览器不会把这些细节暴露给img的error事件。但我们可以通过自定义瓦片加载逻辑绕开这个限制，实现获取真实错误信息的需求。

两种场景的处理方式： #

1. 默认img加载（无法获取HTTP错误详情）

如果用OL自带的默认加载逻辑，tileloaderror事件只能告诉你“这个瓦片加载失败了”，能拿到的信息只有出错瓦片的坐标、层级这些元数据，拿不到HTTP状态码或响应内容。比如：

const tileSource = new ol.source.XYZ({ url: '/tiles/{z}/{x}/{y}.png' });

tileSource.on('tileloaderror', (event) => {
  console.log(`瓦片加载失败：层级${event.tile.getTileCoord()[0]}，坐标(${event.tile.getTileCoord()[1]}, ${event.tile.getTileCoord()[2]})`);
  // 这里拿不到HTTP错误码，只能知道加载失败
});

2. 自定义XHR加载（获取真实HTTP错误）

要拿到HTTP状态码这类真实错误信息，我们需要重写tileLoadFunction，用XMLHttpRequest（XHR）来加载瓦片数据，这样就能在XHR的回调里直接捕获HTTP状态码、响应内容等细节，甚至可以把这些信息附加到tileloaderror事件里。

示例代码如下：

const tileSource = new ol.source.XYZ({
  url: '/tiles/{z}/{x}/{y}.png',
  // 重写瓦片加载函数
  tileLoadFunction: (tile, src) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', src);
    xhr.responseType = 'blob'; // 以Blob形式接收瓦片数据

    // 加载成功的处理
    xhr.onload = () => {
      if (xhr.status === 200) {
        const blobUrl = URL.createObjectURL(xhr.response);
        const img = tile.getImage();
        // 释放Blob URL避免内存泄漏
        img.onload = () => URL.revokeObjectURL(blobUrl);
        img.src = blobUrl;
      } else {
        // 加载失败，捕获HTTP状态码并触发自定义tileloaderror事件
        tileSource.dispatchEvent({
          type: 'tileloaderror',
          tile: tile,
          url: src,
          statusCode: xhr.status,
          response: xhr.responseText
        });
      }
    };

    // 网络错误的处理
    xhr.onerror = () => {
      tileSource.dispatchEvent({
        type: 'tileloaderror',
        tile: tile,
        url: src,
        error: '网络请求失败（跨域或连接问题）'
      });
    };

    xhr.send();
  }
});

// 监听自定义的tileloaderror事件，获取真实错误信息
tileSource.on('tileloaderror', (event) => {
  console.error(`瓦片加载错误：${event.url}`);
  if (event.statusCode) {
    console.error(`HTTP状态码：${event.statusCode}`);
  }
  if (event.error) {
    console.error(`错误详情：${event.error}`);
  }
});

注意事项： #

• 如果你的瓦片是跨域的，必须确保瓦片服务器配置了正确的CORS响应头（比如Access-Control-Allow-Origin），否则XHR请求会被浏览器拦截。
• 用XHR加载瓦片会比默认img加载多一点性能开销，不过在大多数场景下可以忽略。

总结一下：OL 4.6.4没有内置的直接获取HTTP错误信息的方式，但通过自定义tileLoadFunction用XHR加载，就能轻松拿到真实的错误详情啦。

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