从Mapbox获取珠峰RGB地形瓦片返回404 JS代码运行异常排查

项目方案演进 #

近期重启JS珠峰飞行模拟项目的开发工作。最初尝试使用DEM高程数据自定义高程网格与瓦片，将高程值映射至顶点Z轴实现3D地形渲染。
后续评估认为Mapbox RGB瓦片存储高程数据的方案更优，可大幅减少自定义高程数据的加工量，但实际运行时始终无法正常获取目标瓦片。

当前异常表现 #

• 官方文档提供的内布拉斯加州奥马哈示例请求可正常响应
• 切换至珠峰坐标的瓦片请求始终返回未找到
• 已在对应sphericalmercator开源仓库提交相关问题单，等待技术人员提供排查思路

测试调用代码 #

import fs from "fs";
import dotenv from "dotenv";
import fetch from "node-fetch";
import SphericalMercator from "@mapbox/sphericalmercator";

dotenv.config();

const queryMapbox = async () => {
  const merc = new SphericalMercator({
    size: 256,
  });
  const xyFromLatLong = (lat, long, merc) => {
    return merc.forward([long, lat]);
  };

  const zoom = 14;
  const long = 86.922623;
  const lat = 27.986065;
  const xyPos = xyFromLatLong(lat, long, merc);

  console.log({ xyPos });

  try {
    // 文档示例 - 内布拉斯加州奥马哈区域
    // const response = await fetch(
    //   `https://api.mapbox.com/v4/mapbox.terrain-rgb/14/12558/6127.pngraw?access_token=${process.env.ACCESS_TOKEN}`
    // );
    // const filename = "omaha-rgb.png"

    const response = await fetch(
      `https://api.mapbox.com/v4/mapbox.terrain-rgb/${zoom}/${xyPos[0].toFixed(0)}/${xyPos[1].toFixed(0)}.pngraw?access_token=${process.env.ACCESS_TOKEN}`
    );
    const filename = "everest-rgb.png"

    await new Promise((resolve, reject) => {
      const fileStream = fs.createWriteStream(`./data/${filename}`);
      response.body.pipe(fileStream);
      response.body.on("error", (err) => {
        reject(err);
      });
      fileStream.on("finish", function () {
        resolve();
      });
    });


    console.log({ response });
  } catch (err) {
    console.error(err);
  }
};

queryMapbox(); // 测试执行

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