Cesium开发教程（18）---离线 XYZ 瓦片：内网环境大文件流畅加载方案本学习系列将以Cesium + Vue3

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，详情请关注原文Cesium+Vue3学习系列（18）---离线 XYZ 瓦片：内网环境大文件流畅加载方案。

上篇文章中Cesium+Vue3学习系列（17）---加载WMTS服务，解决大文件卡顿问题我们借助 GeoServer 将遥感影像发布为 WMTS 瓦片，显著提升了大影像文件的加载流畅度。

本文继续探讨另一种轻量方案：XYZ 标准瓦片。它同样能化解“大图卡顿”难题，且天生离线友好——只需预先将影像切为 XYZ 目录，即可在纯内网环境快速部署，彻底摆脱对公网的依赖，完美契合保密单位需求。

1、使用QGIS生成XYZ瓦片（如果用户已有XYZ瓦片数据，可忽略此步骤）。

2、处理黑边无效数据问题。右键选中数据，选择属性。如果有4波段数据，可以选择波段4作为透明度。如果3波段的话，点击加号，设置无效数据的RGB值。点击确定后，就没有黑边了。

3、点击菜单“处理”->"工具箱"，在处理工具箱中选择“栅格工具”->Generate XYZ tiles(Directory)

4、在弹出的页面中，选择图层范围。设置瓦片的最小级别（Minium zoom）、最大级别（Maximum zoom），瓦片格式（TileFormat）、输出目录。点击完成。

5、为了便于测试，本文将生成的XYZ瓦片数据放到了public文件夹。用户在实际项目中可以使用nginx、Tomcat等部署瓦片，网上有很多教程，这里不做赘述。

6、配置和加载XYZ瓦片


// xyz测试数据
export const xyzImageTestInfo: ILayerItem = {
    id: LayerIdFlag.XYZ_IMAGE_TEST,
    name: "xyzImageTest",
    type: "imagery_xyz",
    url: '/testdata/xyzTiles/{z}/{x}/{y}.png',  //用户需调整为自己的瓦片地址
    layer : 'xyzImageTest',   //用户需调整为自己的图层名称
}


            case 'imagery_xyz':
                provider = new Cesium.UrlTemplateImageryProvider({
                    url: item.url!,             
                })
              
                handle = this.AddImageryLayer(provider, show, alpha, zIndex)
                break

7、前端实现

const changeXyzImageTest = (val: string | number | boolean) => {
  if (val) {
    // 加载离线TMS瓦片图层
    mLayerManager?.Add(xyzImageTestInfo)
    // 跳转到指定坐标
    viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(111.559, 37.476, 1000000.0)
    });
  } else {
    // 移除离线TMS瓦片图层
    mLayerManager?.Remove(LayerIdFlag.XYZ_IMAGE_TEST)
  }
}

8、最终效果