腾讯地图加载详细说明 —— 以leaflet为例

深藏阁楼爱情的钟 2023-01-23 04:00 8阅读 0赞

如果你喜欢，欢迎转载，转载请注明出处：[https://blog.csdn.net/shaxiaozilove/article/details/118685919][https_blog.csdn.net_shaxiaozilove_article_details_118685919]

因腾讯地图的瓦片规则与谷歌不一致，导致Leaflet是不能直接调用腾讯地图，腾讯地图与谷歌地图具体的切片差异，可参考[腾讯与百度地图瓦片规则分析][Link 1]。若要使用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=""/>
       	
    	<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>

具体效果见博文展示封面，可将示例代码中的内容注释（取消注释）查看实际效果。

[https_blog.csdn.net_shaxiaozilove_article_details_118685919]: https://blog.csdn.net/shaxiaozilove/article/details/118685919
[Link 1]: http://blog.csdn.net/mygisforum/article/details/22997879