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

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. Deepin V20.1 解决安装Edge浏览器后更新系统报错的方法

    问题描述:有些人在deepin系统上安装完edge浏览器后采用sudo apt update命令更新系统,却报出了错误,更新失败.原因是更新deepin系统的时候,最好把其它的源禁用了,不然会有各样的 ...

  2. 实时 + 高清 + 超压缩，阿里云视频云发布业内首款 VVC 编码器 Ali266

    基于新一代国际视频编解码标准 H.266/VVC,阿里云视频云近日发布了实时高清编码器 Ali266,有力推动 H.266/VVC 标准应用的落地,真正开启 H.266/VVC 的商用之路,并强力赋能 ...

  3. 通过jstack日志分析和问题排查

    简介 jstack用于生成java虚拟机当前时刻的线程快照.线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合,生成线程快照的主要目的是定位线程出现长时间停顿的原因,如线程间死锁.死循环 ...

  4. LeetCode入门指南 之 排序

    912. 排序数组 给你一个整数数组 nums,请你将该数组升序排列. 归并排序 public class Sort { //归并排序 public static int[] MergeSort(in ...

  5. ip地址分配

    目录 一.子网划分基础 二.子网划分的原理 三.IP地址汇总 四.ip地址规划 一.子网划分基础 二进制: 特点:基数为2,数值部分用2个不同的数字符号0.1表示逢二进一 IP地址:IP地址由32位二 ...

  6. 最全总结 | 聊聊 Python 数据处理全家桶（PgSQL篇）

    1. 前言 大家好,我是安果! Python 数据处理全家桶,截止到现在,一共写过 6 篇文章,有兴趣的小伙伴可以去了解一下! 最全总结 | 聊聊 Python 数据处理全家桶(Mysql 篇) 最全 ...

  7. js中其他数据类型的值转为字符串的相关总结

    有这样一个面试题: 此题考查的是其他类型的值转换为字符串后的结果 下面我们就由此来总结一下其他类型的值转为字符串后的值都是什么? 从上面的实例可以看出,基本数据类型的值转换成字符串都如我们预期的那样. ...

  8. OOP面向对象程序设计原则

    OOP面向对象程序设计原则 开闭原则(Open Close Principle) 对扩展开放,对修改关闭 里氏代换原则(Liskov Substitution Principle) 继承必须确保超累所 ...

  9. CircuitBreaker断路器Fallback如何获取异常

    在Spring Cloud 2020新版里, 可以使用新版的 CircuitBreaker 断路器, 可以配置Fallback, 可以是内部的, 也可以是外部的Fallback. 内部 Fallbac ...

  10. remote: Support for password authentication was removed

    周末提交代码,把代码push到github上,控制台报了下面的错误: remote: Support for password authentication was removed on August ...