Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)

本文介绍如何使用Leaflet加载离线版OpenStreetMap(OSM)地图。通过OffineMapMaker下载所需范围的地图瓦片,并调整HTML代码以指向本地文件路径,实现离线地图的显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景
Leaflet快速入门与加载OSM显示地图:

https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/122290880 

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

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

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

实现

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

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

Offline Map Maker

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>
 
​

 原文链接:https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/122495098

使用Leaflet加载瓦片地图,您可以按照以下步骤进行操作: 1. 在HTML文件中添加所需的代码。首先,将以下代码添加到`<head>`标签中: ```html <!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> ``` 2. 在HTML文件中的`<body>`标签内添加一个具有唯一ID的`<div>`元素,用于承载地图。例如,添加以下代码: ```html <body> <div id="map"></div> ``` 3. 在HTML文件的`<body>`标签内添加以下代码来加载所需的Leaflet库和脚本: ```html <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> ``` 4. 然后,您需要为地图设置一个具有唯一ID的`<div>`元素,例如`<div id="map"></div>`。在JavaScript部分,我们首先创建了一个地图对象`map`,并使用`.setView()`方法将地图设置为指定的经纬度和缩放级别。接下来,使用`L.tileLayer()`方法加载瓦片层,并传入瓦片URL模板和选项(在这里使用了引用中提供的URL)。最后,我们使用`.addTo()`方法将层添加到地图上。 这样,您就成功加载瓦片地图,可以在Leaflet地图中显示。请确保将`osm/{z}/{x}/{y}.png`替换为您自己的瓦片地图URL模板。更多关于Leaflet的详细信息和用法,请参考引用中提供的优快云博客文章。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值