openlayer3 系列 4 - 加载天地图

1.天地图官网

http://www.tianditu.gov.cn/

2.申请key

http://lbs.tianditu.gov.cn/authorization/authorization.html#example

3.调用

4.天地图服务

矢量底图	http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥	球面墨卡托投影
矢量注记	http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密钥	球面墨卡托投影
影像底图	http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥	球面墨卡托投影
影像注记	http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密钥	球面墨卡托投影
地形底图	http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密钥	球面墨卡托投影
地形注记	http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密钥	球面墨卡托投影
境界（省级以上）	http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密钥	球面墨卡托投影
矢量英文注记	http://t0.tianditu.gov.cn/eva_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/eva_w/wmts?tk=您的密钥	球面墨卡托投影
影像英文注记	http://t0.tianditu.gov.cn/eia_c/wmts?tk=您的密钥	经纬度投影
	http://t0.tianditu.gov.cn/eia_w/wmts?tk=您的密钥	球面墨卡托投影

*天地图地图服务二级域名包括t0-t7，您可以随机选择使用，如http://t2.tianditu.gov.cn/vec_c/wmts?tk=您的密钥

（1）元数据查询

http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts

（2）地图瓦片获取

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

5.openlayer调用天地图方法

openlayers中，图层(layer)不可缺少的组成部分是数据源(source)，天地图是切片的数据服务，对应的图层是ol.layer.Tile，下图是其数据源对应的类结构图，红色部分是重点内容。

从图可以看到，加载天地图的数据源，可以是ol.source.WMTS（简称WMTS） 和 ol.source.XYZ（简称XYZ）。下面首先以实际的代码对分别使用WMTS和XYZ的方式加载天地图进行说明，然后总结他们的区别。

5.1使用wmts

//创建图层(WMTS方式)
    function crtLayerWMTS(type, proj, opacity){
        var projection = ol.proj.get(proj);
        var projectionExtent = projection.getExtent();
        var size = ol.extent.getWidth(projectionExtent) / 256;
        var resolutions = new Array(19);
        var matrixIds = new Array(19);
        for (var z = 1; z < 19; ++z) {
            // generate resolutions and matrixIds arrays for this WMTS
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = z;
        }
 
        var layer = new ol.layer.Tile({
            opacity: opacity,
            source: new ol.source.WMTS({
              attributions: 'Tiles © 天地图',
              url: 'http://t'+Math.round(Math.random()*7)+'.tianditu.com/'+type+'/wmts',
              layer: type.substr(0, 3),
              matrixSet: type.substring(4),
              format: 'tiles',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              }),
              style: 'default',
              wrapX: true
            })
          });
        layer.id = type;
        return layer;
    }

5.2使用xyz方法

//创建图层(xyz方式)
    function crtLayerXYZ(type, proj, opacity){
       var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t'+Math.round(Math.random()*7)+'.tianditu.com/DataServer?T='+type+'&x={x}&y={y}&l={z}',
                projection: proj
            }),
            opacity: opacity
        });
        layer.id = type;
        return layer;
    }

5.3、WMTS与XYZ方式比较
相同点：（1）不管采用哪种方式，显示的效果是一致的； （2）加载地图的类型参数应与投影参数保持一致。

不同点：（1）WMTS使用的数据源类型为ol.source.WMTS，XYZ方式使用的数据源类型为ol.source.XYZ；

             （2）WMTS方式遵从标准的OGC规范，需要计算、指定分辨率、显示级别等，根据WMTS服务加载的标准规范加载天地图，XYZ方式只需根据天地图规定组装简单的url即可；

              （3）实际使用中，难度上WMTS更繁琐，效率上XYZ更优。

结论：推荐使用XYZ的方式加载天地图服务

5.4 注意点

（1）天地图有7个服务节点，代码中没有固定使用哪个节点的服务，而是使用 Math.round(Math.random()*7)的方式随机决定从哪个节点请求服务，避免指定节点因故障等原因停止服务的风险。

（2）天地图服务分经纬度和墨卡托投影两种类型，所以url中地图类型的投影方式应与参数 projection中保持一致(EPSG4326或EPSG3857)。

（3）天地图切片服务共有18级，在计算分辨率时，最大计算到18级；经实验发现，若指定到19或更高级别，放大到对应级别后，地图出现空白。

（4）WMTS方式加载的参数中，layer、matrixSet的可取值见下面【天地图地图类型及url】，format的取值固定为tiles, style参数为天地图服务默认的'style'。