場景

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離線地圖搭建