塞尔达传说-旷野王泪-瓦片地图

瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。 首先确定地图服务平台所要提供的缩放级别的数量 N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第 0 层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小的正方形地图瓦片，形成第 0 层瓦片矩阵；在第 0 层地图图片的基础上，按每像素分割为 2×2 个像素的方法生成第 1 层地图图片，并对其进行分块，分割成与下一层相同大小的正方形地图瓦片，形成第1层瓦片矩阵；采用同样的方法生成第 2 层瓦片矩阵；...... 如此下去，直到第 N-1 层，构成整个瓦片金字塔。

塞尔达传说旷野-王泪地图

同时还可以使用 leaflet 的地图标注功能，在地图上进行标记。

L.marker([x, y])：除了瓦片之外，可以轻松地在地图中添加其他东西，包括标记、折线、多边形、圆圈和弹出窗口。
L.divIcon: 自定义图标。
bindPopup: 弹出窗口通常用于将某些信息附加到地图上的特定对象上。

列入我需要在王泪地图上显示一个兹拉卡瓦卡神庙附近的人马位置的话可以这么写

        var greenIcon = L.icon({
    iconUrl: 'icons8-塞尔达天空之剑传说-100.png', //图标位置

    iconSize:     [38, 38], // 图标大小
    iconAnchor:   [0, 0], // 图标的点，它将对应于标记的位置
    popupAnchor:  [16,0]// 弹出窗口相对于图标锚点打开的位置the iconAnchor
});

  var marker = L.marker([-165.281250,67.562500], {icon: greenIcon})

          .bindPopup("红色人马")
          .addTo(map);

监控鼠标点击经纬度

          var popup = L.popup();
        function onMapClick(e) {
            var lat = e.latlng.lat.toFixed(6);
            var lng = e.latlng.lng.toFixed(6);
            popup
               .setLatLng(e.latlng)
               .setContent(`纬度: ${lat}, 经度: ${lng}`)
               .openOn(map);
        }
        map.on('click', onMapClick);