OSM逆地理服务器搭建（四）之Web端加载OpenStreetMap地图

前言

前面的文章中说道我们利用 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的话，我可以全屏看到全球的地图。大家可以自己设置一下看看效果，找到自己合适的最大缩放级别与最小缩放级别合适的值。下图是我的效果