踩坑日记:因高德地图无法对村镇进行边界图的绘制,故引入天地图作为补充以解决问题
一、首先是对坐标进行转换,因为高德地图是火星坐标,而天地图是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接口:
// 调用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);