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. binarySearch(int[] a,int fromIndex,int toIndex, int key)的用法

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * binarySearch(int[] a,int ...

  2. intoj

    192.168.0.6:1024 emm....我太健忘了...

  3. jmeter（二十二）内存溢出原因及解决方法

    jmeter是一个java开发的开源性能测试工具,在性能测试中可支持模拟并发压测,但有时候当模拟并发请求较大或者脚本运行时间较长时,压力机会出现卡顿甚至报异常————内存溢出, 这里就介绍下如何解决内 ...

  4. 对称与非对称加密;SSL;HTTPS;AJP

    1.对称加密就是加密与解密的时候都是用一个密码 2.非对称加密,有一对密码A,B:用A加密就得用B解密,相对的用B加密就得用A解密 3.公钥与私钥,这一对密码,随便拿一个公布出去,那个就是公钥,剩下一 ...

  5. Python通过pip方式安装第三方模块的两种方式

    一:环境 python3.6 windows 10 二:常用命令 如果直接执行pip命令报错,说明pip不在path环境变量中 解决方法: python -m pip list 以下默认可直接使用pi ...

  6. HBase篇(3)-架构详解

    [每日五分钟搞定大数据]系列,HBase第三篇 聊完场景和数据模型我们来说下HBase的架构,在网上找了张比较清晰的图,我觉得这张图能说明很多问题,那这一篇我们就重点来解析下这张图 角色与职责 先介绍 ...

  7. .net core实践系列之SSO-跨域实现

    前言 接着上篇的<.net core实践系列之SSO-同域实现>,这次来聊聊SSO跨域的实现方式.这次虽说是.net core实践,但是核心点使用jquery居多. 建议看这篇文章的朋友可 ...

  8. babel (三) babel polly-fill

    Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate ...

  9. 理解git工作区和暂存区

    版本库 在工作区目录中有一个.git文件,这个其实不是工作区而是Git的版本库 版本库中包含两个部分,一个是暂存区index/stage,另一个是git自动为我们创建的第一个分支master,以及一个 ...

  10. [转帖]web安全：通俗易懂，以实例讲述破解网站的原理及如何进行防护！如何让网站变得更安全。

    web安全:通俗易懂,以实例讲述破解网站的原理及如何进行防护!如何让网站变得更安全. https://www.cnblogs.com/1996V/p/7458377.html 感谢原作者写的内容 安全 ...