自建瓦片地图服务

2018-06-23 本文已影响110人老王Cheese

-1.不想看背景、设计过程、编码思路的同学，直接移步页尾GayHub链接。

0.背景

啊，大家好，我是一头老王啊，前天闲着没事，在工位上刷知乎。
MD被组长发现了。

——“老王，很闲嘛～”
——“没有没有，刚刚看一下知乎而已……”
——“很闲就给你个任务～”
——“真没有真没有，就看刚看……”
——“那你这么闲的话就做一下离线地图服务吧，有个项目是部署在政务内网的，不能访问外网，所以要离线的地图服务，Leaflet要能用哦～”
——“…………MMP……”

有一句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
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点个星星，感激不尽。

谢了兄弟