在 SuperMap iClient3D for WebGL 中加载WMTS服务时，参数配置很关键！下面我们详细介绍如何正确填写参数，确保影像服务完美加载。
一、数据制作
对于上述视频中的地图制作，此处不做讲述，如有需要可访问：Online 开发者中心
可视化案例中提供了详细的代码、数据下载链接及数据制作过程。
二、相关参数对应详解
三、相关参数说明
| 参数 | 值 | 说明 |
| url | ’http://localhost:8090/iserver/services/map-HeNan/wmts100‘ | WMTS服务的URL地址，指向本地iServer发布的河南省地图服务 |
| layer | '河南省地形图' | WMTS服务中要加载的图层名称 |
| style | 'default' | 图层的样式，通常使用默认样式 |
| format | 'image/png' | 瓦片图像的格式，这里使用PNG格式 |
| tileMatrixSetID | 'CUSTOM_河南省地形图' | 瓦片矩阵集的ID，标识特定的瓦片切割方案 |
| tileMatrixLabels | ['0', '1', '2', '3'] | 瓦片矩阵级别的标签，对应不同的缩放级别 |
| tilingScheme | SuperMap3D.GeographicTilingScheme对象 | 定义瓦片切割方案的地理参考系统 |
| numberOfLevelZeroTilesX | 3 | 零级(最顶层)X方向的瓦片数量 |
| numberOfLevelZeroTilesY | 2 | 零级(最顶层)Y方向的瓦片数量 |
| ellipsoid | SuperMap3D.Ellipsoid.CGCS2000 | 使用CGCS2000椭球体(中国大地坐标系2000) |
| rectangle | SuperMap3D.Rectangle.fromDegrees(...) | 定义地图范围的矩形区域(经度110.19°-116.81°，纬度31.25°-36.51°) |
| scaleDenominators | [4367830.187724358, ...] | 各级别的比例尺分母，用于计算地图比例尺 |
| customDPI | SuperMap3D.Cartesian2(90.714..., 90.714...) | 自定义DPI(每英寸点数)设置，X和Y方向的值 |
四、示例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加载 WMTS 服务</title>
<link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/spectrum.js"></script>
<script src="./js/config.js"></script>
<script src="./js/tooltip.js"></script>
<script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>
<body>
<div id="Container"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<script>
// 页面加载完成后执行的函数，初始化 SuperMap3D 地图
function onload(SuperMap3D) {
// 通过 config.js 中的 getEngineType 函数，获取引擎类型（EngineType），用于设置启动方式
let EngineType = getEngineType();
// 创建一个 SuperMap3D 的 Viewer 实例，将其显示在 id 为 'Container' 的容器中
let viewer = new SuperMap3D.Viewer('Container', {
contextOptions: {
// 设置 WebGL 上下文类型，Webgl2 对应值为 2，WebGPU 对应值为 3
contextType: Number(EngineType),
}
});
// 当场景加载完成后，调用 init 函数进行初始化操作
viewer.scenePromise.then(function (scene) {
init(SuperMap3D, scene, viewer);
});
}
// 初始化地图场景的函数
function init(SuperMap3D, scene, viewer) {
// 设置地图的分辨率比例，根据设备的像素比进行调整
viewer.resolutionScale = window.devicePixelRatio;
$('#loadingbar').remove();
// 添加 WMTS 服务
let HeNanWMTS = viewer.imageryLayers.addImageryProvider(new SuperMap3D.WebMapTileServiceImageryProvider({
url: 'http://localhost:8090/iserver/services/map-HeNan/wmts100',
layer: '河南省地形图',
style: 'default',
format: "image/png",
tileMatrixSetID: "CUSTOM_河南省地形图",
tileMatrixLabels: ['0', '1', '2', '3'],
tilingScheme: new SuperMap3D.GeographicTilingScheme({
numberOfLevelZeroTilesX: 3,
numberOfLevelZeroTilesY: 2,
ellipsoid: SuperMap3D.Ellipsoid.CGCS2000,
rectangle: SuperMap3D.Rectangle.fromDegrees(110.19027419392319, 31.249054325714976, 116.8093213381059, 36.50948320842994),
scaleDenominators: [4367830.187724358, 2183915.093862179, 1091957.5469310896, 545978.7734655448],
customDPI: new SuperMap3D.Cartesian2(90.7142857142857, 90.7142857142857),
}),
}));
viewer.flyTo(HeNanWMTS);
}
// 检查 SuperMap3D 是否已经定义，如果已经定义则调用 onload 函数进行初始化
if (typeof SuperMap3D !== 'undefined') {
onload(SuperMap3D);
}
</script>
</body>
</html>
