Mapbox地图接入OpenWeather V2版天气瓦片服务失效问题咨询

• 瓦片坐标系不兼容：OpenWeather 2.0版本瓦片服务使用TMS坐标系，Y轴方向与Mapbox默认的XYZ坐标系完全相反，旧版瓦片服务默认做了XYZ兼容所以可以直接加载，新版无此适配。
• 请求参数缺失：新版接口要求显式指定返回资源格式，你使用的链接未添加&format=png后缀，服务端不会返回合法的图片资源。
• 混合内容拦截：你使用的是HTTP协议的瓦片链接，如果你的Mapbox地图页面是HTTPS协议，浏览器会基于安全策略拦截HTTP请求。
• 参数有效性问题：你填写的date参数是2018年的历史时间戳，若你的OpenWeather账号套餐没有历史瓦片查询权限，会触发权限校验失败，返回403错误。

按以下规则修改瓦片配置即可正常加载：

1. 将瓦片链接更换为HTTPS协议，新增format参数，测试阶段先移除无效的历史date参数
2. 在raster源配置中新增scheme: 'tms'字段，适配TMS坐标系的Y轴翻转规则
3. 将maxzoom调整为18，2.0版本瓦片最高仅支持到18级缩放，超出范围会返回404

修改后的完整代码如下：

map.on('load', function(){
  map.addLayer({
    "id": "weather-tiles-2.0",
    "type": "raster",
    "source": {
      "type": "raster",
      "tiles": ["https://maps.openweathermap.org/maps/2.0/weather/PA0/{z}/{x}/{y}?appid=替换为你的有效API密钥&format=png"],
      "tileSize": 256,
      "scheme": "tms"
    },
    "minzoom": 0,
    "maxzoom": 18
  });
});

如果需要加载历史天气瓦片，先确认你的账号套餐支持历史数据查询权限，再在链接中添加合法的Unix时间戳date参数即可。排查问题时可打开浏览器控制台的网络面板，查看瓦片请求的状态码：401代表API密钥无效，403代表无对应资源访问权限，404代表缩放等级或坐标参数错误。

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