Cesium开发教程（17）---加载WMTS服务，解决大文件卡顿问题本学习系列将以Cesium + Vue3+Type

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，详情请关注原文Cesium+Vue3学习系列（17）---加载WMTS服务，解决大文件卡顿问题

在之前的文章Cesium+Vue3学习系列（15）---Cesium加载Geoserver发布的影像（tif）WMS数据服务使用Cesium加载WMS服务。然而，当 TIFF 文件“上了体量”——动辄几百 MB 甚至几个 GB——再用 WMS 整幅动态出图，浏览器就会频繁请求整张图片，导致拖拽、缩放时卡顿明显，体验直线下降。

如何解决这个问题呢？思路很简单：把“一整张”变成“一小块”。

将影像发布为 WMTS（Web Map Tile Service）服务，让 Cesium 按需逐级加载预生成的瓦片，既减轻 GeoServer 实时渲染压力，也充分利用浏览器缓存，秒级响应、丝滑漫游。步骤如下：

1、新建工作区。如果已有工作区，此步骤忽略。

2、新建数据存储，选择GeotTIFF。

3、选择步骤（1）的工作区，设置连接参数，注意影像最好是WGS84坐标系，然后点击保存。

4、点击“发布”。

5、然后进入到编辑图层页面，数据页面设置好覆盖参数。在图块缓存（Title caching）页面选择切片策略（由于本篇所用数据是WGS84坐标系，因此选择EPSG：4326）。然后点击保存。

6、点击“切片图层”，找到发布的图层，打开Seed/Truncate

![图片](p0-xtjj-private.juejin.cn/tos-cn-i-73…

7、设置切片选项。点击“Submit”。可以通过refresh list可以查看切片进度：

8、切片后的数据默认存储ProgramData/geoserver/gwc文件下：

9、进入gwc主页http://localhost:8080/geoserver/gwc/home 点击“A list of all the layers and automatic demos”进入demo页面。然后点击png，即可看到预览页面

10、wmts数据配置


// wmts测试数据
export const wmtsImageTestInfo: ILayerItem = {
    id: LayerIdFlag.WMTS_IMAGE_TEST,
    name: "wmtsImageTest",
    type: "imagery_wmts",
    //用户需调整为自己的geoserver地址
    url : 'http://localhost:8080/geoserver/gwc/service/wmts/rest/gongzhonghao:tif3/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png',  //用户需调整为自己的geoserver地址
     //用户需调整为自己的图层名称
    layer : 'gongzhonghao:tif3',   //用户需调整为自己的图层名称
    style:'raster'
}

11、Cesium加载wmts数据

case 'imagery_wmts':
    provider = new Cesium.WebMapTileServiceImageryProvider({
        url: item.url!,
        layer: item.layer!,
        style: item.style || '',
        format: item.format || 'image/png',
        tileMatrixSetID: item.tileMatrixSetID || "EPSG:4326",
        tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2',
            'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6',
            'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
            'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14',
            'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'],
        tilingScheme: new Cesium.GeographicTilingScheme({
            numberOfLevelZeroTilesX: 2,
            numberOfLevelZeroTilesY: 1,
        }),
    });
    handle = this.AddImageryLayer(provider, show, alpha, zIndex)
    break

12、前端实现


const changeWmtsImageTest = (val: string | number | boolean) => {
  if (val) {
    // 加载wmts影像图层
    mLayerManager?.Add(wmtsImageTestInfo)
    // 跳转到指定坐标
    viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(108.8, 37.9, 1000000.0)
    });
  } else {
    // 移除wmts影像图层
    mLayerManager?.Remove(LayerIdFlag.WMTS_IMAGE_TEST)
  }
}

13、实现效果