基于MySQL + Node.js + Leaflet的离线地图展示,支持百度、谷歌、高德、腾讯地图
1. 基本说明
本项目实现了离线展示百度、谷歌、高德、腾讯地图。主要功能如下:
展示效果如下:
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的离线地图展示,支持百度、谷歌、高德、腾讯地图的更多相关文章
- 基于 Angularjs&Node.js 云编辑器架构设计及开发实践
基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...
- node.js与HTML5离线缓存
最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...
- Vue3.0中引入地图(谷歌+高德+腾讯+百度)
1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...
- 基于Vue+node.js的个人博客
前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss 因为当时没学vu ...
- 在阿里云ECS CentOS7上部署基于MongoDB+Node.js的博客
前言:这是一篇教你如何在阿里云的ECS CentOS 7服务器上搭建一个个人博客的教程,教程比较基础,笔者尽可能比较详细的把每一步都罗列下来,包括所需软件的下载安装和域名的绑定,笔者在此之前对Linu ...
- 腾讯云部署golang flow流程,vue.js+nginx+mysql+node.js
这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东 ...
- 基于Hexo+Node.js+github+coding搭建个人博客——基础篇
附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...
- node.js和npm离线安装
离线安装node.js和npm 1.下载官方安装包并拷贝到离线机器上. 官方下载地址:https://nodejs.org/en/download/ 2.解压文件: tar-xJf node-v8.9 ...
- MySQL+Node.js连接和操作
在本节中,您将学习如何使用mysql模块从node.js应用程序与MySQL进行交互. 我们将向您展示如何使用Node.js连接到MySQL,执行常用操作,如使用mysql模块API执行插入,选择,更 ...
随机推荐
- Archlinux运行FlashTool
首先,http://www.flashtool.net/index.php下载linux版的FlashTool,并且按照其说明在/etc/udev加入如下字段: SUBSYSTEM== »usb », ...
- SSH整合的详细步骤
SSH整合 新建一个动态web工程-->加入Spring-->加入Hibernate-->加入Struts2 1.在 web中应用Spring 目的:在web应用程序加载成功之后,就 ...
- Stack by pointer
前言:因为栈的很多操作是基于表的,所以这篇文章里的例程就不再大面积地写注释了,有不理解的地方可以翻看之前的链表笔记,或者直接写在评论区. 咳咳,说到这个栈,很多人乍听之下感觉很陌生.卧槽这是什么玩意. ...
- java 操作hbase1.2
说明: .第一部分为代码 .第二部分为工程pom文件 [java] view plain copy import org.apache.hadoop.conf.Configuration; impor ...
- 【20171104中】chrome自动刷新网页
target:刷访问量 tools:chrome / url start: s1:百度知道,https://zhidao.baidu.com/question/750134067096113532.h ...
- Ipad,IPhone(矩阵求递推项+欧拉定理)
Ipad,IPhone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- Linux中常见问题(磁盘 定时任务)
第1章 linux无法上网 1) 第一步,先ping域名. ping www.baidu.com 2)再ping一个公网ip , ping 223.5.5.5/223.6.6.6/114.11 ...
- JAVA中文乱码之解决方案
1.解决HTML页面的中文问题:为了使HTML页面很好的支持中文,在每个HTML页面的<head>标签内部增加(创建HTML页面自带) <head> <meta char ...
- [java基础] java中的自动装箱与自动拆箱
自动装箱的一个例子: Integer i = 1; //实际上是执行了Integer i = Integer.valueOf(1) 自动拆箱的一个例子: Integer a =1; int b = a ...
- eclipse安装checkstyle无法加载到preferences的问题
描述一下问题,eclipse安装checkstyle,不管是在线安装还是下载安装,在preferences都没有checkstyle选项,如下: 然我们要的效果是这样的: 解决方案如下: 1 启动 ...