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

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. 第四篇 -- Go语言string转其他类型

    1. string转int // 法1:string转int num_str := "1234567" /* ParseInt():查看文档https://studygolang. ...

  2. kali操作系统安装google浏览器

    安装的kali操作系统版本是kali-linux-2020.2-installer-amd64.iso 参考链接:https://www.cnblogs.com/Young-wind/p/585502 ...

  3. 快速上手pandas(下)

      和上文一样,先导入后面会频繁使用到的模块: In [1]: import numpy as np import pandas as pd import matplotlib.pyplot as p ...

  4. vulnhub-DC:7靶机渗透记录

    准备工作 在vulnhub官网下载DC:7靶机DC: 7 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 已经知道了靶 ...

  5. 大学同学做Java开发比我多5K，八年老Android只会crud该转Java吗？

    最近在网上看到这样一个帖子: 做了八年Android开发,感觉这块做着也挺没意思,日常工作就是做一些架构优化,质量数据监控,改一改构建脚本,最主要的是业务负责人没有一个是做客户端的,都是后端的人. 最 ...

  6. EL表达式和JSTL标签

    什么是 EL 表达式,EL 表达式的作用? EL 表达式的全称是:Expression Language.是表达式语言. EL 表达式的什么作用:EL 表达式主要是代替 jsp 页面中的表达式脚本在 ...

  7. 记客户端出现Connect reset问题排查。

    客户访问我们地址出现Connect reset. 网上查询说是服务端关闭,客户端还在读,就会出现Connect reset. 我们就排查为什么服务端会关闭. 网络的同事说收到了客户端的信息,但是被服务 ...

  8. CVE-2020-0796提权操作

    简介 最新的windows10中使用了SMBv3协议,SMBv3协议在压缩消息时,未对头部数据做任何检查,导致恶意攻击者可以直接使用,从而导致内存破坏漏洞. 该漏洞可远程进行攻击目标系统,但目前只做到 ...

  9. 黑马JVM教程——自学笔记（一）

    一.引言 1.1.什么是JVM 定义: Java Virtual Machine - java的运行环境(java二进制字节码的运行环境) 好处: 一次编写,导出运行 自动内存管理,垃圾回收功能 数组 ...

  10. 【AIOT】智能感知--人

    From: https://liudongdong1.github.io/ 1. 人体存在感知 目标:检测环境中的所有人体,标记出每个人体的坐标位置:不限人体数量,适应中低空斜拍.人体轻度遮挡.截断等 ...