Mapbox离线下载报错：Failed to resolve tileset descriptors: Loading request canceled

问题背景 #

使用Mapbox离线管理器异步下载多个地图区域时，开发模式极少出错，但生产环境偶尔出现Failed to resolve tileset descriptors: Loading request canceled错误。同一下载函数，用户区域基本正常，地块区域大多失败，改为同步执行后仍报错，仅最后一个包常能成功。

相关代码 #

const downloadPack = async (packName, bounds) => {
  console.log("bounds", packName, bounds);

  // Delete old pack
  await MapboxGL.offlineManager.deletePack(packName);

  const progressListener = (offlineRegion, status) => {
    if (status.state === "complete") {
      console.log(
        `Pack: ${packName}`,
        formatBytes(status.completedResourceSize),
        status.percentage,
        status.state,
      );
    }
  };

  const errorListener = (offlineRegion, err) => {
    console.log("pack error", offlineRegion, err);
  };

  const packConfig = {
    name: packName,
    styleURL: styleURL,
    minZoom: MAP_CONFIG.MIN_ZOOM_ALLOWED,
    maxZoom: MAP_CONFIG.MAX_ZOOM_ALLOWED,
    bounds,
  };

  await MapboxGL.offlineManager.createPack(
    packConfig,
    progressListener,
    errorListener,
  );

  // console.log("packConfig", packConfig);
};

区域参数 #

LOG  bounds field-region-74 [[67.05473691050432, 24.859774187835313], [67.05879400202377, 24.864996599470516]]
LOG  bounds field-region-73 [[67.05603555964123, 24.863974062407152], [67.06011966003771, 24.86902696726922]]
LOG  bounds field-region-72 [[67.05860259878298, 24.868365914318616], [67.06177770104551, 24.871585472853567]]
LOG  bounds field-region-71 [[67.0527601437771, 24.865385527088804], [67.06248793623786, 24.878936670953124]]
LOG  bounds field-region-70 [[67.0575708775574, 24.859917106865936], [67.06827409941002, 24.868984873055723]]

错误日志 #

LOG  pack error {"pack":{"metadata":"{\n  \"name\" : \"field-region-74\"\n}","bounds":"{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.05473691050432,24.859774187835313]}},{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.05879400202377,24.864996599470516]}}]}","_metadata":null} {"message":"Failed to resolve tileset descriptors: Loading request canceled","name":"field-region-74"}

LOG  pack error {"pack":{"metadata":"{\n  \"name\" : \"field-region-73\"\n}","bounds":"{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.05603555964123,24.863974062407152]}},{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.06011966003771,24.86902696726922]}}]}","_metadata":null} {"name":"field-region-73","message":"Failed to resolve tileset descriptors: Loading request canceled"}

LOG  pack error {"pack":{"metadata":"{\n  \"name\" : \"field-region-72\"\n}","bounds":"{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.05860259878298,24.868365914318616]}},{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.06177770104551,24.871585472853567]}}]}","_metadata":null} {"name":"field-region-72","message":"Failed to resolve tileset descriptors: Loading request canceled"}

LOG  pack error {"pack":{"metadata":"{\n  \"name\" : \"field-region-71\"\n}","bounds":"{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.0527601437771,24.865385527088804]}},{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[67.06248793623786,24.878936670953124]}}]}","_metadata":null} {"name":"field-region-71","message":"Failed to resolve tileset descriptors: Loading request canceled"}
 
LOG  Pack: field-region-70 2.18 MB 100 complete

解决方案 #

1. 预加载样式文件，确保tileset描述符解析完成 #

createPack依赖样式文件中的tileset配置，生产环境下样式加载可能因网络或资源调度问题被中断。先预加载样式，确认解析完成后再创建离线包：

const downloadPack = async (packName, bounds) => {
  console.log("bounds", packName, bounds);

  // 预加载并解析样式
  await MapboxGL.Style.load(styleURL);

  // Delete old pack
  await MapboxGL.offlineManager.deletePack(packName);

  // ... 剩余原有代码不变
};

2. 添加重试机制，处理临时网络/资源竞争问题 #

针对Loading request canceled这类临时错误，添加指数退避重试逻辑：

const downloadPack = async (packName, bounds, retries = 3) => {
  console.log("bounds", packName, bounds);

  try {
    await MapboxGL.Style.load(styleURL);
    await MapboxGL.offlineManager.deletePack(packName);

    const progressListener = (offlineRegion, status) => {
      if (status.state === "complete") {
        console.log(
          `Pack: ${packName}`,
          formatBytes(status.completedResourceSize),
          status.percentage,
          status.state,
        );
      }
    };

    const errorListener = (offlineRegion, err) => {
      console.log("pack error", offlineRegion, err);
    };

    const packConfig = {
      name: packName,
      styleURL: styleURL,
      minZoom: MAP_CONFIG.MIN_ZOOM_ALLOWED,
      maxZoom: MAP_CONFIG.MAX_ZOOM_ALLOWED,
      bounds,
    };

    await MapboxGL.offlineManager.createPack(
      packConfig,
      progressListener,
      errorListener,
    );
  } catch (err) {
    if (retries > 0 && err.message.includes("Loading request canceled")) {
      console.log(`Retrying ${packName}, remaining retries: ${retries - 1}`);
      // 指数退避延迟
      await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, 3 - retries)));
      return downloadPack(packName, bounds, retries - 1);
    }
    throw err;
  }
};

3. 确保旧包完全删除后再创建新包 #

删除包后，等待离线管理器状态同步，避免资源竞争：

// 替换原删除包的逻辑
await MapboxGL.offlineManager.deletePack(packName);
// 确认包已删除
const packs = await MapboxGL.offlineManager.getAllPacks();
const exists = packs.some(pack => pack.metadata.name === packName);
if (exists) {
  await new Promise(resolve => setTimeout(resolve, 500));
}

4. 验证生产环境网络访问权限 #

确保生产环境允许访问Mapbox相关域名（如api.mapbox.com、tiles.mapbox.com），避免请求被代理、防火墙或CDN拦截。

5. 检查bounds坐标顺序 #

确认bounds使用Mapbox要求的**[西南经纬度, 东北经纬度]**顺序，避免因坐标顺序错误导致tileset解析异常。

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