本文为博主原创,如需转载需要署名出处。
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代码如下:
leaflet_map