正文自： https://www.cn blogs.com/Kan yun/p/8571711.html
为了项目的需要，制作网络地图。 以前做过高德的在线地图，因为它提供了一系列的API，是国产的，所以比较容易开发。 目前，项目正在内部网中使用，因此需要使用离线地图。 从这里开始：
Web GIS脱机解决方案：可以在CS系统上基于GMap.Net创建。 请参见《百度谷歌离线地图解决方案》
下面介绍Web系统如何使用GIS切片数据开发web GIS系统。
首先，web gis的开发主要采用几种前端框架。 目前主流的GIS前端框架为openlayers 和Leaflet 至于两者的优劣，读者可以自行百度。 我在项目中使用了Leaflet
打开地图下拉列表器(该工具位于底部的github项目中，可以自行下载)
找到并修改MapDownloader.exe.config文件
具体来说，是修改我的红框内容。 将这个数据库地址、用户名、密码等属性更改为自己的就可以了
保存，双击
然后做一些设定
首先选择mysql数据库，然后选择下载地图的位置。 我在这里选择北京。 根据自己的需求进行选择。 如果选择的位置太大，下载时间会变长
接下来选择地图。 这一步的操作非常重要。 我在这一步迟到了很久。 因为一开始的时候没有选择地图，所以有时地图会显示不出来。 在后台换百度，换谷歌也没关系。 个人可以根据情况进行选择
在此菜单中，选择要下载的地图提供位置，并在完成选择后双击弹出框
这个会让你选择下载的等级。 通俗地说，就是地图的精细度。 级别越大，地图越能正确显示。 需要注意的是，如果级别超过15，地图的数据量会特别大。 这里显示了15级地图的样子。 个人可以根据情况进行判定
选择到15级的话，大概是这样的
等待下载完成，然后进入mysql数据库并发现已创建新的数据表
下一步应该做的是将此数据库表中的数据导出到平铺地图中。 (实际上是规则的256*256图像) ) ) ) ) )。
打开GISMysqlToLocal.exe。 下载地址将在后面叙述。
完成后，点击导出即可导出图像。 导出完成后，进入导出的文件夹。 导出的内容如下所示
都是文件夹封套形式，前往导出的文件夹下，使用Ngix启动服务。 也就是说，将这里的所有图像放入web服务器。 可以使用Nginx，可以使用Apache，也可以使用tomcat
本节介绍如何使用tomcat配置静态资源访问
我们知道tomcat可以配置静态和动态资源，但在实际工作中，我们将静态和动态资源打包部署在一个项目的源代码中。 在离线地图中，静态资源非常大。
将离线地图和我们的代码放在一个项目中显然是不现实的，所以必须将静态资源放在不同的路径中
例如：
/data/googlemaps将文件放在此目录中。 浏览器如何访问？ 如果使用tomcat，请在此处配置
1
2
3
4
5
6
7
8
9
hostname=' localhost ' app base=' web apps ' unpack wars=' true ' auto deploy=' true '
valve class name=' org.Apache.catalina.valves.access log valve ' directory=' logs ' prefix=' localhost _ access _ '
suffix='.txt ' pattern=' % h % l % u % t ' % r ' % s % b ' /
！ 在Host选项卡下添加Context选项卡。 path是服务器的url请求地址。 例如，127.0.0.1/data。
docBase是服务器文件的路径，reloadable是在omcat不重新启动的情况下实时同步本地目录。
可以在一个虚拟主机下配置多个Comtext标记---
context path='/' docbase='//usr/local/Tomcat/web apps/office map ' reloadable=' true ' debug='0' cross con
text="true"/><Context path="/googleMap" docBase="/data/googleMap" reloadable="true" debug="0" crossContext="true"/>
</Host>
注意标注颜色的地方，一般我们都只是在Host标签下配置一个Context标签(你的应用)，其实是可以配置两个标签，表示同一个端口的不同地址，重启tomcat之后，这样rqdsg访问 http://localhost:8080/googleMap/hello.png，就可以访问静态资源了
当然你直接访问你的应用 localhost:8080 也是没有问题的
当然你习惯哪个都行(生产环境推荐Nginx，测试环境推荐使用tomcat，因为可以省的配置Nginx)，只要我之后可以通过浏览器去访问就可以（我这里使用了一个http-server的一个工具，不过需要先安装Node，具体看个人需求了），启动完成之后，测试使用浏览器访问 具体就是 “ip+端口+路径” 能访问到图片说明服务已经启动成功， 暂且先不用管他
接下来编写html页面
第一步引入js css
标箭头的是必须要引入的
接下来
#定义一个DIV作为地图的容器，一定要为它设置wdith,height<div id="map"></div>接下来写js
var map #这个地址就是你刚才启动服务器的地址 788865972 代表你导出图片的最上层文件夹，这个文件夹也是自动生成的 var osmUrl = 'http://localhost/788865972/{z}/{x}/{y}.png'; var osmAttrib = '<b style="color:#dddddd">高德地图</b>'; var osm; $(function () { osm = L.tileLayer(osmUrl, { minZoom: 5, maxZoom: 15, attribution: osmAttrib }); map = L.map('map') .setView([39.908419, 116.397743], 10) .addLayer(osm);以上就是地图的初始化方法：
写完之后，保存双击html 就应该可以看到地图了
红框是我后加的内容，至此离线地图基本已经创建完成了，要想实现更多的功能，比如地图搜索，地图标记可以看我的源码，以及官网的API
特别需要提一点的是关于离线地图的搜索，是需要你内网的数据库里面有位置信息，然后把第三方的位置信息抓取过来，放到自己的数据库里进行搜索等等，并非leafletjs所自有的
不过Leaflet的功能还是非常丰富的
可以自行到官网查看：http://leafletjs.com/
关于搜索的扩展功能，我的后台源码里已经写了，首先自己需要创建一张数据库表，此表需要有你抓取坐标的经纬度，名称，位置信息等字段，坐标抓取方法，可自行百度，单需要记住一点，你用地图下载器下载的什么地图，抓取坐标信息
就抓取哪个地图的坐标信息，我测试的数据是在网上下载的，如果你需要最新的数据，那么需要自己去抓取。我后台使用springboot写的，建表sql，已经下载地图工具都包含大胆的芹菜了，直接下载源码，打开地图下载器，下载地图，然后导出瓦片图片
再抓取一些坐标信息，就可以看到地图，并且实现搜索功能了
源码连接：https://github.com/chenwuwen/OffineMap