SuperMap iClient for OpenLayers如何加载地方坐标系的WMTS服务

原创已于 2025-01-03 15:02:26 修改 · 1.6k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-12-28 17:30:09 首次发布

前言

WMTS（Web Map Tile Service）是一种用于在Web上展示地图的服务协议。与WMS不同，WMTS将地图瓦片（tiles）预先生成并存储在服务器上，客户端通过请求特定瓦片来获取地图数据。此外，WMTS服务还支持缓存机制，使得相同的瓦片可以从缓存中获取，进一步提高了地图的加载速度和性能，适用于需要快速加载大量地图数据的业务场景，如在线地图应用、导航应用等。

WMTS服务可以使用不同的地图投影和坐标系，在实际业务场景中，我们经常用到地方坐标系的数据，接下来将以OpenLayers为例，介绍如何在前端加载iServer发布的地方坐标系WMTS服务。

一、获取WMTS服务的参数信息

首先我们需要获取加载WMTS服务所用到的参数信息：

<Layer>：WMTS服务中的图层标识符，用于标识某个图层，以便在前端进行引用。

<ows:BoundingBox>：定义了图层的空间范围，即图层覆盖的区域。包含了图层覆盖区域的左下角和右上角坐标信息，以及使用的坐标系统。

<TileMatrixSet>：表示瓦片矩阵集。

<ows:Identifier>：瓦片矩阵的唯一标识符，以便在前端进行引用。

<Resolution>：瓦片矩阵的分辨率，表示每个像素对应的地理距离。通常情况下，分辨率是按照从低到高的顺序排列的，也就是分辨率从大到小。

这些参数用于描述WMTS服务中的图层信息和瓦片矩阵。其中，Layer和BoundingBox用于确定图层以及图层的范围和空间参考信息；TileMatrix和Resolution用于确定瓦片的大小和细节。

二、获取地方坐标系参数

SuperMap iClient for OpenLayers 通过设置 map 中 view 属性的 projection 参数来支持多投影，通过 ol.proj.Projection 类设置自定义投影参数，例如：

var swissProjection = new ol.proj.Projection({
    code: 'EPSG:21781',
    extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
    units: 'm'
});
ol.proj.addProjection(swissProjection);
var map = new ol.Map({
    view: new ol.View({
        projection: swissProjection
    });
});

其中投影的extent可以从该网址获取：https://epsg.io/ ，例如4548坐标系的投影参数如下：

三、前端代码实现

// 定义瓦片的分辨率数组
var resolutions = [739.3403004114322, 369.6701502057161, 184.83507510285804, 92.41753755142902, 46.20876877571451, 23.104384387857255];

// 定义瓦片矩阵的数组
var matrixIds = new Array(6);
for (var z = 0; z < 6; ++z) {
    matrixIds[z] = z;
}

// 定义地方坐标系投影
var swissProjection = new ol.proj.Projection({
    code: 'EPSG:4548',
    extent: [345754.3, 2500241.09, 654245.7, 5528578.96],
    units: 'm'
});

// 将自定义投影添加到投影列表中
ol.proj.addProjection(swissProjection);

// 创建地图对象
var map = new ol.Map({
    target: 'map',
    // 设置控件
    controls: ol.control.defaults({ attributionOptions: { collapsed: false } })
        .extend([new ol.supermap.control.Logo({ link: "https://iclient.supermap.io" })]),
    // 设置地图视图
    view: new ol.View({
        // 设置中心点坐标和缩放级别
        center: [453729.63, 4457960.62],
        zoom: 5,
        // 设置投影为自定义投影
        projection: swissProjection
    }),
    // 设置地图图层
    layers: [new ol.layer.Tile({
        opacity: 1,
        source: new ol.source.WMTS({
            // 设置WMTS服务的URL
            url: "http://localhost:8090/iserver/services/map-ugcv5-Beijingdem30m4548beijing2/wmts100",
            // 设置WMTS服务的图层名称
            layer: 'Beijing_dem30m_4548@beijing',
            // 设置WMTS服务的瓦片集合名称
            matrixSet: 'Custom_Beijing_dem30m_4548@beijing',
            // 设置瓦片的格式
            format: 'image/png',
            // 设置瓦片的网格参数
            tileGrid: new ol.tilegrid.WMTS({
                // 设置瓦片原点坐标
                origin: [363709.5250563107, 4548336.8347878335],
                // 设置瓦片范围
                extent: [363709.5250563107, 4367584.409749237, 543749.7387204398, 4548336.8347878335],
                // 设置瓦片分辨率数组
                resolutions: resolutions,
                // 设置瓦片矩阵ID数组
                matrixIds: matrixIds
            }),
            // 设置瓦片的样式
            style: 'default',
        })
    })]
});

其中瓦片的原点坐标origin和范围extent均从WMTS服务<ows:BoundingBox>参数中获取。

前端OpenLayers加载4548坐标系WMTS服务效果展示：