本文為部落客原創，如需轉載需要署名出處。
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的檔案夾，這裡面存放的就是地圖的瓦片。
<!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中可以找到。
運作效果如圖所示：
至此離線地圖就已經加載完成。