天地图地图服务采用OGC的WMTS标准，使用Openlayers可以很方便的对天地图的图层进行叠加，天地图地图服务对所有用户开放。用户只需注册一个账号，申请一个key就可以使用天地图提供的服务地址了。天地图提供的服务列表主要包括矢量底图，矢量注记，影像底图，影像注记，地形晕渲，地形注记，全球境界，矢量英文注记，影像英文注记，三维地名，三维地形等。投影包括经纬度投影和球面墨卡托投影。请求方式主要包括地图瓦片和元数据两种，下面分别介绍下这两种请求方式。

1.地图瓦片

地图瓦片加载方式，主要是使用ol.source.XYZ作为数据源，加载到ol.layer.Tile图层上。天地图瓦片请求的地址如下所示：

http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥

请求图层的相关代码如下所示：

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { get as getProjection } from 'ol/proj';

static createTDTLayer(url, options) {
        const epsg = 'EPSG:4326';
        const projection = getProjection(epsg);
        const source = new XYZ({
            url,
            projection,
            ...options,
        });
        const layer = new TileLayer({
            source,
        });
        return layer;
    }

请求的数据如果是用的是经纬度投影，在实例化source的时候，需要设置投影类型。

2.元数据加载

天地图除了使用瓦片进行加载外，还提供了WMTS的加载方式，具体的加载代码如下所示：

import TileLayer from 'ol/layer/Tile';
import { get as getProjection } from 'ol/proj';
import WMTS from 'ol/source/WMTS';
import { get as getProjection } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
static createTdtWMTSLayer() {
        const epsg = 'EPSG:4326';
        const projection = getProjection(epsg);
        const projectionExtent = projection.getExtent();
        const size = getWidth(projectionExtent) / 256;
        const length = 19;
        const resolutions = new Array(length);
        const matrixIds = new Array(length);
        for (let i = 0; i < length; i += 1) {
            const pow = Math.pow(2, i);
            resolutions[i] = size / pow;
            matrixIds[i] = i;
        }
        const source = new WMTS({
            url: 'http://t3.tianditu.com/img_c/wmts?tk=申请的key',
            layer: 'img',
            style: 'default',
            matrixSet: 'c',
            format: 'tiles',
            wrapX: true,
            tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions,
                matrixIds,
            }),
        });
        const layer = new TileLayer({
            source,
        });
        return layer;
    }

个人博客