场景

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、等待切割完成

第一层目录，这里的9代表是zoom缩放层级，第二层419代表的是x，第三层图片命名代表的是y。

然后将整个osm目录复制出来到html所在目录同级目录下

4、修改html中地图的url

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

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

完整代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet加载OSM离线瓦片地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([35.5, 120.5], 10);
        L.tileLayer('osm/{z}/{x}/{y}.png', {
            minZoom:9,
            maxZoom:12,
        }).addTo(map);
    </script>
</body>

</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 离线地图解决方案（一）：加载瓦片地图 OpenLayers加载高德地图离线瓦片地图百度离线地图 —— 瓦片地图下载 OpenLayers加载谷歌地球离线瓦片地图 vue中openlayers 加载离线瓦片地图 openlayers离线瓦片地图开发 OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图制作百度地图离线JavaScript API加载本地瓦片地图制作百度地图离线JavaScript API加载本地瓦片地图一、地图、osm离线地图搭建