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

最新推荐文章于 2024-05-15 14:39:00 发布

顽劣的石头

最新推荐文章于 2024-05-15 14:39:00 发布

阅读量2.2k

点赞数 2

本文链接：https://blog.csdn.net/shaxiaozilove/article/details/118685919

版权

WebGIS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

leaflet

3 篇文章 0 订阅

订阅专栏

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

因腾讯地图的瓦片规则与谷歌不一致，导致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>

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

顽劣的石头

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
腾讯地图加载详细说明 —— 以leaflet为例

如果你喜欢，欢迎转载，转载请注明出处：https://blog.csdn.net/shaxiaozilove/article/details/116902637因腾讯地图的瓦片规则与谷歌不一致，导致Leaflet是不能直接调用腾讯地图，腾讯地图与谷歌地图具体的切片差异，可参考腾讯与百度地图瓦片规则分析。若要使用Leaflet加载腾讯地图或其他任何规则不统一的地图做底图，首先需要搞懂具体的切片规则，然后需专门对L.TileLayer写一个扩展来实现实现，主要是重写getTi...
复制链接

扫一扫