Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)
場景
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照片顯示。
?注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
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>?總結
以上是生活随笔為你收集整理的Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet.Pi
- 下一篇： Android中通过自定义签名控件实现手