自建瓦片地图服务

96
老王Cheese
0.1 2018.06.23 23:56* 字数 1562

-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点个星星,感激不尽。

谢了兄弟

5.老王第一次发文,行文晦涩,望大家海涵。若有论述不明、表述错误之处,请留言啦。

老王造轮子