Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
上面加載顯示OSM地圖的使用的是網(wǎng)絡(luò)url。
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
如果要加載離線瓦片地圖怎樣顯示，即將地圖切割成一張張png照片，在本地加載顯示這些png照片顯示。
?注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、怎樣獲取離線瓦片地圖。
可以通過工具切割下載離線瓦片地圖Offine Map Maker
Offline Map Maker
2、下載到本地后安裝運(yùn)行
Task name設(shè)置任務(wù)名，會(huì)在對應(yīng)目錄下生成osm這個(gè)目錄，
Maps type選擇OpenStreetMap map
From zoom 與To zoom分別設(shè)置地圖的縮放層級(jí)，這里設(shè)置9到12
Longitude設(shè)置精度范圍，Latitude設(shè)置緯度范圍
Save to?選擇要保存文件的目錄
點(diǎn)擊Start按鈕
3、等待切割完成
會(huì)在對應(yīng)目錄下生成對應(yīng)層級(jí)的目錄。
第一層目錄，這里的9代表是zoom縮放層級(jí)，第二層419代表的是x，第三層圖片命名代表的是y。
然后將整個(gè)osm目錄復(fù)制出來到html所在目錄同級(jí)目錄下
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>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet.Pi
- 下一篇： Android中通过自定义签名控件实现手