leaflet載入離線OSM(OpenStreetMap)
轉載： https://www.cnblogs.com/RainyBear/p/6011832.html
leaflet作為廣為應用的開源地圖操作的API,是非常受歡迎，輕量級的程式碼讓使用者更容易操作。
廢話不多說，下面直接給出範例。
首先在這個網站下載leaflet的壓縮包，其中包括了其API以及一些範例。https://github.com/Leaflet/Leaflet
下載完之後，自己搭建一個伺服器，將這個包檔案放在伺服器的根目錄下面，這時候在瀏覽器可以訪問一下其中的範例。例如，在我的這裡測試在瀏覽器裡輸入：http://localhost/Leaflet/debug/map/max-bounds.html
出現如上圖所示的介面證明已經搭建成功。
然後再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中可以找到。
執行效果如圖所示：
至此離線地圖就已經載入完成。