前端瓦片地圖加載之塞爾達傳說曠野之息-有解無憂

zelda

背景

最近在 肝?? 塞爾達曠野之息，希望 2022年 新作發布前可以救出公主 ??，同時公司有地圖加載的需求，于是想以 曠野之息 地圖為例，學習實踐一下前端開發相關的地圖知識，本文內容主要介紹通過使用瓦片地圖加載原理，實作 塞爾達曠野之息 地圖加載并添加互動錨點，

基礎知識

瓦片地圖 `??`

在游戲開發程序中，經常會遇到超過螢屏大小的地圖，例如在即時戰略游戲中，它使得玩家可以在地圖中滾動游戲畫面，這類游戲通常會有豐富的背景元素，如果直接使用背景圖切換的方式，需要為每個不同的場景準備一張背景圖，但是每個背景圖都不小，這樣會造成資源浪費，

瓦片地圖就是為了解決此類問題產生的，一張大的世界地圖或者背景圖可以由幾種地形來表示，每種地形對應一張小的的圖片，我們稱這些小的地形圖片為瓦片，把這些瓦片拼接在一起，一個完整的地圖就組合出來了，這就是瓦片地圖的原理，

tile_1

瓦片地圖金字塔模型是一種多解析度層次模型，從瓦片金字塔的底層到頂層，解析度越來越低，但表示的地理范圍不變， 首先確定地圖服務平臺所要提供的縮放級別的數量 N，把縮放級別最高、地圖比例尺最大的地圖圖片作為金字塔的底層，即第 0 層，并對其進行分塊，從地圖圖片的左上角開始，從左至右、從上到下進行切割，分割成相同大小的正方形地圖瓦片，形成第 0 層瓦片矩陣；在第 0 層地圖圖片的基礎上，按每像素分割為 2×2 個像素的方法生成第 1 層地圖圖片，并對其進行分塊，分割成與下一層相同大小的正方形地圖瓦片，形成第1層瓦片矩陣；采用同樣的方法生成第 2 層瓦片矩陣；...... 如此下去，直到第 N-1 層，構成整個瓦片金字塔，

tile_0

瓦片地圖一般采用ZXY規范的地圖瓦片，（瓦片層級、瓦片 x坐標、瓦片 y坐標）

墨卡托投影

瓦片地圖采用的都是墨卡托投影，即正軸等角圓柱投影，又稱等角圓柱投影，是圓柱投影的一種，由荷蘭地圖學家墨卡托（Gerhardus Mercator）擬定，基本原理是假設地球被圍在一中空的圓柱里，其基準緯線與圓柱相切（赤道）接觸，然后再假想地球中心有一盞燈，把球面上的圖形投影到圓柱體上，再把圓柱體展開，這就是一幅選定基準緯線上的 墨卡托投影 繪制出的地圖，百度地圖、高德地圖及 Google Maps 使用的投影方法都是墨卡托投影，

mercator

瓦片地圖不用自己生成，有很多工具可以用來制作瓦片地圖，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="https://www.cnblogs.com/dragonir/p/assets/libs/leaflet/leaflet.css" rel="stylesheet"/>
  <script src="https://www.cnblogs.com/dragonir/p/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);

map_0

確保所有代碼都在用于顯示地圖的 div 和 leaflet.js 包含之后呼叫，默認情況下（因為我們在創建地圖實體時沒有設定任何引數），地圖上的所有滑鼠事件和觸摸互動功能都是開啟的，并且它具有縮放和屬性控制元件，

此時我們在頁面中對地圖進行拖動、縮放等操作，并打開瀏覽器控制臺查看 network 中的 img 選項，隨著操作的觸發，不同的地圖瓦片被瀏覽器加載顯示，

map_0.5

塞爾達曠野之息 地圖非常大，據國外 油管阿婆主 測驗，林克從最北走到地圖最南端需要 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 >';
  popupHtml += '<strong >' + this.name + '</strong>';
  popupHtml += '<div >';
  popupHtml += '<span  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結構中添加了點擊事件，點擊神廟可以進行互動，

map_1

使用同樣的方法，可以將地圖塔、村莊、人馬、呀哈哈 ??、回憶點、子任務點等位置資訊標注在地圖中方便查找，

map_2

實作效果

map

在線預覽：https://dragonir.github.io/zelda-map

hr_light

總結

使用瓦片地圖，可以做到地圖的整體和區域都能高清展示，并且能夠做到按需加載，需要注意的是，分層較多的地圖瓦片圖片也會指數增長，需要做好快取處理，這樣就能提升地圖頁面加載速度，提升用戶體驗，leaflet.js 雖然很輕量，但是功能非常強大，本例中只用到它的一些基礎功能，其他高級用法還要在后續開發中繼續探索，

參考資料

塞爾達曠野之息地圖示注來源：https://github.com
瓦片地圖生成工具 Tiled 專案：https://www.mapeditor.org
瓦片地圖生成工具 arcgis：https://developers.arcgis.com
開放地理空間實驗室 Leaflet.js: http://webgis.cn/leaflet-index.html
墨卡托投影：https://baike.baidu.com/item/墨卡托投影
https://www.cnblogs.com/fwc1994/p/6519229.html
ZXY標準瓦片 http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iServer/Subject_introduce/Cache/MapCache/TileFormat/ZXY_format.htm

footer

作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15265372.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/299889.html

標籤：Html/Css

上一篇：JDK7u21反序列化詳解

下一篇：【jQuery】精細學習記錄

前端瓦片地圖加載之塞爾達傳說曠野之息

背景