背景
最近在肝塞尔达旷野之息，希望年新作发布前可以救出公主。同时公司有地图加载的需求，于是想以旷野之息地图为例，学习实践一下前端开发相关的地图知识，本文内容主要介绍通过使用瓦片地图加载原理，实现塞尔达旷野之息地图加载并添加交互锚点。
基础知识瓦片地图在游戏开发过程中，经常会遇到超过屏幕大小的地图，例如在即时战略游戏中，它使得玩家可以在地图中滚动游戏画面。这类游戏通常会有丰富的背景元素，如果直接使用背景图切换的方式，需要为每个不同的场景准备一张背景图，但是每个背景图都不小，这样会造成资源浪费。
瓦片地图就是为了解决此类问题产生的，一张大的世界地图或者背景图可以由几种地形来表示，每种地形对应一张小的的图片，我们称这些小的地形图片为瓦片。把这些瓦片拼接在一起，一个完整的地图就组合出来了，这就是瓦片地图的原理。
瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小的正方形地图瓦片，形成第0层瓦片矩阵；在第0层地图图片的基础上，按每像素分割为2×2个像素的方法生成第1层地图图片，并对其进行分块，分割成与下一层相同大小的正方形地图瓦片，形成第1层瓦片矩阵；采用同样的方法生成第2层瓦片矩阵；......如此下去，直到第N-1层，构成整个瓦片金字塔。
瓦片地图一般采用ZXY规范的地图瓦片。（瓦片层级、瓦片x坐标、瓦片y坐标）
墨卡托投影瓦片地图采用的都是墨卡托投影，即正轴等角圆柱投影，又称等角圆柱投影，是圆柱投影的一种，由荷兰地图学家墨卡托（GerhardusMercator）拟定。基本原理是假设地球被围在一中空的圆柱里，其基准纬线与圆柱相切（赤道）接触，然后再假想地球中心有一盏灯，把球面上的图形投影到圆柱体上，再把圆柱体展开，这就是一幅选定基准纬线上的墨卡托投影绘制出的地图。百度地图、高德地图及GoogleMaps使用的投影方法都是墨卡托投影。
瓦片地图不用自己生成，有很多工具可以用来制作瓦片地图，Tiled、Arcgis等都是非常流行的制作工具。
实现在本例中，塞尔达旷野之息瓦片地图来源网络开源地图，加载瓦片地图使用Leafletweb地图库，开发之前简要了解一下。
Leaflet.jsLeaflet(
转载请注明地址:http://www.1xbbk.net/jwbzn/1474.html
