前言

前面的文章中說道我們利用 Nominatim將搭建了可以進行地址解析的服務器，以及如何利用 Nominatim進行地址解析。
雖然我們解決了地址解析不依賴谷歌服務，但是地圖引擎，路線規劃，畫電子圍欄等等操作還是需要使用谷歌地圖，並不是完全的脫離谷歌服務。
如果我們希望完全脫離谷歌的話就需要考慮將OpenStreetMap地圖集成到我們的應用程序中並且利用OpenStreetMap來實現所有對地圖依賴的功能。

思路

上述我們講到，利用 Nominatim將OpenStreetMap數據導入完成後，在瀏覽器輸入：http://你的IP地址/nominatim/後會出現下面界面

這裏的地圖是怎麼加載出來的呢，我們可以在瀏覽器中按F12查看頁面的元素，發現這些都是一個個圖片組成的。這也是我們說的地圖瓦片。

而且我們通過網頁的元素可以發現，這個地圖加載使用的是Leaflet，什麼是Leaflet呢？

Leaflet

Leaflet是交互式地圖的開源的 javascript庫，我們可以利用它來實現加載我們本地的瓦片數據。
官網介紹：https://leafletjs.com/
國內也有很多大牛研究過，我這裏就不多贅述了，下面我會講怎麼使用Leaflet加載OpenStreetMap地圖。

利用Leaflet加載OpenStreetMap

這裏有詳細的介紹：https://www.jianshu.com/p/cf81e2a014bf
但是需要對下面紅框代碼進行稍微改動

改成下面代碼

爲什麼要改成下面代碼呢？
（1） http://{s}.tile.osm.org/{z}/{x}/{y}.png，這個是我們本地導入數據後我們本地服務使用的地址。

進行了測試使用上面例子的地址，地圖加載非常緩慢，改用http://{s}.tile.osm.org/{z}/{x}/{y}.png後速度是非常快的，不管是放大還是縮小都會很快的加載出來。（兩個連接都是osm提供的圖層，我不清楚爲什麼會出現那麼大的差距，這點有點費解！）
（2）{ minZoom: 5, maxZoom: 18 }改成{ minZoom: 3, maxZoom: 18 }
minZoom與maxZoom是縮放級別，這個根據自己的情況進行設置，我這樣設置的原因是如果minZoom:5的話，最大視野下只能看到國家，minZoom:3的話，我可以全屏看到全球的地圖。大家可以自己設置一下看看效果，找到自己合適的最大縮放級別與最小縮放級別合適的值。下圖是我的效果