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. 在.NET Framework中慎用DirectoryInfo.GetFiles方法

    .NET Framework中的DirectoryInfo.GetFiles方法,可以在一个文件夹下通过通配符找出符合条件的文件. 我们首先在文件夹C:\DemoFolder下定义两个文件:demo. ...

  2. jar包读取外部文件

    public static void main(String[] args) { String path1 = System.getProperty("user.home");// ...

  3. FineUIMvc v1.4.0 发布了（ASP.NET MVC控件库）！

    FineUIMvc v1.4.0 已经于 2017-06-30 发布,FineUIMvc 是基于 jQuery 的专业 ASP.NET MVC 控件库,是我们的新产品.由于和 FineUI(专业版)共 ...

  4. Spring使用MappingJackson2MessageConverter发送接收ActiveMQ消息

    一.Spring使用JmsTemplate简化对JMS的访问 在JAVA对JMS队列访问中,使用默认的JMS支持将存在大量的检查型异常.通过Spring的支持,可以将所有的JMS的检查型异常转换为运行 ...

  5. mysql数据的导入和导出

    一. mysqldump工具基本用法,不适用于大数据备份   1. 备份所有数据库: mysqldump -u root -p --all-databases > all_database_sq ...

  6. Day4 Python基础之数据类型（三）

    计算机中,一切皆为对象 世界万物,皆为对象,一切对象皆可分类 ------------------------------------我是分割线---------------------------- ...

  7. Spring Boot 中使用 @Transactional 注解配置事务管理

    事务管理是应用系统开发中必不可少的一部分.Spring 为事务管理提供了丰富的功能支持.Spring 事务管理分为编程式和声明式的两种方式.编程式事务指的是通过编码方式实现事务:声明式事务基于 AOP ...

  8. 单列模式，装饰器、new方法、类/静态方法实现单列模式

    一.单列模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在. 如,某个服务器程序的配置信息存放在一个文件中,客户端通过一个 C ...

  9. Python_迭代器、生成器、列表推导式，生成器表达式

    1.迭代器 (1)可迭代对象 s1 = ' for i in s1: print(i) 可迭代对象 示例结果: D:\Python36\python.exe "E:/Python/课堂视频/ ...

  10. JavaWeb连接SQLServer数据库并完成一个登录界面及其功能设计。

    一.JDBC连接SQLserver数据库的步骤: 1.下载SQLserver的JDBC驱动文件——Microsoft JDBC Driver 4.0 for SQL Server 2.例如下载得到的文 ...