1. 所需工具&插件：

1. MapDownloader (提取码: spx6)

2. GISMysqlToLocalFile (提取码: vus6)

3. Leaflet

2. 操作：

1. 参考：java离线地图web GIS制作 下载好所需地图瓦片，本文以百度地图/深圳为例

2. 使用 Leaflet 加载地图瓦片：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>web 版离线地图测试页面</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />    

</head>

<body>

    <div id="map" style="width:90%;height:600px;margin-top:30px;text-align:center;margin:0 auto;">

    </div>

    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

    <script type="text/javascript">

        window.onload=function () {

            var map = L.map('map').setView([22.56414255434805,114.153442382813], 11);

            L.tileLayer('./img/788865972/{z}/{x}/{y}.png'

                , {

                    minZoom: 10,

                    maxZoom: 12,

                    attribution: '<b style="color:#dddddd">百度地图</b>'

                })

            .addTo(map);

        };

    </script>

</body>

</html>

注：本文演示是将瓦片文件与代码文件放在一起，实际使用中最好自建瓦片地图服务。

在线演示

参考：

1. java离线地图web GIS制作

2. chenwuwen/OffineMap

在 Web 页面中使用离线地图的更多相关文章

  1. 关于在asp.net的web页面中的全局变量问题

    在asp.net的web页面中是不是没有全局变量?有的,在Class类内部的都是,只不过在WebWofm程式中跟WinForm和Console程式有些区别,当页面刷新时,它们的值不会保持,依然会再次初 ...

  2. [置顶] 读取pdf并且在web页面中显示

    读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...

  3. php中调用这个功能可以在web页面中显示hello world这个经典单词

    php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...

  4. web页面中可以包含多个对象

    # encoding=utf-8 #python 2.7.10 #xiaodeng #web页面中可以包含多个对象 #HTTP权威指南 10页 #应用程序完成一项任务时通常会发布多个http事务.如: ...

  5. 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置

    企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...

  6. FineBI如何在web页面中嵌入式集成

    1. API嵌入集成 1.1 描述 FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简 ...

  7. web页面中快速找到html对应元素两种方法

    一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个  箭头 按钮,点击它之后,此时将鼠标 ...

  8. 润乾报表一个页面中的echarts地图与其他区块的联动

    需求概述: DBD样式效果如下图所示,需要点击左侧地图中的地区,右侧的仪表盘,柱线图可以对应显示对应该地区的数据. 实现思路: 分别制作带有地图.仪表盘.柱线图的3张报表:将3张报表放到DBD中设置布 ...

  9. 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

随机推荐

  1. Linux如何查看端口状态

    netstat命令各个参数说明如下: -t : 指明显示TCP端口 -u : 指明显示UDP端口 -l : 仅显示监听套接字(所谓套接字就是使应用程序能够读写与收发通讯协议(protocol)与资料的 ...

  2. sql注入的防护

    一.严格的数据类型 在Java,C#等高级语言中,几乎不存在数字类型注入,而对于PHP,ASP等弱类型语言,就存在了危险. 防御数字型注入相对简单,如果不需要输入字符型数据,则可以用is_numeri ...

  3. Matconvnet笔记（一）

    参考网址:http://www.vlfeat.org/matconvnet/ 内容参考博客:http://blog.sina.com.cn/s/blog_92cd3a1c0102x1ch.html M ...

  4. <unix网络编程>UDP套接字编程

    典型的UDP客户/服务器程序的函数调用如下: 1.缓冲区 发送缓冲区用虚线表示,任何UDP套接字都有发送缓冲区,不过该缓冲区仅能表示写到该套接字的UDP数据报的上限.如果应用进程写一个大于套接字缓冲区 ...

  5. 进程同步控制(锁,信号量,事件), 进程通讯(队列和管道,生产者消费者模型) 数据共享(进程池和mutiprocess.Pool模块)

    参考博客 https://www.cnblogs.com/xiao987334176/p/9025072.html#autoid-1-1-0 进程同步(multiprocess.Lock.Semaph ...

  6. mysql 实现树形的遍历

    前言:关于多级别菜单栏或者权限系统中部门上下级的树形遍历,oracle中有connect by来实现,mysql没有这样的便捷途径,所以MySQL遍历数据表是我们经常会遇到的头痛问题,下面通过存储过程 ...

  7. 记一次 OutOfMemoryError: Java heap space 的排错

    1.情况概述 公司以前的某报名系统,项目启动后,在经过用户一段时间的使用之后,项目响应便开始变得极其缓慢,最后几乎毫无反应.日志里输出了一些似乎无关痛痒的异常,逐步修复,项目仍然出现这种情况,且 &q ...

  8. find和grep命令合集

    linux grep命令 1.作用Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expressi ...

  9. Python-生成器_监听文件输入的例子_37

    def tail(filename): f = open(filename,encoding='utf-8') while True: line = f.readline() if line.stri ...

  10. mybatis入门 配置文件解释 及测试

    这里介绍一下mybatis  根据mybatis的官网说明,mybatis是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置 ...