基于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执行插入,选择,更 ...
随机推荐
- Java Scanner类
package io; import java.util.*; public class useScanner { public static void main(String[] args) { S ...
- C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符
C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符如果PLSQL Develope能连接上而用代码无法连接上则可以考虑sqlnet.ora文件中是否有NAMES.D ...
- Long Long Message(后缀数组)
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 30427 Accepted: 12 ...
- 0_Simple__clock + 0_Simple__clock_nvrtc
使用 clock() 函数在CUDA核函数内部进行计时,将核函数封装为PTX并在另外的代码中读取和使用. ▶ 源代码:文件内建核函数计时. #include <stdio.h> #incl ...
- Display 和Visible 区别
一. web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意 1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后, ...
- 【G彩娱乐网】作为一名程序员,我应该如何选购一台电脑?
G彩娱乐网说到程序员专用电脑,那肯定是苹果电脑.优点有很多,比如白平衡特别准.酷炫的黑科技.特别方便的软件等显而易见的优势:也有能够增加提案通过率.专注工作提高工作效率这样的玄学buff. 但是!并不 ...
- Problem E: 分数类的输出
Problem E: 分数类的输出 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 2699 Solved: 1227[Submit][Status][ ...
- [译]ASP.NET Core 2.0 区域
问题 如何将一个规模庞大的ASP.NET Core 2.0应用程序进行逻辑分组? 答案 新建一个ASP.NET Core 2.0空项目,修改Startup类,增加Mvc服务和中间件: public v ...
- 深入理解ES6之—set与map
Set是无重复值的有序列表.Set会自动移除重复的值,因此你可以使用它来过滤数组中重复的值并返回结果. Map是有序的键值对,其中的键允许是任何类型. Set和Map是es6新增的两个数据集合. Se ...
- JavaScript系列----事件机制
1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...