-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 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 即可。