乐趣区

关于前端:前端瓦片地图加载之塞尔达传说旷野之息

jiezi

背景

最近在 肝🤕 塞尔达旷野之息，心愿 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: '&copy; 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…

退出移动版