高德地图更换天地图底图（坐标转换）—使用高德API（WMTS）

踩坑日记：因高德地图无法对村镇进行边界图的绘制，故引入天地图作为补充以解决问题

一、首先是对坐标进行转换，因为高德地图是火星坐标，而天地图是wgs84墨卡托4490，所以必须进行如下转换

①先把高德地图经纬度转换为wgs84经纬度，这个库是gcoord.js，使用方法自行百度

var binzhou84 = gcoord.transform (
            [117.96484387440898, 37.38205313024871],
            gcoord.GCJ02,
            gcoord.WGS84,

②然后使用一个固定函数将wgs84经纬度转化为墨卡托4490，然后将返回的墨卡托4490对象，使用高德地图初始化时赋值给center

function lonlat2mercator(a,b) {
            var mercator = {
              x: 0,
              y: 0
            };
              var x = a * 20037508.34 / 180;
              var y = Math.log(Math.tan((90 + b) * Math.PI / 360)) / (Math.PI / 180);
              y = y * 20037508.34 / 180;
              mercator.x = x;
              mercator.y = y;
              return mercator;
          }

二、其次是使用高德地图API（WMTS）进行底图的更换

高德地图的API文档中并没有具体使用方法，以下是针对天地图的使用方法

因为天地图的原因，所以请求的链接只能使用墨卡托类型的（见下图红色箭头）

下述链接为天地图API接口：

天地图API

 

// 调用wmts服务更换目标底图
          var wms  = new AMap.TileLayer.WMTS({
            url: 'http://t0.tianditu.gov.cn/vec_w/wmts',
            blend: false,
            tileSize: 256,
            params: {
              SERVICE:'WMTS',
              VERSION:'1.0.0',
              REQUEST:'GetTile',
              LAYER:'vec',
              STYLE:'default',
              TILEMATRIXSET:'w',
              FORMAT:'tiles',
              tk:'26ed1e9f78431ad1a6d6b99d82acc5f6'
// 注意参数中的LAYER:'vec'和TILEMATRIXSET:'w',这两个要与链接中的vec_w对应
            }
          })
          wms.setMap(this.map);