当前位置:首页 > 前端 > JavaScript > 正文内容

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

放牧的风7年前 (2017-12-06)JavaScript1254

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。


扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/1.html

分享给朋友:
返回列表

没有更早的文章了...

下一篇:js中push(),pop(),unshift(),shift()的用法小结

相关文章

js中push(),pop(),unshift(),shift()的用法小结

js中push(),pop(),unshift(),shift()的用法小结

1、push()、pop()和unshift()、shift()这两组同为对数组的操作,并且会改变数组的本身的长度及内容。不同的是 push()、pop() 是从数组的尾部进行增减,unshift()、shift() 是从数组的头...

ES6必知必会 —— Module

ES6必知必会 —— Module

1. ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范,基本特点如下:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存...

JavaScript ES6 系列目录

JavaScript ES6 系列目录

ES6 系列之 let 和 constES6 系列之模板字符串ES6 系列之箭头函数ES6 系列之模拟实现 Symbol 类型ES6 系列之迭代器与 for ofES6 系列之模拟实现一个 Set 数据结构ES6 系列之 WeakMapES...

JavaScript 中常见设计模式整理

JavaScript 中常见设计模式整理

开发中,我们或多或少地接触了设计模式,但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点,从而对它们有比较清晰的认知。JavaScript 中常见设计模式单例模式策略模式代理模式迭代器模式发布-...

二叉树及其遍历方法:JavaScript实践

二叉树及其遍历方法:JavaScript实践

二叉树常见的数组,栈,列表都是线性结构常见的树型结构有:文件夹目录,dom结构,路由的配置...二叉树二叉树是每个结点最多有两个子树的树形结构,每个结点的度最多是2。左边的称为 左子树 , 右边的称为 右子树 , 左子树 , 右子树 是有顺...

JavaScript中undefined与null的区别

JavaScript中undefined与null的区别

大多数计算机语言,有且仅有一个表示"无"的值,比如,C语言的NULL,Java语言的null,Python语言的None,Ruby语言的nil。有点奇怪的是,JavaScript语言居然有两个表示"无"...

评论列表

访客
3周前 (07-08)

收藏了,很不错的内容!http://65k8.jsytbz.com/

访客
3周前 (07-08)

网站做得不错http://6a45.cdjryg.com/

访客
3周前 (07-08)

知识就是力量啊!http://96nz0.jsytbz.com/

访客
3周前 (07-08)

楼上的能详细介绍一下么?http://yu0vhg.cdjryg.com/

访客
3周前 (07-07)

楼主是在找骂么?http://imn3.eb-ray.com/

访客
3周前 (07-07)

楼主是我最崇拜的人!http://2cxym.eb-ray.com/

访客
3周前 (07-07)

楼主今年多大了?http://54fgi.2sc518.com/

访客
3周前 (07-07)

楼主该去看心理医生了!http://vtl8e0.hw-mx.com/

访客
3周前 (07-06)

支持楼上的!http://r40h.1hunk.com/

访客
3周前 (07-06)

最近回了很多帖子,都没人理我!http://7vk.1hunk.com/

访客
3周前 (07-06)

不错哦,楼主这是要火的节奏啊!http://j79cks.1hunk.com/

访客
3周前 (07-06)

楼主加油,看好你哦!http://9ff.1hunk.com/

访客
3周前 (07-06)

楼主的头像是本人吗?http://2rvg.10000flower.cn/

访客
3周前 (07-06)

论坛的人气不行了!http://hmg.http://3bi.net/post/543.html/

访客
3周前 (07-06)

有内涵!http://j5lbhc.http://3bi.net/post/543.html/

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。