leaflet加载离线瓦片地图

首先我们要明白瓦片地图的请求原理。

其实瓦片地图并不是什么特殊的文件，就是最普通的png图片。之所以为地图，就是带有了地理坐标。

打开network，查看其请求的的url就能明白其请求的原理了。

主要在于最后三位，含义依次是14级的13528行，6250列。（或者13528列，6250行。）

14就是下图中的level，而行列号对应每一级level里面的唯一一个瓦片（图片），那么地图框架为我们完成的就是，在对应地图层级，请求对应范围内的瓦片，而这个协议规则一般是通用的谷歌标准（也有其他标准，看框架是否支持），比兔第9级中的第一个不会叫9-0-0，而可能是9-1-1（真实可能不是）。

因此我们在部署离线地图的时候，只需要按规则组织好瓦片地图，再发布服务即可。

瓦片地图数据源的获取：以太乐地图为例。

本文以node为服务器发布，可以看到其组织方式。

那么实际在网页中network进行请求的时候，服务器的作用那就是静态文件的呈递了，按理说，直接放到文件夹下应该也可以。（未进行尝试）

然后就可以加载了

 var url = 'http://localhost:3000/tiles/{z}/{x}/{y}.png';
        //初始化 地图，这个view要设置到离线地图的范围，不然什么都没有
        var leafletMap = L.map('mapDiv').setView([39.2, 117.25], 13);
        //将图层加载到地图上，并设置最大的聚焦还有map样式
        L.tileLayer(url, {
                maxZoom: 18,
                id: 'mapbox.streets'
        }).addTo(leafletMap);
 

最后放一张加载的地图