Leaflet调用腾讯地图
Leaflet调用腾讯地图
炸酱面 发表于3年前
Leaflet调用腾讯地图
  • 发表于 3年前
  • 阅读 5762
  • 收藏 7
  • 点赞 1
  • 评论 8

移动开发云端新模式探索实践 >>>   

摘要: leaflet无法直接调用腾讯地图,原因是因为腾讯地图的瓦片图规则和谷歌之类的不一样,如果要在leaflet中使用腾讯地图或者任何规则不统一的地图做底图,必须专门对L.TileLayer写一个扩展才能实现,重写getTileUrl函数。

    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 腾讯地图
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
炸酱面
粉丝 29
博文 10
码字总数 6815
评论 (8)
可乐火烧
crownWHU
您好,请问leaflet是只支持google地图规则的url吗?
kenneth_hu
请问有完整的sample code吗? 我照这做不行耶.
"Uncaught Error: No value provided for variable {x16}"
有人做出吗?
炸酱面

引用来自“crownWHU”的评论

您好,请问leaflet是只支持google地图规则的url吗?
你是指URL?
炸酱面

引用来自“kenneth_hu”的评论

请问有完整的sample code吗? 我照这做不行耶.
"Uncaught Error: No value provided for variable {x16}"
有人做出吗?
www.webdog.cn去调试一下就知道了
kenneth_hu

引用来自“kenneth_hu”的评论

请问有完整的sample code吗? 我照这做不行耶.
"Uncaught Error: No value provided for variable {x16}"
有人做出吗?

引用来自“炸酱面”的评论

www.webdog.cn去调试一下就知道了
Thanks I solve that
咯咯咯

引用来自“kenneth_hu”的评论

请问有完整的sample code吗? 我照这做不行耶.
"Uncaught Error: No value provided for variable {x16}"
有人做出吗?

引用来自“炸酱面”的评论

www.webdog.cn去调试一下就知道了

引用来自“kenneth_hu”的评论

Thanks I solve that
请问修改哪里啊,为什么提示加载资源错误呢?
Failed to load resource: the server responded with a status of 502 (Bad Gateway)
ggiser
毕业回成都了,openlayers换leaflet了,看你文章学了很多
×
炸酱面
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: