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}分别代表缩放级别、列索引和行索引。这种方式更加简洁和直观。