OpenLayers之多源数据加载⼆：⽡⽚地图原理 ⽬录
⼀、⽡⽚地图简介
⽡⽚地图（切⽚地图）源于⼀种⼤地图解决⽅案，针对⼀整块⾮常⼤的地图进⾏切⽚，分成很多相同⼤⼩的⼩块地图，在⽤户访问的时候，再⼀块⼀块⼩地图加载，拼接在⼀起，从⽽还原成⼀整块⼤的地图，如果要提⾼Web地图的访问速度，使⽤⽡⽚地图是⾮常有效的⽅法。
室外高增益天线
具体来讲，⽡⽚地图就是在多个⽐例尺下配置地图，然后提前把每个⽐例尺下的地图绘制为⼩块图⽚，保存在服务器上名为缓存的⽬录中。这样客户端在访问地图时，可以直接获取需要的⼩块图⽚拼接成整幅地图，⽽不是由服务器动态创建出⼀幅图⽚再发送到客户端，从⽽极⼤提⾼了访问速度。在2005年前后，随着⾕歌地图、微软虚拟地球（现在称为Bing地图）以及其他流⾏的WebGIS应⽤的出现，⼈们开始意识到，也许他们并不需要管理每⼀个图层所有属性（样式符号、标注与注记等）的功能。这些互联⽹巨头已经开始将⽮量图层融合为⼀张栅格化的图像，这些图像被切分为256像素 x 256像素的图⽚及切⽚。这些图⽚预先⽣成并存储在磁盘上，以便快速分发到客户端。这样做可以同时⽀持成千上万个并发请求（异步-因为⽡⽚地图根据请求范围加载），⽽这对于动态地图绘制⽽⾔基本是不可能的。 如上图所⽰，⽡⽚地图采⽤的是⾦字塔模型，是⼀种多分辨率层次模型，从⽡⽚⾦字塔的底层到顶层，⽐例尺越来越⼩，分辨率越来越低，但表⽰的地理范围不变。⽡⽚地图通常都带有⼀个级别、⾏与列编号⽅案，以便将来⾃多个⽡⽚地图服务的⽡⽚放置到正确的位置。 有了⽡⽚地图，制图⼈员再也不同担⼼性能问题了，他们可以使⽤他们所掌握的所有⼯具，来制作⼀
张美观的Web地图。⼀旦创建了地图⽡⽚，这些⽡⽚就保存到了服务器上的某个⽂件夹中，服务器检索美观地图图⽚与丑的图⽚的速度是⼀样的。正由于Web服务器可以快速分发⽡⽚地图图像，因此我们可以使⽤AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）编程技术来从服务器获取图⽚，这样当⽤户漫游时不会出现页⾯闪烁的现象。
这种变化是⾰命性的。⼀类是具有图层排序与调整符号颜⾊等功能，但响应⾮常迟缓的丑陋的地图应⽤；⼀类是没有图层控制，但具有惊⼈美观并且快速响应的地图应⽤。对于这两类WebGIS应⽤的选择，虽然对于⼀些GIS长期爱好者可能还需要停下来⽐较⼀下，但对于普通互联⽹⽤户来说根本不⽤思索，他们⽆疑会选择后者。
在⾕歌地图发布了⼀两年以后，商业GIS软件开始提供创建地图切⽚的功能，由于可以使⽤成熟的地图制作⼯具ArcMap，很多⼈选择使⽤ArcGIS Server来发布空间信息Web服务，但是其价格不菲。我国的超图SuperMap iServer是另⼀种商业选择。免费和开源Mapnik库也可以创建地图⽡⽚，但是直到最近⼏年才提供了将Mapnik封装的⽤户友好的应⽤程序（即TileMill）。
⼆、LOD
LOD是Levels of Detail（细节层级）的简写，⽤于根据当前的环境，渲染不同的图像，⽤于降低⾮重要内容的细节度，从⽽提⾼渲染效率，在电⼦游戏中经常运⽤，对于需要显⽰全球地图的GIS系统⽽ ⾔，更需要应⽤这项技术。
在不同的LOD下，⾃然分辨率就可能不⼀样，这两者是紧密结合在⼀起的。对于图形显⽰系统⽽⾔，分辨率作为屏幕坐标和世界坐标之间计算的纽带，其作⽤是⾮常重要的（例如，屏幕上两个像素点间的距离对应的现实世界的距离是多少，这就需要通过分辨率来衡量与计算——分辨率将在这篇⽂章的后⾯进⾏介绍）。
在详细讲解之前，假设给你两张A4纸，在其中⼀张纸上把你家整个绘制上去，在另⼀张纸上只把你睡的房间绘制上去。如果别⼈想看你家，你会给哪⼀张纸？如果想看你睡的房间，你会给哪⼀张纸？相信你不会给错，LOD就是这种根据不同需要，采⽤不同图的技术⽅案。在地图应⽤中，最直观的体验，就是地图放⼤缩⼩。当地图放⼤后，能看到更详细的地理信息，⽐如街道、商店等等。当地图缩⼩再缩⼩，原来能看到的街道、商店就看不见了，但是能看到更⼤的区域。我们的屏幕就相当于是A4纸，⼤⼩不变。
LOD这个技术⽅案⾮常棒！⾮常符合我们的⾃然习惯，所以在很多图形系统中都使⽤了这项技术。在GIS系统中，不断放⼤，就能看到更多地图细节，了解更加详细的信息。对于GIS引擎的开发者⽽⾔，需要实现这项技术，当发现⽤户放⼤地图时，就⽴马使⽤更有细节的地图图⽚，替换现在显⽰的地图图⽚。现在问题来了：意思是说对于同⼀个地点⽽⾔，需要有更多张呈现不同细节程度的图⽚？是的，
你没有猜错。虽然在使⽤⽡⽚地图的过程中，感觉放⼤、缩⼩地图是浑然⼀体的，但其实就在你眼⽪下发⽣了图⽚替换。不同层级使⽤具有不同细节的地图⽡⽚，这就需要为每⼀个层级准备图⽚，如果使⽤离线⼯具下载⽡⽚地图，会看到下载的图⽚是按照层级Z进⾏存储的。开发者不⽤担⼼数据源的处理，只需要知道这个原理就可以了。
为了便于理解GIS系统中不同层级，使⽤不同的图⽚，下⾯使⽤google在线⽡⽚地图进⾏说明。最⼩层级0情况下，只⽤了⼀张
256*256像素的图⽚表⽰整个地球平⾯：
稍⼤⼀个层级1情况下，⽤了四张256*256像素的图⽚（各张图⽚中表⽰的信息更丰富了）来表⽰整个地球：
对照⼀下，是否更加的明⽩了LOD原理及其在GIS中的应⽤了？
三、⽡⽚计算
不同环境条件下，加载具有不同细节的图⽚资源，可以提⾼效率，但这并不是终点。⽡⽚技术可以更进⼀步提⾼效率。其原理是将⼀张⼤图⽚（完整地图）切割成很多张⼩图⽚（地图⽡⽚），按照呈现需求，加载其中的⼏张⼩图⽚即可。
为什么这样就能提⾼效率？因为屏幕显⽰窗⼝的⼤⼩是固定的，⽐如屏幕分辨率是800*600，或者1024*768，⼜或者是1920*800等等。如果屏幕分辨率是800*600，⼀张⼤图是9000*9000，那么同⼀时间，你只能看到这张图⽚的⼗分之⼀。但是在不切⽚的情况下，你却必须要加载整个地图。如果是
在本地浏览还好，假如是发布到⽹络上，则⽹络传输和渲染，都将耗时。如果我们按照500*500⼤⼩进⾏切⽚，我们则只需要加载4张500*500的⼩图⽚就可以了（就可以布满分辨率是800*600的屏幕）。对于WebGIS⽽⾔，需要在⽹络上发布，同时需要显⽰整个地球，⾃然需要使⽤⽡⽚技术。
3.1、切⽚⽅式
如果对整个地球图⽚进⾏切⽚，需要考虑的是整个地球图⽚⼤⼩，以及切⽚规则，切⽚（⽡⽚）⼤⼩。
对于WebGIS⽽⾔，在线地图⼏乎都采⽤墨卡托投影坐标系（Mercator)，对应的地图投影到平⾯上就是⼀个正⽅形。为了⽅便使⽤，切⽚时⼤多按照正⽅形的⽅式来进⾏切⽚，⽐如切⽚⼤⼩为256*256（单位像素）。⼀个1024*1024的地图，就可以切⽚4张⼩的⽡⽚。同时，⽡⽚⼤⼩⼏乎都是256*256，有⼀些则会增加到512*512（由于以前的屏幕分辨率通常⽐较低，所以256*256的⽡⽚在低分辨率的屏幕上显⽰效果⽐较好，随着屏幕分辨率的提⾼，⽡⽚⼤⼩⾃然也就增加到512*512）。
LOD会使得不同层级下的全球地图⼤⼩不⼀致，结合⽡⽚地图技术⼀起，就出现了⾦字塔⽡⽚结构：
在WebGIS中，上⼀层级的⼀张⽡⽚，在更⼤⼀层级中，会⽤4张⽡⽚来表⽰，依次类推，⽐如上⼀节中看到的Google在线⽡⽚地图的第0级和第1级的⽡⽚地图。这样做可以维持正⽅形的投影⽅式不变，同时按照2的幂次⽅放⼤（⽡⽚的边长），计算效率⾮常⾼。
3.2、⽡⽚数量计算
育苗营养块
通过上⾯切⽚的介绍，我们可以对每⼀层级⽡⽚的数量进⾏简单的计算：
层级0的⽡⽚数是1=2^0∗2^0
层级1的⽡⽚数是4=2^1*2^1
层级n的⽡⽚数是2^n*2^n
这个地⽅计算的是所有⽡⽚数，因为是⼀个正⽅形，所以是边长的平⽅。如果只计算x轴或y轴⼀边的⽡⽚数，就是2^n个。
3.3、⽡⽚坐标系
任意⼀个层级的地图，切成多个⽡⽚后，我们需要给⽡⽚编号，才能通过编号到⽡⽚。这个问题就涉及到⽡⽚坐标系。不同的在线地图服务商，可能定义不⼀样的⽡⽚坐标系，坐标系不⼀样，那么对应的同⼀个位置的⽡⽚的坐标也会不⼀样。需要引起重视。
在OpenLayers提供了⼀个⽤于调试⽡⽚的source : ol.source.TileDebug类。可以清晰的看到每⼀个⽡⽚的坐标：
验货平台
代码如下：
<div id="map" ></div>
<script type="text/javascript">
var osmSource = new ol.source.OSM();
var map = new ol.Map({
layers: [
// 加载Open Street Map地图
new ol.layer.Tile({
source: osmSource
}),
// 添加⼀个显⽰Open Street Map地图⽡⽚⽹格的图层
远程监控安防
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: TileGrid()
})
})
],
target: 'map',
view: new ol.View({
center: ansform([104, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})烟道蝶阀
});
</script>
⾸先从上图可以看到地图上多了⽹格，每⼀个⽹格对应的就是⼀个⽡⽚。其次⽹格中有三个数字，这些数字就表⽰当前⽡⽚的坐标：第⼀个数字是层级z
第⼆个数字是表⽰经度⽅向上的x
第三个数字是表⽰纬度⽅向上的y
关于⽡⽚坐标系，这篇⽂章还有其余的论述。
四、分辨率
前⾯简单提到过，分辨率是屏幕坐标和世界坐标的纽带，通过它，才能知道你在屏幕上⽤⿏标点击的位置对应于世界地图具体的经纬度位置。当然你不⽤⾃⼰来做这个计算，OpenLayers的ol.Map类已提供了对应的⽅法来帮助你实现坐标转换。你可能经常使⽤这个函数，但却不知道背后是怎样的⼀个原理，本⼩节将理清其中的来龙去脉。
上⼀节说到了每⼀个层级，会使⽤不同数量的⽡⽚来表⽰整个地球，那么⽆论是哪⼀个层级，所表⽰的实际地理空间范围都是⼀致的。但使⽤的⽡⽚个数却是不⼀样的。
以Google在线地图为例，层级0使⽤了⼀个⽡⽚，层级1使⽤了4个⽡⽚。通过计算可以知道层级0的整个地球图像（⽡⽚）
为256*256像素⼤⼩，层级1整个地球图像为512*512像素⼤⼩。层级0和层级1表⽰的地球范围都是⼀
样的经度[-180, 180]，纬度[-90, 90]。在层级0的时候，⼀个像素就表⽰360/256 = 1.40625这么长的经度范围，180/256 = 0.703125这么长的纬度范围。⽽这两个数字就是分辨率了，即⼀个像素所表⽰的现实世界的范围是多少，这个范围可能是度，可能是⽶，或者其他单位，根据具体的情况⽽定。
4.1、墨卡托投影坐标系下的分辨率
我们知道，在WebGIS中使⽤的在线⽡⽚地图是采⽤的Web墨卡托（Mercator）投影坐标系（可以查看这篇⽂章--来了解详细内容），经过投影后，整个地球是⼀个正⽅形，所能表⽰的地球范围为：
经度[-180, 180]，纬度[-85, 85]，单位为度。
对应的Web墨卡托坐标系的范围为：
二氧化氯发生器加药x[-20037508.3427892, 20037508.3427892]，范围y同样是[-20037508.3427892, 20037508.3427892]，单位为⽶。
或许，你会好奇这个范围是怎么计算⽽来的，如果详细了解过它的定义，应该知道墨卡托投影只是简单的把地球球⾯剖开拉伸为⼀个正⽅形⽽来的，由于南北极两端采⽤这种拉伸会严重变形，并且南北极在使⽤过程中很少⽤到，所以⼲脆就只投影了[-85, 85]纬度范围的地球。⽽展开时，因为纬度范围有缩减，所以肯定只能以经度来展开，即在经度-180度的地⽅从上到下剖开地球，然后按照⾚道⽅向
来展开成⼀张平⾯，那么这个平⾯的长，就等于以地球⾚道半径按照圆来计算的周长。近似的按照6378137⽶为半径来计算，那么整个⾚道周长的⼀半，即为：
π∗r=3.1415926∗6378137=20037508.0009862
以上就是Web墨卡托投影坐标系范围的完整的计算过程，墨卡托投影也有很多变形，会有细微的不同，OpenLayers默认使⽤的
是EPSG:3857（Web墨卡托投影坐标系），对于该坐标系的详细定义，可以参见。
有了范围之后，要想计算分辨率，按照上⾯的计算过程就⾮常简单了，还是以Google在线⽡⽚地图为例，x⽅向上的各层级⽡⽚地图分辨率计算公式可以归纳为：
resolution = rangX / (256 * 2^level)
rangX ——表⽰x⽅向上整个范围，⽐如20037508.3427892 - ( - 20037508.3427892)。
256 —— 表⽰⼀个⽡⽚的宽度，单位为像素。
2^level —— 表⽰在层级level下，x⽅向上的⽡⽚个数。
那么分母计算出来的结果就是在层级level下，整个地图在x⽅向上的宽度，单位为像素。
那么整个公式计算出来就是在x⽅向上屏幕上⼀个像素所能代表的实际地理范围，即分辨率。
4.2、OpenLayers默认使⽤的分辨率
OpenLayers默认设置了加载⽡⽚地图时采⽤的分辨率，通过⼀个⽰例来看⼀下：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议