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 这个插件也可以实现这种功能，原理都是差不多了，当然我这个要简介一些。

    最后实现的效果如下：

Leaflet调用腾讯地图

标签：

原文地址：http://my.oschina.net/zhajiang/blog/424157