如何在Cesium中随影像瓦片z/x/y参数发送自定义JSON请求并处理响应

方案1：复用现有影像瓦片的请求逻辑（推荐，和影像加载完全同步） #

你不需要额外新增专门请求JSON的ImageryLayer，只需要在你原本加载影像的ImageryProvider中插入自定义请求逻辑即可，完全复用Cesium原生的瓦片调度能力，不会发起多余请求：

// 初始化你原本用来加载影像的Provider
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
  url: '你的实际影像瓦片服务地址' // 替换为你原本的影像地址
});
// 保存原有的请求影像的方法
const originalRequestImage = imageryProvider.requestImage.bind(imageryProvider);
// 重写requestImage方法，插入自定义JSON请求逻辑
imageryProvider.requestImage = function (x, y, level, request) {
  // 直接拿到当前瓦片的z(level)/x/y参数，发起自定义JSON请求
  fetch(`http://localhost:2020/json/${level}/${x}/${y}`)
    .then(res => res.json())
    .then(customJson => {
      // 这里处理你的自定义JSON逻辑
      console.log('当前瓦片对应JSON：', level, x, y, customJson);
    })
    .catch(err => console.error('JSON请求失败：', err));
  // 调用原有方法请求影像，不影响正常影像加载渲染
  return originalRequestImage(x, y, level, request);
};
// 添加影像图层到场景
viewer.scene.imageryLayers.addImageryProvider(imageryProvider);

方案2：独立实现瓦片调度（适合无影像图层的场景） #

如果你不需要加载影像图层，只需要单独请求JSON格式的瓦片，可以自己基于Cesium内置的瓦片剖分逻辑实现调度：

// 初始化墨卡托瓦片剖分规则，和通用影像瓦片规则一致
const tilingScheme = new Cesium.WebMercatorTilingScheme();
// 监听视口变化，计算当前需要请求的瓦片
viewer.camera.changed.addEventListener(() => {
  const viewRectangle = viewer.camera.computeViewRectangle();
  if (!viewRectangle) return;
  // 根据当前相机高度计算对应的瓦片层级
  const level = Math.round(Cesium.Math.clamp(
    19 - Math.log2(viewer.camera.positionCartographic.height / 1000),
    1, 18 // 限制层级范围，按实际需求调整
  ));
  // 计算当前视口覆盖的所有瓦片坐标
  const tileXYList = tilingScheme.positionToTileXYArray(viewRectangle, level);
  // 遍历请求每个瓦片的JSON
  tileXYList.forEach(({x, y}) => {
    // 可自行添加缓存逻辑，避免重复请求同一瓦片
    fetch(`http://localhost:2020/json/${level}/${x}/${y}`)
      .then(res => res.json())
      .then(customJson => {
        // 处理自定义JSON逻辑
      });
  });
});

原方案失效原因 #

UrlTemplateImageryProvider是专门设计用来加载图片类瓦片资源的，内部会自动将响应内容解析为WebGL纹理，返回JSON格式会触发解析异常，且官方未提供自定义响应处理的入口，因此不适合用来请求非图像类资源。

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