基于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执行插入,选择,更 ...
随机推荐
- 符合语言习惯的Python优雅编程技巧
Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.要写出 Pythonic(优雅的.地道的.整洁的)代码,需要多看多学大牛们写的代码,github 上有很多非常优秀 ...
- java传值与传引用总结
基本数据类型 我们先来看一个代码 public class ParamTest { public static void main(String[] arge) { double percent = ...
- 微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...
- hdu 1520 Anniversary party(入门树形DP)
Anniversary party Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6926 Accepted: 3985 ...
- jquerymobile实例介绍
[创建页面] data-role="page" 是在浏览器中显示的页面.. data-theme="b"更换主题,有a和b两种 data-role= ...
- JavaScript 语言精粹读书笔记
最近在看 赵泽欣 / 鄢学鹍 翻译的 蝴蝶书, 把一些读后感言记录在这里. 主要是把作者的建议跟 ES5/ES5.1/ES6 新添加的功能进行了对比 涉及到的一些定义 IIFE: Immediatel ...
- css中单位 px、em 的区别【转载】
原文:http://www.admin10000.com/document/6267.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了p ...
- chrome Web开放 字体格式不能显示问题
/** * Chrome 32/33 webfont issue fix. * Requires jQuery. * More info: http://blog.cloudfour.com/chro ...
- G彩娱乐网【分享】想要开源自己的代码可以参考一下
作为一个开发者,如果你打算开源自己的代码,千万不要忘记,选择一种开源许可证(license). 许多开发者对开源许可证了解很少,不清楚有哪些许可证,应该怎么选择.本文介绍开源许可证的基本知识,主要参考 ...
- JAVA 的关键字 、
关键字: 被JAVA语言赋予特定含义的单词, 特点: 组成关键字的单词的字母全部小写 注意: A:goto 和 const 是保留字 B: 类似于Notepad++ 这样的高级记事本,针对关键字有特殊 ...