原因分析 #

你遇到的控制台错误，本质是Open Map Tiles 未提供对应区域的高缩放级别瓦片，再结合 Mapbox GL JS 的默认行为导致的：

• Open Map Tiles 通常不会为全球所有区域都生成14级以上的瓦片（尤其是偏远、低关注度区域），当你缩放超过14级（部分区域甚至11级）时，请求的瓦片资源根本不存在，直接触发加载失败。
• Mapbox GL JS 默认会将瓦片加载失败的情况以错误形式抛出到控制台，而不会自动降级使用已存在的低级别瓦片来填充显示。

解决方法 #

根据你希望「自动延用低级别瓦片而非报错」的需求，推荐以下几种方案：

1. 限制瓦片源的最大缩放级别（最简单直接）

直接在瓦片源配置中设置maxzoom: 14，这样当用户缩放超过14级时，Mapbox 会自动使用14级的瓦片进行放大显示，不会再请求不存在的高等级瓦片，自然也就不会报错了。

示例代码：

map.addSource('omt-source', {
  type: 'vector',
  url: 'mapbox://your-omt-key', // 替换为你的OMT密钥对应的源地址
  maxzoom: 14 // 限制最大缩放级别为14
});

2. 监听瓦片加载失败事件，抑制错误日志

如果你希望保留尝试加载高等级瓦片的可能（比如部分区域有14级以上的瓦片），可以监听tileLoadFail事件，阻止默认的错误抛出行为，同时可以自定义处理逻辑：

示例代码：

map.on('tileLoadFail', (event) => {
  // 阻止错误默认行为，避免控制台输出报错信息
  event.preventDefault();
  // 可选：添加自定义日志记录，方便排查问题
  console.debug('瓦片加载失败，已自动忽略:', event.tile.url);
});

这种方式下，有高等级瓦片的区域能正常加载，没有的区域会静默失败，Mapbox 会自动用低级别瓦片填充显示（不会出现空白）。

3. 自定义瓦片降级逻辑（进阶）

如果需要更精细的控制，比如针对不同区域设置不同的最大缩放级别，或者手动加载低级别瓦片替代，可以在tileLoadFail事件中编写自定义逻辑，比如根据当前瓦片的缩放级别，请求对应区域的低一级瓦片来填充。不过这种方案复杂度较高，一般前两种方法足够覆盖大部分场景。

额外提示 #

如果某些特定区域你必须要有14级以上的高分辨率瓦片，可以：

• 检查 Open Map Tiles 的官方文档，确认该区域是否有更高等级的瓦片资源；
• 自行使用 Open Map Tiles 的工具生成对应区域的高等级瓦片，再部署到自己的服务器或瓦片服务中。

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