本文为博主原创,如需转载需要署名出处。

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 = '&copy; <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)的更多相关文章

  1. WebGIS开发之用openlayers加载离线百度地图

    因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...

  2. C#开发BIMFACE系列48 Nginx部署并加载离线数据包

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在前一篇博客<C#开发BIMFACE系列47 IIS部署并加载离线数据包>中详细介绍了IIS部署并访问的完整步 ...

  3. leaflet加载各种地图

    Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便. 下面是我做的例子: <!DOCTYPE ...

  4. 如何实现通过Leaflet加载dwg格式的CAD图

    前言 ​ 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...

  5. 关于加载离线SHP文件、geodatabase文件所遇到的路径问题

    正文开始之前还是先吐槽一下,一行代码DEBUG了一天不知道怎么改,终于误打误撞弄出来了(以下以shp文件为例) 对于虚拟机测试 public String getPath(){ File sdDir ...

  6. C#开发BIMFACE系列47 IIS部署并加载离线数据包

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在前两篇博客<C#开发BIMFACE系列45 服务端API之创建离线数据包>与<C#开发BIMFACE系 ...

  7. Android,加载离线Android API文档缓慢问题!

    解决方法:在host文件末添加如下信息! 0.0.0.0 www.googleapis.com 0.0.0.0 www.google.com 0.0.0.0 www.google-analytics. ...

  8. Leaflet+heatmap实现离线地图加载和热力图应用

    本人博客主页:http://www.cnblogs.com/webbest/ 2017年春节已经过完,新一年的奋斗也刚刚开始.今年要经历的挑战也是大大的...不扯了. 年底前软件项目相对较多,恰巧在年 ...

  9. Leaflet 操作OSM(OpenStreetMap) 设置地图style

    Leaflet是一个开源的地图操作库,其中mapbox是其一个插件,这个插件可以自定义想要的地图格式.https://www.mapbox.com/mapbox-gl-js/api/这是其官网地址. ...

随机推荐

  1. Tree Widget -- 基本方法

    Tree Widget这个空间类似于一种表格的形式,是一种树状结构 效果图: 第一步:打开designer.exe,拖动一个Tree Widget空间到主窗口上 第二步:双击Tree Widget,添 ...

  2. 🏆【Java技术专区】「探针Agent专题」Java Agent探针的技术介绍(1)

    前提概要 Java调式.热部署.JVM背后的支持者Java Agent: 各个 Java IDE 的调试功能,例如 eclipse.IntelliJ : 热部署功能,例如 JRebel.XRebel. ...

  3. root密码找回

    1,启动系统时,按上下键,选择第一项,按e. 2,编辑kernel中,将rhgb quiet 替换作init=/bin/sh.回车确认修改 3,根据提示按b键继续启动. 4,进入bash窗口并有管理员 ...

  4. 95后新同事年薪35W+,老员工却“自愿申请”降薪10%,中年职场人正在崩溃

    蔡依林在演唱会上说过的一句话:"在乐坛摸爬滚打这么多年,遭遇了那么多质疑和嘲讽还能挺立到今天,然后想说40岁是个很棒的年纪......",让很多在职场打拼多年的老员工感慨颇深. 真 ...

  5. Java 常用类库与技巧【笔记】

    Java 常用类库与技巧[笔记] Java异常体系 Java异常相关知识 Java在其创立的时候就设置了比较有效的处理机制,其异常处理机制主要回答了三个问题:what,where,why what表示 ...

  6. AttributeError: module 'numpy' has no attribute 'num'

    AttributeError: module 'numpy' has no attribute 'num' 写在前面 总的来说,先看看自己用的计算方式是不是写对了先,多个一起使用的话记得都看看 通过想 ...

  7. 安鸾CTF Writeup wordpress 01

    题目一: wordpress 01 URL:http://whalwl.site:8041/ wordpress 站思路就是先用wpscan 进行扫描检测一遍. wpscan 使用方法可以参考两篇文章 ...

  8. S3C2440—1.熟悉裸机开发板

    文章目录 一.板载资源介绍 二.安装驱动及上位机 1.USB的驱动及上位机 2.eop驱动安装 3.安装烧录软件oflash 三.烧写开发板 1.预备知识 2.烧写裸板 3.使用u-boot烧写程序 ...

  9. SQL 练习3

    查询存在" 01 "课程,可能不存在" 02 "课程的情况(不存在时显示为 null ) SELECT * FROM (SELECT * FROM SC WHE ...

  10. noip11

    T1 考试的时候打的暴力,快结束的时候,脑抽加了个 long long,然后就... 痛失70pts QAQ. Your source code compiled to 8015900 bytes w ...