openlayers 使用WMTS和XYZ加载天地图切片服务

本篇介绍一下使用openlayers加载天地图切片，两种方法：

使用WMTS
使用XYZ

1 需求

openlayers加载天地图

2 分析

主要是不同类型source的使用

WMTS（Web Map Tile Service）是 OGC（Open Geospatial Consortium）标准，用于提供预渲染的地图切片。
XYZ切片是一种在线地图数据格式，由goole公司开发，将地图数据分解为一系列小的图像块，以提高地图显示效率和性能。
WMTS 和 XYZ 的主要区别在于，WMTS 提供了更多的元数据和配置选项（如投影、分辨率、矩阵集等），而 XYZ 通常更简单，只需要一个 URL 模板即可。
天地图同时提供 WMTS 和 XYZ（或其他格式）的服务

3 实现

3.1 WMTS

<template><div id="map" class="map"></div>
</template><script setup lang="ts">import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent';
import { WMTS } from 'ol/source';
import WMTSTileGrid from 'ol/tilegrid/WMTS';const projection = get('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 2; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);
}const layerTypeMap = {vector: ['vec', 'cva'], // [矢量底图, 矢量注记]image: ['img', 'cia'], // [影像底图, 影像注记]terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]};
const matrixIds= ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14']const map = ref();onMounted(() => {initMap('image');
});const initMap = (layerType = 'image') => {const key = '换成申请的天地图key';const matrixSet = 'c';// c: 经纬度投影 w: 墨卡托投影map.value = new Map({target: 'map',layers: [// 底图new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][0]}_${matrixSet}/wmts?tk=${key}`,layer: layerTypeMap[layerType][0],matrixSet: matrixSet,style: 'default',crossOrigin: 'anonymous', format: 'tiles',wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds:matrixIds})})}),// 注记new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][1]}_${matrixSet}/wmts?tk=${key}`,layer: layerTypeMap[layerType][1],matrixSet: matrixSet,style: 'default',crossOrigin: 'anonymous', format: 'tiles',wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds})})}),],view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5,maxZoom: 17,minZoom: 1})});
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;
}
</style>

3.2 XYZ


<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { XYZ } from 'ol/source';const projection = get('EPSG:4326');const layerTypeMap = {vector: ['vec', 'cva'], // [矢量底图, 矢量注记]image: ['img', 'cia'], // [影像底图, 影像注记]terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};const map = ref();onMounted(() => {initMap('image');
});const initMap = (layerType = 'image') => {const key = '换成申请的天地图key';// c: 经纬度投影 w: 墨卡托投影const matrixSet = 'c';map.value = new Map({target: 'map',layers: [// 底图new TileLayer({source: new XYZ({url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,projection,})}),// 注记new TileLayer({source: new XYZ({url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,projection,})})],view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5,maxZoom: 17,minZoom: 1})});
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;
}
</style>

4 WMTS和XYZ区别

WMTS（Web Map Tile Service）和XYZ作为地图瓦片服务的两种不同方式，在多个方面存在显著的差异。以下是它们之间的主要不同点：

4.1 标准化与自定义：

WMTS：是一种由Open Geospatial Consortium (OGC)制定的开放标准，它定义了在Web上发布和使用预渲染地图瓦片的标准方法。这种标准化确保了不同厂商和平台之间的互操作性。
XYZ：是一种更偏向于自定义的地图瓦片服务格式，通常用于OpenStreetMap和其他提供标准XYZ URL格式的地图服务。它没有像WMTS那样的严格标准，但提供了一种灵活的方式来提供地图瓦片。

4.2 数据提供方式：

WMTS：通过HTTP请求获取地图瓦片，通常提供详细的元数据和配置选项，如投影、分辨率、矩阵集等。这些选项允许开发人员更精细地控制地图的显示和性能。
XYZ：通常通过简单的URL模板（如https://t{0-7}.tiledata.plus/tiles/v1/mapnik/{z}/{x}/{y}.png）来提供地图瓦片，其中{z}、{x}和{y}分别代表缩放级别、列索引和行索引。这种方式更加简洁和直观。