GIS基础二：GIS中的地图金字塔和瓦片地图

最新推荐文章于 2023-06-21 15:14:49 发布

愚者的旋律

最新推荐文章于 2023-06-21 15:14:49 发布

阅读量4.3k

点赞数 2

分类专栏： GIS 文章标签： html

本文链接：https://blog.csdn.net/qq_32202099/article/details/113239088

版权

GIS 专栏收录该内容

13 篇文章 16 订阅

订阅专栏

地图服务的诞生

地图数据通常体量较大，需要充足的带宽和数据渲染能力。地图服务诞生以前，地图多在局域网的桌面软件中使用。互联网的发展，催生了通过浏览器使用地图的需求，于是在1999年，出现了WMS（Web Map Service）这样的解决方案。在浏览器这一端，没有地图的概念，但浏览器天生就是为了显示文本和图片。WMS的设计是，在服务器端把地图渲染成图片，浏览器端显示地图图片。地图图片大小根据浏览器视窗大小来定。

地图金字塔

WMS大大推进了互联网地图的进程。问题是，WMS根据浏览器视窗大小每次生成一大张图片，对于后端渲染和网络传输都是挑战，效率低下。紧接着就有了地图金字塔的思想，地图金字塔是一种以多分辨率来解释图像的有效但概念简单的结构。应用于图像分割，和图像压缩。一幅图像的金字塔是一系列以金字塔形状排列的分辨率逐步降低，且来源于同一张原始图的图像集合。其通过梯次向下采样获得，直到达到某个终止条件才停止采样。金字塔的底部是待处理图像的高分辨率表示，而顶部是低分辨率的近似。我们将一层一层的图像比喻成金字塔，层级越高，则图像越小，分辨率越低。

Google地图采用的Web Mecator投影和瓦片分级切割方案，也成为目前互联网地图事实上的标准。

在这里插入图片描述

瓦片地图

使用瓦片地图时，我们看到的是一张铺满整个屏幕的大的地图图片。实际上，这张大的图片是多个尺寸相同（通常是256*256像素）的小图片按照既定规则无缝拼接而成的，这些小图片就是瓦片。瓦片按照如下图所示的地图金字塔结构组织，每张瓦片都可通过级别、行列号唯一标记。在平移地图、缩放地图时，浏览器根据金字塔规则，计算出所需的瓦片，从瓦片服务器获取并拼接。详细计算过程此处不再罗列，可以参考https://www.cnblogs.com/naaovegis/p/3899821.html

通过openlayer提供的ol.source.TileDebug类来加载瓦片编号，查看这一过程

在这里插入图片描述
可以参考代码：

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			
			<script type="text/javascript" src="../js/openalyers/v5.3.0-dist/ol.js" ></script>
			<link rel="stylesheet" href="../js/openalyers/v5.3.0-dist/ol.css" />
			<style type="text/css">
				.map{
				    position: relative;
				    height: 100%;
				    width: 100%;
				}
			</style>
		</head>
		<body>
			<!--地图主体-->
			<div id="map" class="map">
				
			</div>
		</body>
	<script type="text/javascript">
		// 地图统一坐标系，openlayers默认为EPSG:3857
		var projection = ol.proj.get('EPSG:3857');
		
		//地图初始化 
		var map = initMap();
		addTianDiLayer(map);	
		
		function initMap(){
			var _target = document.getElementById('map');
			var _view = new ol.View({
				projection : projection,
				center : ol.proj.fromLonLat([116.20, 39.56]),
				zoom : 9 
			});
			
			var map = new ol.Map({
				target : _target,
				view : _view,
				layers : []
			});
			
			return map;
		}
		
		
		// 添加天地图图层
		function addTianDiLayer(map){
			// openlayers默认使用wmts规范组织地图切片，天地图也使用这一规范
			var tilegridDefault = ol.tilegrid.createXYZ({maxZoom: 19});
			

			// 道路图层
			var _routeLayer = new ol.layer.Tile({
				source : new ol.source.XYZ({
					url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=919cb3b2972d223f013a505ca1edfdce",
			        // 默认使用wmts规范组织地图切片，默认可省略
			        tileGrid: tilegridDefault
				})
			});
			map.addLayer(_routeLayer);
			
			// 注记图层
			var _noteLayer = new ol.layer.Tile({
				source : new ol.source.XYZ({
					url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=919cb3b2972d223f013a505ca1edfdce",
					tileGrid: tilegridDefault
				}),
			});
			map.addLayer(_noteLayer);
			
			
			//地图切片格网，调试使用
		    var _debugTileDefault = new ol.layer.Tile({
                source: new ol.source.TileDebug({
                    projection: 'EPSG:3857',
                    tileGrid: tilegridDefault
                })
            })
		    map.addLayer(_debugTileDefault);
		}
		
	</script>
</html>

由于瓦片是静态的图片，可预先生成，通过缓存和CDN技术，瓦片服务器可提供高效的瓦片读取服务。此外，浏览器并行获取和显示多张小图片，比获取和显示一张大图片要高效的多。显示地图变成和显示图片一样简单，这也是互联网地图能够承载亿级规模用户的原因。

愚者的旋律

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
GIS基础二：GIS中的地图金字塔和瓦片地图

地图服务的诞生地图数据通常体量较大，需要充足的带宽和数据渲染能力。地图服务诞生以前，地图多在局域网的桌面软件中使用。互联网的发展，催生了通过浏览器使用地图的需求，于是在1999年，出现了WMS（Web Map Service）这样的解决方案。在浏览器这一端，没有地图的概念，但浏览器天生就是为了显示文本和图片。WMS的设计是，在服务器端把地图渲染成图片，浏览器端显示地图图片。地图图片大小根据浏览器视窗大小来定。地图金字塔WMS大大推进了互联网地图的进程。问题是，WMS根据浏览器视窗大小每次生成一大张图
复制链接

扫一扫