一张新冠肺炎地区分布地图是怎么制作的？

前言

来了！你要的教学绘制地图~

2020年刚开始，各种不幸的消息满天飞。新型肺炎的蔓延，科比去世… 无时无刻让我感到痛楚。为了不给国家添乱，新年几天都在窝在家里。时不时拿起手机，观察一下现在病情蔓延情况。下面这张地图就是一张典型的GIS应用。

每当我看到这张静态图时，很想要知道几个信息无法获知。

1.我们能通过颜色和图例比较一个省的确诊人数范围，看不到一个省具体患病人数。

2.由于是一张静态图，我们没法获市级数据。如果地图可以拖动，放大缩小就简单多了。

3.每次看到红色，心里都很焦虑。能换成其他颜色，我自己更加能接受点。基于这两个小功能，我准备介绍一下怎么去制作一张地图。我准备分两个阶段来做介绍。

1.先用最简洁的代码来生成一张静态图片。通过这个阶段，让我们认识一下一般地图应用开发的流程。

2.当我们了解流程以后，我们就把这个程序改造成地图服务，让她和知名的地图前端库Leaflet合并开发一个可交互的地图，集成点有趣的功能。这篇文章，我准备先从制作一张静态图片开始。

让我们从环境开始

以前开发地图应用软件，可能需要掌握很多编程语言技能，才能胜任一个完整的项目。比如一个典型的GIS B/S应用一般会使用Java, C#或其他后端编程语言来开发后端，然后用JavaScript + HTML来开发前端展现。

今天用我们熟悉的JavaScript；即使是前端开发人员也可以开发后端地图应用了。追求极简开发环境的话，我们只需要2个工具。Node.js （推荐8以上，或者直接安装最新版本都是兼容的）和 vscode.
这篇文章照顾新手，写的比较多。老鸟请自行过滤。勿喷。

创建工程，添加引用

接着，我们创建一个工程目录。用以下命令就可以了。（我个人比较喜欢使用命令行，由于平时都是用macOS做日常使用机器。所以以下命令行都是macOS执行验证的）。

这里引用了canvas库，是因为Node.js没有提供绘图API，我们只能引用一个第三方Node.js库来替代使用。
到这里，我们的工程已经建立好了。

GIS数据

GIS应用里面数据是很重要的。我把她分为静态数据和动态数据。静态数据就是我们的几何图形以及她们特定的特征数据。如地区的名字等。动态数据就是我们实时关注的疫情变化。

一般静态数据比较容易找到。百度搜索中国地图数据csv, json, shapefile都可以找到。这个项目里面，我准备使用shapefile作为我的静态数据。这里你可以找到以下数据，我们一会儿会使用到。把上面数据下载下来以后，放到工程的data目录下面。

动态数据会麻烦点。我是写了一个爬虫，定时爬取。有兴趣可以私聊。不过作为例子，我放上了几份疫情数据在data/infected目录里面以便做示例。

剩下的工作就很简单了

叠加世界数据

首先，我们定义一个函数来创建一个地图的图层，一个数据源即一个数据图层，多个数据图层叠加起来就可以构成我们期望的样式。使用ginkgoch-map，我们是这样定义一个图层的。

有了layer, 我们可以简单查看我们数据图层的样子。比如对于数据cntry02.shp:

我们通过命令行执行下面的语句。我们可以找到图片：

叠加中国数据当然这个不是我们想要的样子，我们还需要把省份的数据叠加在上面，才能看到我们中国详细一点的数据。我们接着做。

现在再打开图片tutorial-01-default.png, 注意查看中国的数据已经叠加成功了。

调整可视范围

哦？太小了~ 好，我们调整下地图的可视范围。

连接动态数据

我们对静态数据进行了渲染，同时对中国省份级别的边框进行绘制。接下来，我们将连接动态数据，把动态的感染人数和地图对应起来。我们怎么做呢？

首先，我们先看下静态数据的特征数据。Shapefile的特征数据存放在*.dbf文件里面。你可以选择使用你常用的工具打开dbf文件。我个人一般使用的是shapefile viewer来查看。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NUD1zDlD-1580548031579)(./tutorials/images/china-attributes.png)]

NL_NAME_1就是我们需要的省份名字，然后我们来看看动态数据的一个片段。

有趣的是，动态数据也包含省份的名字provinceShortName；以及感染，疑似，治愈以及死亡的人数。现在，我们要做的就是通过静态数据的NL_NAME_1和动态数据的provinceShortName相等的数据相关联。在ginkgoch-map里面是这样做的。
首先，我们定义一个函数来帮助我们定义一个关系。

然后建立4个列的映射函数。

最后，我们调用这个函数进行映射。

至此，我们可以认为provinceLayer已经包含了动态数据。她将在需要的时候动态的去通过映射关系找到需要的数据来使用。

样式化地图

做到这里，大家可以去休息一下。迎接最后一步：地图样式化。我们把感染人数分成几个等级，根据等级渲染不同的颜色来表示严重程度。比较好的是，ginkgoch-map提供了对应的API来渲染。
我们先定义个函数来创建样式化对象Style.

再应用到layer上即可看到效果。


是不是很有趣？我们现在可以随意替换调色板，让她变成蓝色系的。替换这一句即可。

写在最后

最终的代码可以在这里下载：https://github.com/ginkgoch/nCoV-map/tree/develop/tutorials
看起来很多，大多数代码都是业务代码，和对样式的设置。了解起来还是挺简单的。今天就到这里，后面有时间，再写一篇搭建一个地图服务，制作一个可以交互的地图应用。有问题可以随时联系~
Happy Mapping!

————————————————

版权声明：本文为CSDN博主「Ginkgoch」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/Ginkgoch/article/details/104135828

-----END-----

社群交流 / 原创投稿 / 商务合作

（请添加下方小家微信：mysurvey）

来源：CSDN

推荐阅读

推荐关注

 觉得不错请点赞！转发！

↓↓↓点击下方“阅读原文”查看更多精彩内容...