Leaflet调用腾讯地图

leaflet是不能直接调用腾讯地图的，原因是因为腾讯地图的瓦片图规则和谷歌之类的不一样，具体的差异可参见这篇文章：腾讯与百度地图瓦片规则分析。如果要在leaflet中使用腾讯地图或者任何规则不统一的地图做底图，必须专门对L.TileLayer写一个扩展才能实现，重写getTileUrl函数。

默认的getTileUrl方法是这样的，比较简单：

getTileUrl: function (tilePoint) {
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
z: tilePoint.z,
x: tilePoint.x,
y: tilePoint.y
}, this.options));
},

我修改成了这样，，主要是多执行一个通过选项传入的自定义函数getUrlArgs，计算出不规则的瓦片x,y,z值：

L.TileLayer.WebDogTileLayer = L.TileLayer.extend({
getTileUrl: function (tilePoint) {
var urlArgs,
getUrlArgs = this.options.getUrlArgs;

if (getUrlArgs) {
var urlArgs = getUrlArgs(tilePoint);
} else {
urlArgs = {
z: tilePoint.z,
x: tilePoint.x,
y: tilePoint.y
};
}

return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}));
}
});

L.tileLayer.webdogTileLayer = function (url, options) {
return new L.TileLayer.WebDogTileLayer(url, options);
};

扩展完成后，通过如下的方式调用就可以了。

var url = ',
options = {
subdomain: '012',
getUrlArgs: function (tilePoint) {
return {
z: tilePoint.z,
x: tilePoint.x,
y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y
};
}
};
L.tileLayer.webdogTileLayer(url, options).addTo(this);

http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0这个url是腾讯默认的地图url地址模版。其他腾讯地图的底图样式在还是挺丰富了美观，这也是我为什么选用腾讯地图的原因，如果想调用其他样式的底图，则需要使用下面这些url:
地形图：http://p{s}.map.gtimg.com/demTiles/{z}/{x16}/{y16}/{x}_{y}.jpg

卫星图：http://p{s}.map.gtimg.com/sateTiles/{z}/{x16}/{y16}/{x}_{y}.jpg

如果你需要在地形图或卫星图上同时显示街道，你需要同时添加两个底图图层（TileLayer），一个是上面的地形图或卫星图，另外一个是一种png格式的只包含道路和文字透明底图：http://rt{s}.map.gtimg.com/realtimerender/?z={z}&x={x}&y={y}&type=vector&style=1&v=1.1.1，把这两种底图叠加，就形成了带街道的地形或卫星图。

除此之外，，Leaflet.FunctionalTileLayer 这个插件也可以实现这种功能，原理都是差不多了，当然我这个要简介一些。

最后实现的效果如下：