腾讯地图加载详细说明 —— 以leaflet为例
| 公众号：YouGIS顽石(yougis) | 关注WX号 YouGIS顽石 获取更多经常内容 |
| 主页：yougis.com.cn | |
| 工具：Web空间工具 |
如果你喜欢，欢迎转载，转载请注明出处：leaflet 加载腾讯栅格瓦片-CSDN博客
Leaflet加载腾讯地图开发示例(load-tecent-map.html)
因腾讯地图的瓦片规则与谷歌不一致，导致Leaflet是不能直接调用腾讯地图，腾讯地图与谷歌地图具体的切片差异，可参考腾讯与百度地图瓦片规则分析。若要使用Leaflet加载腾讯地图或其他任何规则不统一的地图做底图，首先需要搞懂具体的切片规则，然后需专门对L.TileLayer写一个扩展来实现实现，主要是重写getTileUrl函数。
下面以实际代码（代码可直接保存为html文件并在浏览器中访问，可根据需要加载不同类型的地图，示例中默认加载地形图）来说明Leaflet中加载腾讯地图的扩展类实现，以及getTileUrl的逻辑。
<!DOCTYPE html> <html> <head> <title>加载腾讯地图</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <!-- Make sure you put this AFTER Leaflet's CSS --> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> <style type="text/css"> html, body { height: 100%; width: 100%; } #mapid { height: 100%; width: 100%; } </style> </head> <body> <div id="mapid"></div> <script type="text/javascript"> var map = L.map('mapid').setView([30, 120], 5); 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 options = { subdomains: '012', getUrlArgs: function (tilePoint) { return { z: tilePoint.z, x: tilePoint.x, y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y, x16: Math.floor(tilePoint.x / 16.0), y16: Math.floor((Math.pow(2, tilePoint.z) - 1 - tilePoint.y) / 16.0) }; } }; // 矢量底图服务 // var url = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0', //地形图url // http://p{s}.map.gtimg.com/demTiles/{z}/{x16}/{y16}/{x}_{y}.jpg // 地形图标注服务（道路及poi） // https://rt3.map.gtimg.com/tile?z=12&x=3353&y=2414&type=vector&styleid=3&version=376 // var url = 'http://rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={y}&type=vector&styleid=3&version=376', //卫星图url // http://p{s}.map.gtimg.com/sateTiles/{z}/{x16}/{y16}/{x}_{y}.jpg // 地形图标注服务（道路及poi） // https://rt3.map.gtimg.com/tile?z=12&x=3348&y=2411&styleid=2&version=376 // var url = 'http://rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={y}&styleid=2&version=376', //加载矢量底图 // L.tileLayer.webdogTileLayer('http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0', options).addTo(map); //加载地形图 L.tileLayer.webdogTileLayer('http://p{s}.map.gtimg.com/demTiles/{z}/{x16}/{y16}/{x}_{y}.jpg', options).addTo(map); L.tileLayer.webdogTileLayer('http://rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={y}&type=vector&styleid=3&version=376', options).addTo(map); // //加载影像图 // L.tileLayer.webdogTileLayer('http://p{s}.map.gtimg.com/sateTiles/{z}/{x16}/{y16}/{x}_{y}.jpg', options).addTo(map); // L.tileLayer.webdogTileLayer('http://rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={y}&styleid=2&version=376', options).addTo(map); </script> </body> </html>具体效果见博文展示封面，可将示例代码中的内容注释（取消注释）查看实际效果。