Cesium中文网——如何开发一款地图下载工具[一]

Posted 2020-12-19 cesiumjs

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网的朋友们的其中一个主题是：自己独立开发一款地图（瓦片图）下载工具。

这个主题会以拆分若干期以博客文章[所有用户]+视频[付费用户]的形式介绍给大家。其中源码会不断的提交与更新，Github地址：https://github.com/hujiulin/MapDownloader。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

重剑无锋，大巧不工。

工具最重将以C#和javascript的形式呈现。编程语言只是形式，如何理解内部的逻辑和流程，也可以用Java，Python，php或其他开发语言进行实现。

目前开源的工具非常的简单（简陋），但是我会定期更新和维护代码，大家有什么问题可以在Github上提交issue也可以在公众号：Cesium中文网；QQ群：807482793；论坛：http://cesium.coinidea.com/进行留言和提问。

准备工作
找到自己熟悉的一门开发语言，它支持：

文件网络下载。
文件IO，本地文件夹及文件的读写。
多线程。
桌面窗体，最好具有浏览器控件。
一般来说，现代的开发语言都支持上述大部分功能。本文选择的是C#。在整个主题的中部，会引入JavaScript。

瓦片图服务器
本文选择的是百度地图，其实大部分的瓦片图服务器都会有x, y, z（level）三个参数，百度地图的URL Pattern是：http://online{0}.map.bdimg.com/onlinelabel/?qt=tile&x={1}&y={2}&z={3}&styles=pl&udt=20200727&scaler=1&p=0

如果我们把x=1, y=1, z=3，在浏览器打开上述URL

http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=1&y=1&z=3&styles=pl&udt=20200727&scaler=1&p=0

样例瓦片图

瓦片图下载
既然我们已经知道了瓦片图的生成规则，那我们只要指定具体的下载链接我们就可以下载对应的图片了，C#的核心下载代码是，这儿代码可以轻易地在网络上搜索到：

private static WebClient wc = null;
private static void initWebClientInstance()
{
if (null == wc)
{
wc = new System.Net.WebClient();
}
}
private static void download(string url, string filename)
{
// Check filename exist or not
if (File.Exists(filename))
{
return;
}

// Create directory
string dir = Path.GetDirectoryName(filename);
if (!Directory.Exists(dir))
{
    Directory.CreateDirectory(dir);
}

initWebClientInstance();
wc.DownloadFile(url, filename);

}
瓦片图批量下载
接下来我们要做的是：

批量地生成下载URL
循环下载每张瓦片图
之前提到过地图的核心思想是四叉树，所以我们可以再次简单的处理，认为瓦片图也是四叉树构成的，一共分为18级（网上可查）左右。那么

level minX~maxX minY~maxY
1 1~1 1~1
2 1~2 1~2
3 1~4 1~4
…
n 1~2^(n-1) 1~2^(n-1)

四叉树

批量下载的核心代码如下：

public static void downloadBatch(string urlPattern, string targetFoler, int level)
{
int maxX = (int)Math.Pow(2, level - 1);
int maxY = (int)Math.Pow(2, level - 1);
for (int x = 0; x <= maxX; x++)
{
for (int y = 0; y <= maxY; y++)
{
string url = String.Format(urlPattern, 1, x, y, level);
string filename = Path.Combine(targetFoler, level.ToString(), x.ToString()) + "" + y.ToString() + ".png";
download(url, filename);
}
}
}
上述的运行代码肯定能下载，但是有很多问题。将在下一步中进行讨论。

当前软件界面

下载结果

下一步
当前代码只适合下载层级较小的情况，一旦层级较大，需要下载的图片非常多。此处需要使用多线程，甚至多台机器。
可以看到下载下来的图片和很多纯黑图片，这可能是我们的生成规则不太好。
目前浏览器控件和软件还未做到联动，不能实时勾选区域进行下载。
后续可能涉及图片拼接的处理。
当加载进具体的平台的时候，可能需要进行坐标系变化处理。
下载间隔的自动控制，IP的动态切换。
上面的这些问题将在后续的文章中进行介绍。

声明
一般来说，地图服务器需要很大的存储资源和带宽资源，本文仅从学术角度和大家探讨现在的下载软件内部原理，如有错误欢迎大家指正。

Again: Github地址：https://github.com/hujiulin/MapDownloader。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

本文和软件仅做学术交流，严禁用于商业用途。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/