-1.不想看背景、设计过程、编码思路的同学，直接移步页尾GayHub链接。
0.背景
啊，大家好，我是一头老王啊，前天闲着没事，在工位上刷知乎。
MD被组长发现了。
——“老王，很闲嘛～”
——“没有没有，刚刚看一下知乎而已……”
——“很闲就给你个任务～”
——“真没有真没有，就看刚看……”
——“那你这么闲的话就做一下离线地图服务吧，有个项目是部署在政务内网的，不能访问外网，所以要离线的地图服务，Leaflet要能用哦～”
——“…………MMP……”
人在座上坐，锅从天上来。我这个小开发仔还能怎么办？？？做呗。
看看Leaflet，用的是TMS服务（地图瓦片服务）。啊，老王我突然灵光一现，只要能下载瓦片，然后部署在Tomcat/Jetty/Nginx上不就得了？？
Google一下下载瓦片的软件：
又查了十几个，水经注，什么地图下载器什么的，我就没见过可以用的，其中一个上来还就要收费？人家去Piao都还是先体验，后付费的！！骗钱能不能走点心？！？！
累觉不爱……
我老王好歹也是常年爬人家窗户的人，这么点小挫折能难倒我？？？我自己写一个总行了吧=。=
1.设计
事实证明，人都是逼出来的=。=
被组长、搜索引擎，还有百度网盘逼迫的我，设想出一个服务，这个服务需要完成：
- 输入经纬度矩形、地图等级、地图类型，后端自行下载瓦片，存放入相应的位置。
- 下载瓦片的同时，还需要记录下后端拥有哪些类型、哪些层级、哪些范围的瓦片，用以前端调起。
- 提供地图服务以及下载记录。
- 依赖尽量少。
OK，开始编码。
2.后端
2.0 算法基础
若对Web墨卡托，Google Web墨卡托，墨卡托有疑惑的同学，请移步，熟悉理论知识：https://blog.csdn.net/mygisforum/article/details/7582449
2.1 经纬度转Google Web墨卡托
首先，因为瓦片地图用的都是Google Web墨卡托的坐标，那么我们需要先将经纬度的矩形换算成Google Web墨卡托的坐标。
OK，Google一个经纬度转Web墨卡托的，我再改写一下，转成Google Web墨卡托：
public static LatLngInfo lonLatToMercator(double lon, double lat)
{
double toX = lon * 20037508.34D / 180.0D;
double toY = Math.log(Math
.tan((90.0D + lat) * 3.141592653589793D / 360.0D)) / 0.0174532925199433D;
toY = toY * 20037508.34D / 180.0D;
return new LatLngInfo(toY, toX);
}
解释一下这里的魔术数字，话说网上这个转换代码写的是真的蛋疼，满篇充斥着魔术数字……
- 20037508.34 ：Web墨卡托投影的长或宽的一半，单位为M；
- 0.0174532925199433：一角度为多少弧度；
- 90，180，360：都是角度；
针对原来经纬度转Web墨卡托坐标的源码，我改写时只加了 第一行toX中的 “+ 20037508.34D”，以及return前一行 “toY = 20037508.34D - toY”。
因为Google Web墨卡托的坐标原点在经纬度（180，90）或者说（-180，90）处，也就是整个Web墨卡托投影地图的左上角；
Web墨卡托的在（0，0）处，也就是整个Web墨卡托投影地图的中心，因此需回归原点。
2.2 使用Google Web墨卡托坐标计算需要请求的瓦片序列号
public static LevelInfo getLevelInfo(Integer level, Double left,
Double right, Double top, Double bottom)
{
LevelInfo levelInfo = new LevelInfo();
LatLngInfo leftTopMocPoint = CoodUtils.lonLatToGoogleMercator(left, top);
LatLngInfo rightBottomMocPoint = CoodUtils.lonLatToGoogleMercator(right, bottom);
Double perTileWidth = WEB_MOC_HALF_WIDTH * 2 / Math.pow(2, level);
levelInfo.setZ(level);
levelInfo.setxL((int)(leftTopMocPoint.getLongitude() / perTileWidth));
levelInfo.setxR((int)(rightBottomMocPoint.getLongitude() / perTileWidth));
levelInfo.setyT((int)(leftTopMocPoint.getLatitude() / perTileWidth));
levelInfo.setyB((int)(rightBottomMocPoint.getLatitude() / perTileWidth));
return levelInfo;
}
首先，得到perTileWidth，这个变量的含义为该地图等级下，每个切片代表的实际距离为多少，单位与Google Web墨卡托一致，为米。
前面说了，因为Google Web墨卡托的坐标原点为左上角，那么，得到Web墨卡托坐标之后，就可以直接用Google Web墨卡托坐标除以当前等级每个切片的宽度，得到瓦片序列号的X，Y值。
Z值为地图等级，至此，X，Y，Z值全部得知，可以进行瓦片URL构建。
2.3 瓦片URL构建
// 待匹配的URL
private static String Google_Satellite_Url = "http://mt0.google.cn/vt/lyrs=y&hl=zh-CN&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali";
private static String Google_Image_Url = "http://mt0.google.cn/vt/lyrs=m&hl=zh-CN&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali";
private static String Google_Terrain_Url = "http://mt0.google.cn/vt/lyrs=p&hl=zh-CN&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali";
private static String AMap_Satellite_Url = "http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";
private static String AMap_Cover_Url = "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
private static String AMap_Image_Url = "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
private static String TianDiTu_Satellite_Url = "http://t1.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}";
private static String TianDiTu_Image_Url = "http://t1.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}";
private static String TianDiTu_Cover_Url = "http://t1.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}";
上各个地图，打开Chrome的控制台，看他们请求的URL是什么，将X，Y，Z值替换成{x} , {y} , {z}。
随后构建URL时，调用字符串替换即可。
2.4 循环请求
得到了左上角到右下角的瓦片X，Y，Z，剩下就是循环请求的事了。
请求的量比较大，我们开个多线程：
public static Boolean getLevelPic(BackgroundType type, Integer level, Double left,
Double right, Double top, Double bottom)
{
LevelInfo levelInfo = getLevelInfo(level, left, right, top, bottom);
// 开多线程请求图片
Vector<Thread> threads = new Vector<>();
for(int x = levelInfo.getxL() ; x <= levelInfo.getxR() ; x ++)
{
for(int y = levelInfo.getyT(); y <= levelInfo.getyB() ; y ++)
{
final int fX = x;
final int fY = y;
Thread threadGetPic = new Thread(
() -> getPic(type, fX, fY, levelInfo.getZ()));
threads.add(threadGetPic);
threadGetPic.start();
}
}
// 等待所有线程执行完毕
for (Thread perThread : threads)
{
try
{
perThread.join();
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}
return true;
}
这里的getPic方法包含了请求和请求后的保存。
2.5 其余功能
记录地图请求过的参数、返回该参数。
返回地图瓦片这些常规操作，直接下载看Gayhub的代码吧。
3 前端
3.1 依赖
依赖AntDesign，Leaflet，React，使用TypeScript。
{
"@types/leaflet": "^1.2.7",
"antd": "^3.6.3",
"axios": "^0.18.0",
"leaflet": "^1.3.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts-ts": "2.16.0"
}
3.2 思路
首先需要一个矩形的框，用来输入地图范围，然后再填入地图等级、地图类型，链式请求后端，让后端不断的获取瓦片。
3.3 效果
点击下载瓦片后即可得到地图服务。
测试页面会得到已有地图服务的类型。
Q&A页面是常见问题与API的描述。
4.GayHub地址：
后端：https://github.com/Icemap/MapServer
前端：https://github.com/Icemap/MapServer-Front
Release版本：https://github.com/Icemap/MapServer/releases
两个仓库的README都有服务的使用方法。
Release版本使用：需求Java1.8+环境，直接“java -jar {jarFileName}”,{jarFileName}替换为你下载的Release版本的Jar包名称。访问localhost:2018 即可。
顺便帮忙GayHub点个星星，感激不尽。
