1. The first tile data source
MapDownloader（BigeMap）：
Link:https://pan.baidu.com/s/1Hz__HcA5QhtGmjLNezC_pQ
Extraction code:6lek
GISMysqlToLocalFile：
Link:https://pan.baidu.com/s/1rzVsj_DJxKr6OyvRwve4dg
Extraction code:pp6f
self test can be used
The tutorial comes from: https://www.cnblogs.com/kanyun/p/8571711.html
Load map tiles with Leaflet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web 版离线地图测试页面</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript">
window.onload=function () {
var map = L.map('map').setView([34.3195,108.9131], 11);
L.tileLayer('./map/{z}/{x}/{y}.png' //瓦片路径
, {
minZoom: 1,
maxZoom: 18,
attribution: '<b style="color:#dddddd">百度地图</b>'
})
.addTo(map);
};
</script>
</body>
</html>For more complex operations of leaflet, you can view the Chinese document:
leafLet API Chinese document translation_leaflet Chinese document_YXWik6's blog-CSDN blog
2. The second tile data source
Almighty electronic map downloader (cracked version)
Link:https://pan.baidu.com/s/1EBa0Ck8UGiFK0G7DCUhw1w
Extraction code:i8yc
self test can be used
The tutorial comes from: Almighty Electronic Map Downloader - a tool for obtaining offline map tiles_maptiledownloader_Haoxing's Blog-CSDN Blog
3. The third source is online, which requires self-testing
Source: Offline tile map - short book
content:
Web GIS offline solution:
In the CS system, it can be done based on GMap.Net, refer to "Baidu Google Offline Map Solution"
The following describes how the Web system uses GIS slice data to develop a web GIS system.
First of all, the development of web GIS mainly uses some front-end frameworks. The current mainstream gis front-end frameworks are openlayers and Leaflet.
Open the map downloader (the tool is in the github project at the bottom, you can download it yourself)
Find the MapDownloader.exe.config file to modify
The specific thing is to modify the content in my red box: the database address, user name and password, etc., just change it to your own
Save the modification, double click 
then do some settings
First select the mysql database, and then select the place where you want to download the map . I choose Beijing here, and choose according to your own needs. If the selected location is too large, the download time will be very long.
Next, select the map. This step is very important. I wasted a long time on this step. I didn’t select the map at the beginning, but the map didn’t show up. I changed the background to Baidu and Google, but it didn’t work if I changed to AutoNavi The problem is, individuals can choose according to the situation
This is the menu, select the map provider that needs to be downloaded, after the selection is complete, double-click to pop up a prompt box
This is the level for you to choose to download. Generally speaking, it is the fineness of the map. The higher the level, the more accurate the map can be displayed. It should be noted that when the level exceeds 15, the data volume of the map will be particularly large . Here is The appearance of the map with level 15 can be judged by the individual according to the situation
It's probably like this when the level is selected to 15
After waiting for the download to complete, enter your mysql database and find that a new data table has been created
The next thing to do is to export the data of this database table into a tile map (in fact, it is a regular 256*256 picture)
Open GISMysqlToLocal.exe (the download address will be given later)
Fill in all the fields, and then click Export to export the picture. After the export is complete, enter the folder you exported, and you can see the exported content like this
They are all in the form of folders and folders, and then go to the exported folder and use Ngix to start the service, that is, put all the pictures here in the web server. You can use Nginx, Apache, or even tomcat
Here I will only introduce how to configure static resource access with tomcat
We all know that tomcat can configure static resources and dynamic resources, but in the actual work process, we put static resources and dynamic resources into the source code of a project and package and deploy them. Then for our offline map, static resources are very big,
It is obviously unrealistic to put offline maps and our code into one project, so we need to put static resources in other paths
like:
/data/googlemaps
Then we put the file in this directory, how does the browser access it, if you use tomcat, configure it here
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log."
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/webapps/officeMap" reloadable="true" debug="0" crossContext="true"/>
<Context path="/googleMap" docBase="/data/googleMap" reloadable="true" debug="0" crossContext="true"/>
</Host>Pay attention to the marked color. Generally, we only configure a Context tag (your application) under the Host tag. In fact, you can configure two tags to indicate different addresses of the same port. After restarting tomcat, when you visit http: //localhost:8080/googleMap/hello.png, you can access static resources
Of course, you can directly access your application localhost:8080 is no problem
Of course, whichever you are used to is fine (Nginx is recommended for the production environment, tomcat is recommended for the test environment, because it can save the configuration of Nginx), as long as I can access it through a browser in the future (I use a http-server tool here, However, you need to install Node first, depending on your individual needs). After the startup is complete, the test uses a browser to access the specific "ip+port+path". If you can access the picture, it means that the service has started successfully. For now, don't worry about it
Next write the html page
The first step is to introduce js css
The ones marked with arrows must be introduced
next
#定义一个DIV作为地图的容器，一定要为它设置wdith,height
<div id="map">
</div>Next write 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);The above is the initialization method of the map:
After writing, save and double-click the html and you should be able to see the map
The red box is the content I added later. So far, the offline map has basically been created. If you want to realize more functions, such as map search and map markers, you can see my source code and official website API
What needs to be mentioned in particular is that the search for offline maps requires location information in your intranet database, and then grabs the third-party location information and puts it in your own database for searching, etc. some
However, Leaflet's functions are still very rich.
You can check it on the official website: http://leafletjs.com/
Regarding the extended function of search, I have already written it in my background source code. First, I need to create a database table. This table needs to have the latitude and longitude, name, location information and other fields of the coordinates you grab. The method of coordinate grabbing can be done by Baidu , but you need to remember one thing, what map do you download with the map downloader, grab the coordinate information
As far as the coordinate information of which map is captured, the data I tested was downloaded from the Internet. If you need the latest data, you need to capture it yourself. I wrote it using springboot in the background, built table sql, and downloaded map tools are included in it, directly download the source code, open the map downloader, download the map, and then export the tile image
Then grab some coordinate information, you can see the map, and realize the search function
Source link: https://github.com/chenwuwen/OffineMap
Reposted from: Intranet Offline Map_gismysqltolocalfile_YXWik6's Blog - CSDN Blog