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，我這里使用的是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中可以找到。
運行效果如圖所示：
至此離線地圖就已經加載完成。
總結
以上是生活随笔為你收集整理的leaflet加载离线OSM(OpenStreetMap)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BGP聚合as-set advertis
- 下一篇： 复习一下日志等级类型