如何让CesiumJS仅加载TMS瓦片集中指定的非连续层级瓦片

我明白你的困扰——Cesium默认的瓦片加载逻辑确实会尝试请求minimumLevel到maximumLevel之间的所有层级，哪怕你的瓦片集里根本没有这些层级的文件。这确实是个挺基础的需求，下面给你两种可行的解决方案：

方案一：自定义ImageryProvider过滤层级 #

你可以通过扩展UrlTemplateImageryProvider，重写瓦片请求逻辑来实现层级过滤。核心思路是只允许请求你指定的层级，其他层级直接返回空瓦片，避免无效的网络请求。

// 定义允许加载的层级列表
const allowedLevels = [13, 15, 17, 19];

// 自定义层级过滤的ImageryProvider
class FilteredUrlTemplateImageryProvider extends Cesium.UrlTemplateImageryProvider {
  constructor(options) {
    super(options);
    this._allowedLevels = allowedLevels;
  }

  requestImage(x, y, level, request) {
    // 检查当前层级是否在允许列表中
    if (!this._allowedLevels.includes(level)) {
      // 返回透明空瓦片，避免无效请求
      return Promise.resolve(new Image());
    }
    // 允许的层级，调用父类方法正常请求瓦片
    return super.requestImage(x, y, level, request);
  }
}

// 使用自定义Provider添加图层
const imageryLayer = cesium.imageryLayers.addImageryProvider(
  new FilteredUrlTemplateImageryProvider({
    url: `${args.url}/{z}/{x}/${args.flipY ? "reverseY" : "y"}.${args.imageExtension}`,
    rectangle: boundingRenderArea,
    hasAlphaChannel: true,
    minimumLevel: 13,
    maximumLevel: 19,
  })
);

这样Cesium在尝试请求中间层级时，会直接得到空瓦片，不会发起无效请求，同时只会加载你指定的四个层级。

方案二：拆分多个瓦片集，每层单独配置 #

你提到的拆分瓦片集思路其实非常可行，而且实现起来更简单——不需要自定义类，只需要为每个目标层级单独创建UrlTemplateImageryProvider，并将每个Provider的minimumLevel和maximumLevel设为同一个值即可。Cesium自带的LOD（细节层次）机制会自动根据相机缩放级别，加载对应层级的瓦片，完全不需要额外控制“渲染距离”。

// 你的目标层级列表
const tileLevels = [13, 15, 17, 19];

// 循环创建每个层级的瓦片图层
tileLevels.forEach(level => {
  const imageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: `${args.url}/{z}/{x}/${args.flipY ? "reverseY" : "y"}.${args.imageExtension}`,
    rectangle: boundingRenderArea,
    hasAlphaChannel: true,
    minimumLevel: level,
    maximumLevel: level, // 强制只加载当前层级
  });
  cesium.imageryLayers.addImageryProvider(imageryProvider);
});

这种方法的优势是代码简单、易维护，适合快速实现。Cesium会自动根据相机的缩放状态，选择最合适的层级瓦片加载，不会出现多层级同时渲染的问题。

总结 #

两种方案都能解决你的需求：如果想要更优雅的单图层方案，自定义Provider是更好的选择；如果追求快速落地，多瓦片集拆分的方式更直接。

内容来源于stack exchange