在
OpenLayers 中
加载 WMTS 服务作为图层，可以通过 `ol.source.
WMTS` 实现。
WMTS（Web Map Tile Service）是一种基于瓦片的
地图服务标准，允许客户端根据预定义的层级和比例尺
请求地图瓦片[^1]。
### 创建
WMTS 图层的基本步骤
首先需要获取
WMTS 服务的元数据信息，通常通过访问 `GetCapabilities` 接口获取 XML 格式的描述文档。该文档中包含了图层名称、矩阵集、比例尺分母等关键参数，这些信息用于构造正确的
WMTS 请求[^2]。
以下是一个基本的代码示例，展示如何使用
OpenLayers
加载一个
WMTS 图层：
```javascript
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {get as getProjection} from 'ol/proj';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
import
WMTS, {optionsFromCapabilities} from 'ol/source/
WMTS';
import TileLayer from 'ol/layer/Tile';
// 获取投影信息
const projection = getProjection('EPSG:4326');
const projectionExtent = projection.getExtent();
// 定义
分辨率数组（resolutions）和矩阵标识符（matrixIds）
const DPI = 90.7142857142857;
const inch = 0.0254;
const degree2MeterParams = 111319.49;
let resolutions = [];
let matrixIds = [];
for (let z = 0; z < options.scaleDenominators.length; ++z) {
const meter = options.scaleDenominators[z] * inch / DPI;
resolutions[z] = meter / degree2MeterParams;
matrixIds[z] = z;
}
// 构造
WMTS 数据源配置项
const
wmtsSource = new
WMTS({
url: 'https://your-
wmts-service-url',
layer: 'your-layer-name',
matrixSet: 'your-matrix-set',
format: 'image/png',
projection: projection,
tileGrid: new
WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
});
// 创建
WMTS 图层
const
wmtsLayer = new TileLayer({
source:
wmtsSource
});
// 初始化
地图
const map = new Map({
target: 'map',
layers: [
// 添加基础图层如 OSM
new TileLayer({
source: new XYZ({
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
}),
wmtsLayer
],
view: new View({
center: [0, 0],
zoom: 2,
projection: projection
})
});
```
### 自定义
WMTS 参数
某些
WMTS 图层在不同层级下具有自定义的比例尺信息，此时不能直接使用默认的
分辨率设置。必须根据 `ScaleDenominator` 计算出对应层级下的 `resolution` 值，并构造相应的 `matrixIds` 数组。
例如，天
地图提供的
WMTS 服务可以如下配置：
```javascript
new
WMTS({
url: 'http://t0.tianditu.cn/cva_c/
wmts?',
layer: 'cva',
matrixSet: 'c',
format: 'tiles',
style: 'default',
attributions: 'Tiles ©<a href="http://t0.tianditu.cn/cva_c/
wmts?LAYER=cva">天
地图矢量标记</a>'
})
```
此配置中，`url` 指向天
地图的
WMTS 服务地址，`layer` 和 `matrixSet` 分别指定图层名与矩阵集，`format` 表示瓦片格式，`attributions` 设置版权信息[^3]。
---
最低0.47元/天 解锁文章
扫一扫
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
