共计 3867 个字符,预计需要花费 10 分钟才能阅读完成。
背景
最近在 肝🤕
塞尔达旷野之息,心愿 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="assets/libs/leaflet/leaflet.css" rel="stylesheet"/>
<script src="assets/libs/leaflet/leaflet-src.js"></script>
</head>
<body>
<div id="mapContainer"></div>
</body>
须要确保地图有一个明确的高度, 能够在 CSS
中增加如下全屏显示的款式。
#mapContainer {
width: 100%;
height: 100%;
}
当初地图的初始化曾经实现了,这一步进行瓦片地图加载。
L.LatLngBounds(西南角点, 东北角点)
:通过定义矩形西南角点和东北角点来创立经纬度的矩形框。setView
:初始化地图,并将其视图设置为咱们所抉择的地理坐标和缩放级别。L.tileLayer
:加载瓦片图层。addTo
:显示地图。
var bounds = new L.LatLngBounds(new L.LatLng(-49.875, 34.25), new L.LatLng(-206, 221)
);
var map = L.map('mapContainer', {
crs: L.CRS.Simple,
attributionControl: false,
maxBounds: bounds,
maxBoundsViscosity: 1.0,
}).setView([0, 0], 2);
var layer = L.tileLayer('assets/maps/{z}_{x}_{y}.png', {
attribution: '© David',
minZoom: 2,
maxZoom: 7,
noWrap: true,
bounds: bounds
}).addTo(map);
确保所有代码都在用于显示地图的
div
和leaflet.js
蕴含之后调用。默认状况下(因为咱们在创立地图实例时没有设置任何参数),地图上的所有鼠标事件和触摸交互性能都是开启的,并且它具备缩放和属性控件。
此时咱们在页面中对地图进行拖动、缩放等操作,并关上浏览器控制台查看 network
中的 img
选项,随着操作的触发,不同的地图瓦片被浏览器加载显示。
塞尔达旷野之息
地图十分大,据国外 油管阿婆主
测试,林克从最北走到地图最南端须要 20
多分钟。在如此巨大的地图上进行游戏,摸索的神庙、地图塔、人马等怪物点等地位须要花很大精力,如果应用已有数据进行标注,能够节俭很多精力(但也失去了摸索的乐趣 😂
)。此时能够利用 Leaflet
的地图标注性能,在地图上进行标记。其中标注数据来源于网络材料。以下内容以神庙 🛕
为例,实现在瓦片地图上的标注和交互性能。
L.marker([x, y])
:除了瓦片之外,能够轻松地在地图中增加其余货色,包含标记、折线、多边形、圆圈和弹出窗口。L.divIcon
: 自定义图标。bindPopup
: 弹出窗口通常用于将某些信息附加到地图上的特定对象上。
$.each(markerData, function () {var key = this.markerCategoryId + "-" + this.id + "-" + this.name.replace(/[^A-Z]/gi, "-");
var popupHtml = '<div class="popupContainer">';
popupHtml += '<strong class="name">' + this.name + '</strong>';
popupHtml += '<div class="buttonContainer">';
popupHtml += '<span class="markButton"onclick="markPoint(this)"data-key="' + key + '"> 标记 </span>';
popupHtml += '</div>';
var className = "mark-" + key;
className += "markIcon";
className += "icon-" + markerStyle[this.markerCategoryId];
var marker = L.marker([this.y, this.x], {
title: this.name,
icon: L.divIcon({
className: className,
iconSize: [20, 20],
iconAnchor: [10, 10],
popupAnchor: [0, -10],
})
}).addTo(map).bindPopup(popupHtml);
});
至此,通过遍历,将数据中神庙的坐标点增加到了地图上,同时在 dom 构造中增加了点击事件,点击神庙能够进行交互。
应用同样的办法,能够将地图塔、村庄、人马、呀哈哈 😂
、回顾点、子工作点等地位信息标注在地图中不便查找。
实现成果
在线预览:https://dragonir.github.io/ze…
总结
应用瓦片地图,能够做到地图的整体和部分都能高清展现,并且可能做到按需加载,须要留神的是,分层较多的地图瓦片图片也会指数增长,须要做好缓存解决,这样就能晋升地图页面加载速度,晋升用户体验。leaflet.js
尽管很轻量,然而性能十分弱小,本例中只用到它的一些根底性能,其余高级用法还要在后续开发中持续摸索。
参考资料
- 塞尔达旷野之息地图标注起源:https://github.com
- 瓦片地图生成工具
Tiled
我的项目:https://www.mapeditor.org - 瓦片地图生成工具
arcgis
:https://developers.arcgis.com - 凋谢天文空间实验室
Leaflet.js
: http://webgis.cn/leaflet-inde… - 墨卡托投影:https://baike.baidu.com/item/…
- https://www.cnblogs.com/fwc19…
- ZXY 规范瓦片 http://support.supermap.com.c…