# OfflineMap

**Repository Path**: skynetliu/offline-map

## Basic Information

- **Project Name**: OfflineMap
- **Description**: OfflineMap
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-20
- **Last Updated**: 2023-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于MySQL + Node.js + Leaflet的离线地图展示

### 一）地图工程开发3个过程

本项目实现了离线展示百度、谷歌、高德、腾讯地图。主要功能如下：

 - 实现了地图瓦片图下载、存储。目前支持存储至[MySQL][1]
 - [Node.js][2]服务调用MySQL中的瓦片图 
 - [Leaflet][3]展示地图

**展示效果如下：**
![展示效果][5]



### 二）地图瓦片下载工具及配置

工具下载地址：https://pan.baidu.com/s/1miMF9nM

工具开源地址：https://github.com/luxiaoxun/MapDownloader

**工具使用方法：**

#### 2.1 工具的数据库配置

 打开工具目录中的 **MapDownloader.exe.config** 文件。根据实际情况填写如图中的配置信息。

> 需要寻找经纬度：可以使用百度工具   https://lbs.qq.com/getPoint/

 ![数据库配置][6]

#### 2.2 mysql数据库创建

> docker run -it --name mysql-test --net host  -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql

```mysql
mysql -h172.17.0.2 -uroot -p123456 
use mysql;
select user,host from user;
-- 执行：（改成自己的密码）
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '123456';
-- 或者：
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456'
FLUSH PRIVILEGES;


create database mapcache ;
use  mapcache ;
```

#### 2.3 地图瓦片图下载

 打开工具目录中 MapDownloader.exe -> 选择画图工具、矩形 -> 

​		地图上框选区域 -> 存储方式选择MySQL数据库 -> Zoom根据需要选择 -> 点击下载
![下载瓦片图][7]

#### 2.4 数据库中存储的瓦片图

![数据库中存储的瓦片图][8]

> 备注：数据库中Type字段指的是地图类型，对于谷歌地图 普通地图（1818940751）、卫星地图（47626774）、标注（1024577166）。此工具功能丰富，可细细研究。
>
> 百度普通地图：788865972 

```mysql
select Tile from gmapnetcache where Type=788865972 and Zoom=3 and X=4 and Y=0 ;
```





### 三）node.js服务配置

 - 修改mysql.js 中的配置。根据实际情况，配置数据库链接
 ![配置数据库链接][9]
 - 进入目录 `cd OfflineMap`
 - 安装资源 `npm install`
 - 启动服务 `npm start`
 - 服务地址 `http://127.0.0.1:3001`



服务启动后：当使用 MapDownloader 抓取百度瓦片数据后，就可以通过 API 进行数据展现：

> http://127.0.0.1:3001/788865972/3/4/0

![](image/0.png)



### 四）地图服务的开发与呈现

打开example文件夹中的map.html即可。

1、map.html 使用 Leaflet js 去操作地图

2、Leaflet js 框架

- 简单试例 ： https://leafletjs.com/examples.html
- 官网学习：  https://leafletjs.com/reference.html









**如本项目对您有所帮助，欢迎Star。**


[1]: https://www.mysql.com/
[2]: https://nodejs.org/en/
[3]: http://leafletjs.com/

[5]: https://images2018.cnblogs.com/blog/1010568/201803/1010568-20180309204134685-1017810917.jpg
[6]: https://images2018.cnblogs.com/blog/1010568/201803/1010568-20180309204153057-258755990.jpg
[7]: https://images2018.cnblogs.com/blog/1010568/201803/1010568-20180309204751868-1305224209.jpg
[8]: https://images2018.cnblogs.com/blog/1010568/201803/1010568-20180309204233316-1946879164.jpg
[9]: https://images2018.cnblogs.com/blog/1010568/201803/1010568-20180309204244557-69518306.jpg