本文為博主原創，如需轉載需要署名出處。
leaflet作為廣為應用的開源地圖操作的API,是非常受歡迎，輕量級的代碼讓使用者更容易操作。
廢話不多說，下面直接給出范例。
首先在這個網站下載leaflet的壓縮包，其中包括了其API以及一些范例。https://github.com/Leaflet/Leaflet
下載完之后，自己搭建一個服務器，將這個包文件放在服務器的根目錄下面，這時候在瀏覽器可以訪問一下其中的范例。例如，在我的這里測試在瀏覽器里輸入：http://localhost/Leaflet/debug/map/max-bounds.html，我這里使用的是WampSever2.5.網上有很多這樣的教程這里做說明。
出現如上圖所示的界面證明已經搭建成功。
然后再OpenStreetMap的官網上下載離線地圖的數據，官網提供自定義下載的方式，下載下來的數據格式是.osm。http://www.openstreetmap.org/
之后要做的就是該離線數據的地圖瓦片。地圖瓦片的下載可以使用這個下載工具Maperitive(v2.4.1)http://maperitive.net/download/
這個軟件的使用就不用多說了，導入剛才下載的地圖數據之后，在其右下角點擊Web map，表示不顯示在線地圖數據，只顯示剛剛加載的離線地圖。
在下方使用Command promat。輸入generate-tiles minzoom=8 maxzoom=17，數字表示地圖的縮放級別可以更換。還可以在map菜單欄的switch to rules中選擇地圖的樣式。比如黑色或者精簡地圖。下載完成后在其軟件的目錄下面有個Tiles的文件夾，這里面存放的就是地圖的瓦片。
在服務器下面新建一個項目，將這個文件夾放在這個項目中，其html代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="leaflet/css/leaflet.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="leaflet/css/screen.css" /> <script type="text/javascript" src="leaflet/src/deps.js"></script> <script type="text/javascript" src="leaflet/src/leaflet-include.js"></script> <script type="text/javascript" src="leaflet/src/leaflet.js"></script> <title>leaflet_map</title> </head> <body> <div id="map"></div> <script type="text/javascript"> var osmUrl = 'http://localhost/learnD3/Tiles/{z}/{x}/{y}.png', osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osm = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 17, attribution: osmAttrib }); var map = L.map('map') .setView([31.60,104.71], 11) .addLayer(osm); L.marker([31.68,104.77]).addTo(map) .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); L.circle([31.728,104.677], 5000, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup("I am a circle."); var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(map); } map.on('click', onMapClick); </script> </body> </html>
此圖為項目的目錄結構，其中在leaflet文件夾中存放的是其css樣式以及js源代碼。在下載的leaflet中可以找到。
運行效果如圖所示：
至此離線地圖就已經加載完成。