cesium中文网——如何开发一款地图下载工具[一](代码片段)

cesiumjs cesiumjs     2022-12-09     744

关键词:

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://online0.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/





















































cesium专栏-气象雷达动图(附源码下载)

CesiumCesium是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。... 查看详情

cesium应用篇:1快速搭建

      文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码823d      Cesium[‘si?z??m]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二维地图。Cesium 查看详情

cesium地图贴地量算工具效果

详细的实现过程见:这里本篇实现cesium地图量算工具功能,效果图如下: 查看详情

cesium01-初始化(代码片段)

一、cesium是什么?  Cesium是一款面向三维地球和地图的,世界级的javaScript开源产品。它提供了基于javaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都... 查看详情

cesium专栏-气象卫星云图动图(附源码下载)

CesiumCesium是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。... 查看详情

怎样可以制作一款游戏

参考技术A问题一:怎样制作一款游戏?开发大型游戏需要下列工具:1.需要语言编译器:用于程序的编写与代码的翻译。2.地图编辑器:用于地图的设置和关卡的设置。3.脚本编辑器:用于游戏脚本的编写。4.游戏开发引擎:好的... 查看详情

分享一款将中文网站源代码直接生成英文网站的工具(代码片段)

背景在网站开发初期,由于快速上线网站,没有考虑完善的国际化方案,直接将中文硬编码到代码中,当网站上线后,想再实现国际化,发现工程量太大,因此发现了一款工具,只需要输入一行命... 查看详情

cesium专栏-空间分析之地形等高线(附源码下载)

CesiumCesium是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。... 查看详情

cesium结合geoserver实现地图空间查询(附源码下载)(代码片段)

前言cesium官网的api文档介绍地址cesium官网api,里面详细的介绍cesium各个类的介绍,还有就是在线例子:cesium官网在线例子,这个也是学习cesium的好素材。内容概览1.cesium结合geoserver实现地图空间查询2.源代码demo下载效果图如下:... 查看详情

cesium基础使用介绍

...地球,本文简单为大家介绍一款开源的三维地球软件——Cesium,以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示,这只是数据可视化的一小部分,重要的应该是背后的数据生成及处理等。本文先为大家介绍这简单... 查看详情

cesium学习基础绘制(点线面)

...但是基础的简单绘制不用考虑太多,下面我们开始学习在Cesium的三维场景中如何进行基础绘制的实现。二、使用原始Cesium的Entity方法绘制  Cesium中封装了几何对象的接口,也就是点、线、面、圆柱体、长方体、圆锥体等等,还... 查看详情

egretwing

...配置包含自己的背景图不同关卡背景图不同无论地图形状如何改变,尺寸不变2.步数:不同关卡步数不同步数为0时,游戏结束3.道具一共五种道具,道具功能不同,使用道具时候不消耗步数,来源于游戏奖励4.消除:三个及以上... 查看详情

cesium实践——helloworld(代码片段)

文章目录前言Cesium是什么Cesium核心类ViewerSceneEntityDataSourceCollection创建第一个Cesium应用工程搭建Cesium版helloworld总结前言工作大半年来主要的技术栈是mapbox-gl和threejs,但是作为一名GIS专业毕业生,一直对Cesium充满兴趣。Cesiu... 查看详情

如何快速地开发一款androidapp

使用注解加速开发,类似ButterKnife、Xutils一类的,省去findviewbyId,setOnclickListener等繁琐的UI绑定,使用XUtils、afinal、Volley、AsyncImageLoader、Picaso、友盟统计、友盟微社区、环信IM,个推等第三方工具来集成网络访问、图片加载、数... 查看详情

cesium简介以及离线部署运行

Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile,但是由于c... 查看详情

cesium官方英文论坛

参考技术ACesium中文网:http://cesiumcn.org/|国内快速访问:http://cesium.coinidea.com/Cesium官方刚刚完成了将GoogleGroups论坛转移到Discourse的工作,Discourse是一个面向在线社区的现代开源平台。这是Cesium社区论坛成立以来最大的一次更新。... 查看详情

cesium中级教程10-cesiumjsandwebpack(代码片段)

Cesium中文网:http://cesiumcn.org/|国内快速访问:http://cesium.coinidea.com/webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets,并使用简单的require语句根据需要加载不同类型的文件。构建时,它将... 查看详情

cesium中级1-空间数据可视化(代码片段)

[CesiumJS]Cesium中级1-空间数据可视化(一)Cesium中文网:http://cesiumcn.org/|国内快速访问:http://cesium.coinidea.com/本教程将教读者如何使用Cesium的实体(Entity)API绘制空间数据,如点、标记、标签、线、模型、形状和物体。不需要Cesium... 查看详情