SuperMap iClient3D for WebGL 如何加载WMTS服务

supermapsupport

已于 2025-04-18 16:57:59 修改

阅读量759

点赞数 6

文章标签： webgl

于 2025-04-18 16:24:18 首次发布

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/147294870

版权

在 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>