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. Archlinux运行FlashTool

    首先,http://www.flashtool.net/index.php下载linux版的FlashTool,并且按照其说明在/etc/udev加入如下字段: SUBSYSTEM== »usb », ...

  2. SSH整合的详细步骤

    SSH整合 新建一个动态web工程-->加入Spring-->加入Hibernate-->加入Struts2 1.在 web中应用Spring 目的:在web应用程序加载成功之后,就 ...

  3. Stack by pointer

    前言:因为栈的很多操作是基于表的,所以这篇文章里的例程就不再大面积地写注释了,有不理解的地方可以翻看之前的链表笔记,或者直接写在评论区. 咳咳,说到这个栈,很多人乍听之下感觉很陌生.卧槽这是什么玩意. ...

  4. java 操作hbase1.2

    说明: .第一部分为代码 .第二部分为工程pom文件 [java] view plain copy import org.apache.hadoop.conf.Configuration; impor ...

  5. 【20171104中】chrome自动刷新网页

    target:刷访问量 tools:chrome / url start: s1:百度知道,https://zhidao.baidu.com/question/750134067096113532.h ...

  6. Ipad,IPhone(矩阵求递推项+欧拉定理)

    Ipad,IPhone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  7. Linux中常见问题(磁盘 定时任务)

    第1章 linux无法上网 1)     第一步,先ping域名. ping www.baidu.com 2)再ping一个公网ip , ping 223.5.5.5/223.6.6.6/114.11 ...

  8. JAVA中文乱码之解决方案

    1.解决HTML页面的中文问题:为了使HTML页面很好的支持中文,在每个HTML页面的<head>标签内部增加(创建HTML页面自带) <head> <meta char ...

  9. [java基础] java中的自动装箱与自动拆箱

    自动装箱的一个例子: Integer i = 1; //实际上是执行了Integer i = Integer.valueOf(1) 自动拆箱的一个例子: Integer a =1; int b = a ...

  10. eclipse安装checkstyle无法加载到preferences的问题

    描述一下问题,eclipse安装checkstyle,不管是在线安装还是下载安装,在preferences都没有checkstyle选项,如下: 然我们要的效果是这样的:   解决方案如下: 1 启动 ...