背景
最近在 肝🤕
塞尔达旷野之息,希望 2022年
新作发布前可以救出公主 👸
。 同时公司有地图加载的需求,于是想以 旷野之息
地图为例,学习实践一下前端开发相关的地图知识,本文内容主要介绍通过使用瓦片地图加载原理,实现 塞尔达旷野之息
地图加载并添加交互锚点。
基础知识
瓦片地图 🗺
在游戏开发过程中,经常会遇到超过屏幕大小的地图,例如在即时战略游戏中,它使得玩家可以在地图中滚动游戏画面。这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,但是每个背景图都不小,这样会造成资源浪费。
瓦片地图就是为了解决此类问题产生的,一张大的世界地图或者背景图可以由几种地形来表示,每种地形对应一张小的的图片,我们称这些小的地形图片为瓦片。把这些瓦片拼接在一起,一个完整的地图就组合出来了,这就是瓦片地图的原理。
瓦片地图金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变。 首先确定地图服务平台所要提供的缩放级别的数量 N
,把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层,即第 0
层,并对其进行分块,从地图图片的左上角开始,从左至右、从上到下进行切割,分割成相同大小的正方形地图瓦片,形成第 0
层瓦片矩阵;在第 0
层地图图片的基础上,按每像素分割为 2×2
个像素的方法生成第 1
层地图图片,并对其进行分块,分割成与下一层相同大小的正方形地图瓦片,形成第1层瓦片矩阵;采用同样的方法生成第 2
层瓦片矩阵;… 如此下去,直到第 N-1
层,构成整个瓦片金字塔
。
瓦片地图一般采用
ZXY规范
的地图瓦片。(瓦片层级
、瓦片x坐标
、瓦片y坐标
)
墨卡托投影
瓦片地图采用的都是墨卡托投影,即正轴等角圆柱投影,又称等角圆柱投影, 是圆柱投影的一种,由荷兰地图学家墨卡托(Gerhardus Mercator
)拟定。基本原理是假设地球被围在一中空的圆柱里,其基准纬线与圆柱相切(赤道)接触,然后再假想地球中心有一盏灯,把球面上的图形投影到圆柱体上,再把圆柱体展开,这就是一幅选定基准纬线上的 墨卡托投影
绘制出的地图。百度地图、高德地图及 Google Maps
使用的投影方法都是墨卡托投影。
瓦片地图不用自己生成,有很多工具可以用来制作瓦片地图,
Tiled
、Arcgis
等都是非常流行的制作工具。
实现
在本例中,塞尔达旷野之息
瓦片地图来源网络开源地图,加载瓦片地图使用 Leaflet
web
地图库,开发之前简要了解一下。
Leaflet.js
Leaflet 🌿 (https://leafletjs.com)
是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。使用它我们可以部署简单,交互式,轻量级的Web地图。
- 代码仅
33 KB
,但它具有开发在线地图的大部分功能。 - 允许使用图层,
WMS
,标记,弹出窗口,矢量图层(折线,多边形,圆形等),图像叠加层和GeoJSON
等图层。 - 可以通过拖动地图,缩放(通过双击或滚轮滚动),使用键盘,使用事件处理以及拖动标记来与
Leaflet
地图进行交互。 - 浏览器支持桌面端
Chrome
、Firefox
、Safari 5+
、Opera 12+
、IE 7-11
以及Safari
、Android
、Chrome
、Firefox
等手机浏览器。
代码实现
在页面的 head
标签中引入 Leaflet
的 css
文件和 js
文件。在想要创建地图的地方创建一个带有 id
的 div
,示例中用 #mapContainer
元素承载地图。
<head>
<link href=