第一步: 首先我們到https://leafletjs.com/:
下載https://cdn.leafletjs.com/leaflet/v1.6.0/leaflet.zip
最新的穩定版本是1.6.0
第二步:下載我們所需要用到的離線地圖瓦片
下載器很多,我們這裏以Offline Map Maker爲例: (可到http://www.allmapsoft.com/omm去下載它)
然後下載經緯度範圍 (110,111,30,29)的一個縮放級別9到12的google衛星圖:
下載完成後瓦片會保存在C:\offlinemaps\test目錄下.
第三步: 編寫我們的html文件，也就是我們要用來顯示地圖的頁面
html內容如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="./leaflet.css"/>
<script src="./leaflet.js"></script>
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
#my-offline-leaf-map{width:100%;height:100%;}
</style>
</head>
<body>
<div id="my-offline-leaf-map"></div>
<script>
var url = './test/{z}/{x}/{y}.jpg';
var mymap = L.map('my-offline-leaf-map').setView([29.5, 110.5], 10);
L.tileLayer(url,{minZoom:9,maxZoom:12,}).addTo(mymap);
</script>
</body>
</html>
我們保存其爲index.html,保存在c:\offlinemaps目錄下，也就是與test目錄在同一級目錄下。
leaflet.css和leaflet.js兩個解壓縮後的文件也保存到index.html的同目錄下。
第四步：雙擊index.html，即可看到地圖成功加載！
