本章介绍Cesium JS库的WebMapTileServiceImageryProvider类，并以GeoServer为例演示了在CesiumViewer控件中添加瓦片图层的方法。

主要包括以下内容：

• WebMapTileServiceImageryProvider
• 添加WMTS瓦片图层

---

1. WebMapTileServiceImageryProvider

WebMapTileServiceImageryProvider是Cesium JS库中专门用来加载WMTS 1.0.0兼容服务的一个图层类，可以提供键值对和RESTful两种访问方式。主要的构造选项参数如下：

Name	Type	Description
url	String	WMTS GetTile操作的URL
format	String	从服务器上获取的图像的MIME类别
layer	String	WMTS请求的图层名称
style	String	WMTS请求的样式名称
tileMatrixSetID	String	WMTS请求的瓦片集识别符
tileMatrixLabels	Array	WMTS请求中的瓦片矩阵标签列表,一个标签对应一个缩放等级
tileWidth	Number	瓦片的宽度，默认256
tileHeight	Number	瓦片的高度，默认256
tilingScheme	TilingScheme	切片方案，对应切片矩阵中的切片组织方式
rectangle	Rectangle	层覆盖的矩形范围
minimumLevel	Number	图层支持的最小级别
maximumLevel	Number	图层支持的最大级别

使用GetTile获取WMTS服务的时候，url中需要填充几个必需的参数：

{layer}：瓦片图层名称

{style}：瓦片风格

{format}：图像类别

{TileMatrixSetID}：瓦片矩阵集合名称，通常为“EPSG:4326”或“EPSG:3857”等

{TileMatrixLabels}：为瓦片矩阵名称，一般为瓦片层级的名称

{TileRow}：为瓦片行编号

{TileCol}：为瓦片行编号

如果使用键值对方式访问的话，上述参数自动组成键值对后与GetTile一起发送至WMTS服务器。如是使用RESTful方式访问的话，上太述这些参数需要出现在瓦片访问url模板中，形如

wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png

了解了WebMapTileServiceImageryProvider类的构造参数后，就可以根据WMTS服务器的要求构造一个瓦片ImageryProvider，加入到图层容器中就可以看到WMTS瓦片请求的效果了。

如果还没有设置好瓦片图层，可以参考GeoServer入门（二）：WMTS图层瓦片切割与调用来设置自己的瓦片服务器。

2. 添加WMTS瓦片图层

（1）使用键值对参数方式访问WMTS瓦片

键值对访问方式是最为简单的一种访问方式，以GeoServer为例，使用键值对访问时只需要按照服务器的要求填充相应的参数即可。

  从源码中看到，默认情况下除了设置url=http://localhost:8080/geoserver/gwc/service/wmts外，还需设置layer、style、tileMatrixSetID和format共4个参数。此处的源码有一个特殊的内部参数tilematrix，也就是瓦片矩阵的名字。

 

  这个内部参数在定义了tileMatrixLabels参数的情况下等于tileMatrixLabels参数的值，也就是自定义的瓦片矩阵的名字；在没有设置tileMatrixLabels参数的情况下等于缩放级别的数字值。

之所以要在这里提出这个tileMatrixLabels参数，是因为GeoServer在缓冲切分瓦片时对每一个缩放级别的存储目录没有使用相应的数字，而使用了网格+级别的方式来命名，如“EPSG:9100913:10”表示的是使用“EPSG:9100913”网格切分的第10级瓦片。

因此，如果想要使用键值对方式访问GeoServer发布的瓦片图层，除了url之个还需要设置至少5个访问参数，主要代码如下：

    <script>
      let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url : 'http://localhost:8080/geoserver/gwc/service/wmts',
        layer : 'pucheng:satellite',
        style : 'raster',
        format : 'image/png',
        tileMatrixSetID : 'EPSG:900913',
        tileMatrixLabels : ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18']
      });

    viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(109.637, 34.966, 100000),
        oridntation : {
            heading : Cesium.Math.toRadians(0.0),
            putch : Cesium.Math.toRadians(-25.0),
            roll : 0.0
        }
    });
    </script>

通过“Web开发者工具”可以查看到确实请求到了WMTS瓦片图像。

（2）使用RESTful方式访问WMTS瓦片

RESTful访问方式的访问其实是使用参数模板将一些参数替换到了URL里。根据GeoServer入门（二）：WMTS图层瓦片切割与调用中提出的查GeoServer服务能力的方法，可以将url设置为以下形式：

url='/map/gwc/service/wmts/rest/pucheng:satellite/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png'

通过查询函数源码可知，在瓦片提供者类构造之时会用style和tileMatrixSetID替换url模板中的占位符：

 

 在请求瓦片图像的requestImage函数中会用tileMatrix、tileRow和tileCol三个参数替换模板中的占位符。

 

 与键值对访问方式一样，RESTful方式还需要设置tileMatrixLabels的值，以使得在GeoServer服务器中能够找到正确的瓦片缓冲。

因此，如果想要使用RESTful方式访问GeoServer发布的瓦片图层，除了url之个还需要设置style、tileMatrixSetID、tileMatrixLabels至少3个访问参数。少了layer和format两个参数的原因是这两个参数已经在url中指定过了。主要代码如下：

    <script>
      let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url : 'http://localhost:8080/geoserver/gwc/service/wmts/rest/pucheng:satellite/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        style : 'raster',
        tileMatrixSetID : 'EPSG:900913',
        tileMatrixLabels : ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18']
      });

    viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(109.637, 34.966, 100000),
        oridntation : {
            heading : Cesium.Math.toRadians(0.0),
            putch : Cesium.Math.toRadians(-25.0),
            roll : 0.0
        }
    });
    </script>

（3）GeoServer WMTS服务专用RESTful访问方式

仔细分析GeoServer服务器中GeoWebCache瓦片缓冲文件夹的命名方式，组合内部变量tileMatrix的默认值，可以通过修改url模板的方式构造出符合GeoServer WMTS要求的请求字符串，将url设置为以下形式：

url='/map/gwc/service/wmts/rest/pucheng:satellite/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png'

在这个url中，只是将{TileMatrix}替换成了{TileMatrixSet}:{TileMatrix}，但是却可以再也不用重新定义冗长的tileMatrixLabels了，精减后的主要代码如下：

    <script>
      let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url : 'http://localhost:8080/geoserver/gwc/service/wmts/rest/pucheng:satellite/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        style : 'raster',
        tileMatrixSetID : 'EPSG:900913'
      });

    viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(109.637, 34.966, 100000),
        oridntation : {
            heading : Cesium.Math.toRadians(0.0),
            putch : Cesium.Math.toRadians(-25.0),
            roll : 0.0
        }
    });
    </script>

精减后的代码除了必须设置的url之外，就只剩下了style和tileMatrixSetID 这2个参数了，是不是一下子感觉清静了很多。