SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务

申请天地图开发者 token
读懂能力文档和 WMTS 接口参数
完整代码和加载效果
不能正常加载的情况
实用链接

作者：jjz

在GIS三维前端项目中，很多人有使用天地图 WMTS 服务作为底图的需求，但是超图 WebGL 中没有用到 WMTS 接口的示例，天地图的层级和其他 WMTS 服务也略有区别，常常导致加载错误。本文针对以上问题，提供在三维球上加载天地图地图瓦片服务的示例，并详细阐释加载 WMTS 的注意事项，帮助大家在 Cesium 或者 WebGL 中正确加载天地图。

申请天地图开发者 token

这一部分已经在 iDesktop 加载天地图教程中详细说明，注意行业选择其他，应用类型选择浏览器端即可。包括验证服务url的可用性，以及不可用时的解决办法，也在这篇教程中。各位务必按照步骤进行检查，确保服务可用。

读懂能力文档和 WMTS 接口参数

1. WebGL 接口 API

首先提供接口的总体图片，如果图片看不清，下文有详细解释。橙色为必填，黄色为建议填写。其他内容请查看接口的 API 链接。

WMTS API

2. 天地图能力文档

这一部分的填写需要对照天地图能力文档，例如：
https://t0.tianditu.gov.cn/vec_c/wmts?service=wmts&tk=您的token&request=GetCapabilities
在这里插入图片描述

3. 对照能力文档填写 WMTS 参数

接口属性的详细说明如下：

url: 服务的地址
https://t0.tianditu.gov.cn/vec_c/wmts?service=wmts&tk=您的token
format: 瓦片的格式
对应能力文档中 Format 标签，此例中是 tiles。
layer: 图层名
对应 Layer 标签，此例中图层名为 vec。
style: 样式或者风格
对应 Style 标签，本例中是 default.
tileMatrixSetID: 瓦片集的唯一标识符
对应 TileMatrixSet 标签中的 Identifier，本例中是 c。
tileMatrixLabel: 层级的集合
对应 TileMatrix 中的 Identifier，一般重点查看开始层级，天地图中是1；大部分服务是从0开始，注意区别。

let matrixIds = [];
for (let i = 0; i < 19; i++) {
    
    
   // 此处天地图为 i + 1，因为开始层级为 1；开始层级为 0 的写 i 即可
   matrixIds[i] = i + 1; 
}

tilingScheme: 几何图形在椭球表面的平铺方式
以天地图为例，vec_c 服务的 EPSG 是4490，所以椭球体要设置为 CGCS2000，一般默认是 WGS1984 的椭球体，Cesium.Ellipsoid.CGCS2000 这个参数是超图WebGL自己定义的，原生 Cesium 没有。第零层的瓦片数量参考能力文档中 MatrixWidth 和 MatrixHeight 即可，宽是 X，长是 Y。

tilingScheme: new Cesium.GeographicTilingScheme({
    
    
   ellipsoid: Cesium.Ellipsoid.CGCS2000,
   numberOfLevelZeroTilesX: 2,
   numberOfLevelZeroTilesY: 1
})

示例的 vec_c 是地理坐标系的服务，所以用 GeographicTilingScheme，如果是 vec_w 这样的投影坐标系服务，需要用 WebMercatorTilingScheme，参数填写是一样的。

maximumLevel: 显示的最大层级
天地图服务最大层级为19，更大的级别没有图，如果不设置最大层级，到了20层后就加载不出来了。

完整代码和加载效果

这里贴上这个功能的完整代码

let viewer = new Cesium.Viewer('cesiumContainer');
let matrixIds = [];
for (let i = 0; i < 19; i++) {
    
    
   matrixIds[i] = i + 1;
}

let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    
    
   url: 'https://t0.tianditu.gov.cn/vec_c/wmts?service=wmts&tk=您的token',
   layer: 'vec',
   style: 'default',
   format: 'tiles',
   tileMatrixSetID: 'c',
   tileMatrixLabels: matrixIds,
   tilingScheme: new Cesium.GeographicTilingScheme({
    
    
      ellipsoid: Cesium.Ellipsoid.CGCS2000,
      numberOfLevelZeroTilesX: 2,
      numberOfLevelZeroTilesY: 1
   }),
});

let tdtLayer = viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
// 设置叠加天地图图层的透明度，方便观察偏移情况
tdtLayer.alpha = 0.5;