场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

上面加载显示OSM地图的使用的是网络url。

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

如果要加载离线瓦片地图怎样显示，即将地图切割成一张张png照片，在本地加载显示这些png照片显示。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、怎样获取离线瓦片地图。

可以通过工具切割下载离线瓦片地图Offine Map Maker

http://www.allmapsoft.com/omm/index.html

2、下载到本地后安装运行

Task name设置任务名，会在对应目录下生成osm这个目录，

Maps type选择OpenStreetMap map

From zoom 与To zoom分别设置地图的缩放层级，这里设置9到12

Longitude设置精度范围，Latitude设置纬度范围

Save to 选择要保存文件的目录

点击Start按钮

 3、等待切割完成

会在对应目录下生成对应层级的目录。

4、修改html中地图的url

'osm/{z}/{x}/{y}.png'

注意这里的没有前面斜杠。

完整代码

"en">


    "UTF-8">
    
    "stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    



    
"map">