高德地图调用天地图 WMTS 服务

项目里原本用到高德地图的卫星图，但是放大到最小时，有些区域会显示“该区域没有卫星图”，这肯定不行，客户那里也说不过去，最后发现天地图的卫星图是可以的，但是整个项目已经写完了，用到地图的地方也多，换地图重写不现实，时间不够了，最后研究了一下，发现高德地图可以使用第三方图层，而天地图正好提供这种服务，所以，一通操作完美解决。因为两个地图提供的示例是没办法正正好成功的，所以，记录一下写法，下次可以少走弯

yb305小白

6135人浏览 · 2021-06-30 10:39:01

yb305小白 · 2021-06-30 10:39:01 发布

一.地图服务API
高德地图
第三方标准图层

AMap.TileLayer.WMTS

天地图
地图服务

二、使用步骤
        1.使用高德地图
        2.申请天地图地图服务Key
        高德示例

var wms  = new AMap.TileLayer.WMTS({
     url: 'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',        
     blend:false,
     tileSize:256,
     params:{
	     'Layer': '0',
	     Version:'1.0.0',
	     Format: 'image/png'
   	 }
})
wms.setMap(map);

天地图示例

（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=您的密钥

最终使用示例

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>TileLayer.WMTS</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        center: [102.076705,38.383963]
    });

    var wms = new AMap.TileLayer.WMTS({
        url: 'http://t4.tianditu.gov.cn/img_w/wmts',
        blend: false,
        tileSize: 256,
        params: {
            Layer: 'img',
            Version: '1.0.0',
            Format: 'tiles',
            TileMatrixSet: 'w',
            STYLE:'default',
            tk:'天地图的key'
        }
    });

    wms.setMap(map);

</script>
</body>
</html>

三、示例解析
1.tk
成功调用服务的关键就在于 params 的参数设置，我用到的是
影像底图（球面墨卡托投影）
http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥
按照这个示例，很容易在调用时将 tk 写在URL后面，这样是不行的
必须将tk 作为 params 的参数来调用才行

四、高德地图卫星路网地图效果