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。

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

  1. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

  2. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  3. Vue3.0中引入地图(谷歌+高德+腾讯+百度)

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  4. 基于Vue+node.js的个人博客

    前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss  因为当时没学vu ...

  5. 在阿里云ECS CentOS7上部署基于MongoDB+Node.js的博客

    前言:这是一篇教你如何在阿里云的ECS CentOS 7服务器上搭建一个个人博客的教程,教程比较基础,笔者尽可能比较详细的把每一步都罗列下来,包括所需软件的下载安装和域名的绑定,笔者在此之前对Linu ...

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

    这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东 ...

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

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...

  8. node.js和npm离线安装

    离线安装node.js和npm 1.下载官方安装包并拷贝到离线机器上. 官方下载地址:https://nodejs.org/en/download/ 2.解压文件: tar-xJf node-v8.9 ...

  9. MySQL+Node.js连接和操作

    在本节中,您将学习如何使用mysql模块从node.js应用程序与MySQL进行交互. 我们将向您展示如何使用Node.js连接到MySQL,执行常用操作,如使用mysql模块API执行插入,选择,更 ...

随机推荐

  1. LINUX 软件管理

    dpkg 安装 dpkg -i package.deb 卸载 dpkg -r packagename 彻底卸载 dpkg -P packagename apt-get 搜查包 apt-cache se ...

  2. JS中处理单个反斜杠(即转义字符的处理)

    问题来源:在表单的<input>标签中对输入的字符串进行大写转换.一不小心输入了反斜杠 \ 如下图所示: 输入 chn\  的时候,在  IE8  下弹出一个js错误.(在实际的项目的表单 ...

  3. 在centos6编译安装http-2.4

    在centos6 编译安装httpd-2.4 安装httpd-2.4 Ü 依赖于apr-1.4+, apr-util-1.4+, [apr-iconv] Ü apr: : apache portabl ...

  4. Vue源码后记-vFor列表渲染(2)

    这一节争取搞完! 回头来看看那个render代码,为了便于分析,做了更细致的注释: (function() { // 这里this指向vue对象 下面的所有方法默认调用Vue$3.prototype上 ...

  5. Windows环境下Android Studio安装和使用教程

    Windows环境下Android Studio安装和使用教程 来源: http://www.cnblogs.com/liuhongfeng/archive/2015/12/30/5084896.ht ...

  6. Lua函数以及闭合函数的理解

    Lua函数以及闭合函数的理解 来源 http://blog.csdn.net/mydad353193052/article/details/48731467 词法域和第一类型 在C/C++,C#或者J ...

  7. Ignatius and the Princess IV(乱搞一发竟然过了)

    B - Ignatius and the Princess IV Time Limit:1000MS     Memory Limit:32767KB     64bit IO Format:%I64 ...

  8. 检测CSS属性 是否支持

    原理是:创建一个节点,判断其的style属性是否含有textOverflow属性,有则进一步判断是否支持ellipsis这个值.当遇到不支持的属性值时,浏览器会直接把这个值抛弃.因此这里就可以先给te ...

  9. idea java项目部署至Tomcat服务器

    1. 服务器部署TomCat     1. 安装JDK,配置环境变量     > 变量名:JAVA_HOME;变量值:C:\Program Files\Java\jdk1.7.0_45      ...

  10. TIBCO EMS安装部署

    创建用户 groupadd -g 800 tibcouseradd -u 801 -g tibco -d /home/tibco/ -s /bin/bash tibco 目前关于sharedatast ...