1.Electron-封装地图瓦片下载小工具(MapDownload) [配置开发环境]

本软件完成状况

未完成~~

目的

之前写了一个地图瓦片下载小工具 地图地图瓦片下载器(有兴趣可以去看看)由于是"黑框"版本的。想把它封装成界面版本。接下来我会用一段时间把我学习Electron过程、封装地图地图瓦片下载器过程记录下来。你们也可以把它当做一个实战教程来阅读 在文章开头我也会更新软件的完成情况.什么时候完了成了 同学们再去下载看看

需要准备的基础知识

• HTML, JS , CSS 的基础知识 (这个不会可以退出了)
• Node.js 的最基础的知识(会安装,理解简单的概念)

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

安装环境要求

提前安装好下面环境,这里就不带着大家安装了

• Node.Js > 8.0.0
• Git
• Visual Studio Code

配置开发环境

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start

npm install过程很慢,因为他有一个很大的包 ,这里可以吧npm的镜像换成淘宝镜像,教程链接

npm start 后效果

简单说一下 地图瓦片 小工具目前状态

• GitHub地址:https://github.com/weshmily/MapDownload

这个项目是我两年以前开发的, 目的就是给自己用的,他就是一个小量级地图瓦片下载的一个小工具。 支持地图类型 球面墨卡托投影(img_w:影像底图 cia_w:影像标注 vec_w:街道底图 cva_w街道标注)

基本原理

1. 我们打开某地图官网的首页打开控制台 https://www.tianditu.gov.cn/ 在左面就有相应的参数, 根据层级和经纬度范围 计算成相应的参数即可

麻烦之处

他需要在代码层面配置一些列的参数, 对不是开发者的用户不是很友好

应用到包

1. bagpipe 朴灵大大做的一个在nodejs中控制并发执行的模块 文档地址
2. request 请求图片用的已经停止维护了,后面会替换掉 文档地址

本心

本篇文章的初衷是通过封装这么一个小工具达到学习Electron的目的, 最后产出的程序只做开发学习之用,不作任何商用.

源代码

本文章的相关代码地址: https://github.com/weshmily/MapDownloadPackage

作者: weshmily前端

官网: 百度搜索(weshmily前端)

CSDN博客:http://blog.csdn.net/qq_27118895

GitHub: https://github.com/weshmily

公众号:搜索"weshmilyqd"