Mapbox GL添加栅格瓦片集返回‘Tile not Found’问题排查

我尝试在地图中添加栅格瓦片集，该瓦片集已上传至Mapbox Studio且在Studio样式中验证有效，但Mapbox GL却返回‘Tile not Found’错误。以下是我的代码：

const TiffView1 = ({ previewFile }) => {
  const mapContainerRef = useRef(null);
 useEffect(() => {
const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: "mapbox://styles/globhe/clh089wmj00il01qu1ojx32ic",
      // center: [57.367, 12.405],
      // zoom: 1,
    });
    map.on("load", () => {
      map.addSource("tiff-source", {
        type: "raster",
        tiles: [
          "https://api.mapbox.com/v4/globhe.8qs6d7cc/{z}/{x}/{y}.png?access_token=" +
            mapboxgl.accessToken,
        ],
        tileSize: 256,
      });

      map.addLayer({
        id: "raster-tileset-layer",
        type: "raster",
        source: "tiff-source",
        paint: {
          "raster-opacity": 0.5,
        },
      });
    });
    map.on("load", function () {
      map.resize();
    });

    // Add navigation control (the +/- zoom buttons)
    map.addControl(new mapboxgl.NavigationControl(), "top-right");

    // Clean up on unmount
    return () => map.remove();
  }, []);
  return <div style={styles.mapContainer} ref={mapContainerRef} />;
};

错误截图：

请问我哪里出错了，或是遗漏了什么？

• 确认瓦片集的缩放级别范围
  Mapbox Studio中上传的栅格瓦片集有固定的支持缩放区间，如果当前地图的zoom不在这个范围内，就会返回“Tile not Found”。去Mapbox Studio的瓦片集详情页查看支持的z轴范围，然后在代码中取消注释center和zoom配置，设置到瓦片集有效的缩放区间内。

• 验证瓦片URL与token权限
  把代码中拼接的瓦片URL复制到浏览器，替换{z}/{x}/{y}为瓦片集支持的具体数值（比如z=2, x=1, y=1），直接访问看是否能加载瓦片：

  • 如果无法加载，检查mapboxgl.accessToken是否拥有该瓦片集的读取权限（私有瓦片集需要token包含tilesets:read权限）；
  • 确认瓦片集IDglobhe.8qs6d7cc完全正确，没有拼写错误。

• 合并重复的load事件回调
  代码中绑定了两个map.on("load")事件，可能引发时序问题。建议把添加源、图层和resize的逻辑合并到同一个回调里：

  map.on("load", () => {
    // 添加瓦片源
    map.addSource("tiff-source", {
      type: "raster",
      tiles: [
        `https://api.mapbox.com/v4/globhe.8qs6d7cc/{z}/{x}/{y}.png?access_token=${mapboxgl.accessToken}`
      ],
      tileSize: 256,
    });
    // 添加图层
    map.addLayer({
      id: "raster-tileset-layer",
      type: "raster",
      source: "tiff-source",
      paint: {
        "raster-opacity": 0.5,
      },
    });
    // 执行resize
    map.resize();
  });
  

• 检查瓦片集投影是否匹配
  Mapbox GL默认使用Web墨卡托投影（EPSG:3857），如果你的栅格瓦片集使用其他投影，会导致瓦片无法匹配。确认在Mapbox Studio上传时选择的是Web墨卡托投影。

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