基于MySQL + Node.js + Leaflet的离线地图展示,支持百度、谷歌、高德、腾讯地图

1. 基本说明

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

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

展示效果如下:

2. 地图瓦片下载工具及配置

工具下载链接: http://pan.baidu.com/s/1qYoHj4K 密码: ehgh 工具使用方法:

  • 数据库配置

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

  • 地图瓦片图下载

打开工具目录中 MapDownloader.exe -> 选择画图工具、矩形 -> 地图上框选区域 -> 存储方式选择MySQL数据库 -> Zoom根据需要选择 -> 点击下载

  

  • 数据库中存储的瓦片图

备注:数据库中Type字段指的是地图类型,对于谷歌地图 普通地图(1818940751)、卫星地图(47626774)、标注(1024577166)。此工具功能丰富,可细细研究。

3. node.js服务配置

  • 修改mysql.js 中的配置。根据实际情况,配置数据库链接

  • 进入目录 cd OfflineMap
  • 安装资源 npm install
  • 启动服务 npm start
  • 服务地址 http://127.0.0.1:3001

4. 页面展示

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

GitHub地址:https://github.com/dxxzst/OfflineMap

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

时间: 2024-10-13 11:36:00

基于MySQL + Node.js + Leaflet的离线地图展示,支持百度、谷歌、高德、腾讯地图的相关文章

node.js与HTML5离线缓存

最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node.js与HTML5离线缓存的,但是apache之类的却一大堆.在看完网易云课堂的一个php教程之后,开始理解了HTML5的离线缓存原理,并成功搭配node.js实现了. 首先简要讲一下HTML5离线缓存的原理. 浏览器向服务端发出请求,请求获取一份MIME类型为 text/cache-manifes

APICloud打开三方地图整合(百度,高德,腾讯,苹果自带)

一直想系统的整理打开地图的方法,今天抽时间把了百度,高德,腾讯,苹果自带地图都整理出来了,闲话不多说,直接上干货 ----------------------------------------------------------------------code start---------------------------------------------------------------------------------------------------- <!DOCTYPE HT

基于Hexo+Node.js+github+coding搭建个人博客——基础篇

附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My Blog Trip - Power By Hexo 记录一下搭建的基本过程以及遇到的一些问题,仅供参考 = =废话不多说,进入主题 Hexo博客搭建的基础大致流程为: 安装Node.js →安装Git → 安装Hexo → 安装主题 → 本地测试运行 → 注册给github与coding并创建pa

node.js和npm离线安装

离线安装node.js和npm 1.下载官方安装包并拷贝到离线机器上. 官方下载地址:https://nodejs.org/en/download/ 2.解压文件: tar-xJf node-v8.9.4-linux-x64.tar.xz 2.放到相应目录例如/opt/ sudo mvnode-v8.9.4-linux-x64 /opt/ 3.建立文件链接使npm和node命令到系统命令 sudo ln -s /opt/node-v8.9.4-linux-x64/bin/node /usr/lo

腾讯云部署golang flow流程,vue.js+nginx+mysql+node.js

这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东西,直接传到任意文件里,运行即可.--当然,适用于小型的东西. vue.js,要安装node.js环境,要nginx环境,要配置nginx跨域:要安装mysql数据库,要配置用户.体验地址: http://111.230.181.182:8080 有问题多多交流啊:qq504284 微信hotqin

百度、高德开撕地图,手机地图第一争霸背后的阳谋

百度更多是C端用户使用频率更高,高德在B端用途更大,地图争霸,目标却是O2O 文/张书乐 这个周末,地图行业第一之争的舆论战打得火热.此次口水战的起源是高德单方面宣称"已成为行业第一",隔空喊话百度地图"不服来战",并宣称将允许第三方数据公司QuestMobile监测验证.百度地图第一时间发文回应,甩出三家权威机构数据和用户评测结果,吊打高德数据"掺水".不过,高德并未消停,仍放话坚持用第三方数据说话.面对友商如是挑衅,百度地图官方再度强势回应,

js原生钟表(属性只支持的谷歌)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分页</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=

搭建Ghost 基于Node.js的开源博客系统

 安装MySQL # 安装MySql $ apt-get update # 更新组件 $ apt-get install mysql-server mysql-client -y # 快速安装-y代表默认选择y省去了回车,这时只需要设置mysql的root密码 # 设置mysql的编码 $ sudo vi /etc/mysql/mysql.cnf # 搜索到[mysqld] 插入collation-server = utf8_unicode_ci init-connect = 'SET NA

Node.js安装 下载

1.安装Node.js https://nodejs.org/en/ 安装步骤: 点击安装包 按提示进行安装 Node.js 安装配置 本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法. 本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例. Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/. 你可以根据不同平台系统选择你需要的 Node.js 安装包. Node.js 历史版本下