SuperMap iClient3D for WebGL 如何加载WMTS服务
在 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 对应值为 3contextType: 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>