如何制作省市级别上钻下取的在线疫情地图

疫情数据获取
数据准备
数据可视化

目前大多数省级尺度的疫情地图，不能精细的表达各个城市的疫情差异和发展事态。纯粹市级维度的地图由于全国市比较多，很难快速查看自己所在省市的疫情分布情况。我们制作一个省市下钻上取的疫情地图，可以从全国视角查看省份之间的差异，可也通过双击省份进入市级尺度查看更详细的疫情数据。

在线访问地址

源码地址

疫情数据获取

目前很多平台都提供了疫情数据的专题网站，如丁香园，腾讯，在这些平台可以通过爬虫获取实时的最新疫情数据。借助开源生态我们也不需要自己爬虫然后发布服务了，已经有用户提供了免费的数据服务API，我们可以前端直接调用数据服务访问最新的疫情数据。
数据服务API来自疫情开源项目 https://github.com/wuhan2020/map-viz。

数据准备

全国省级行政区划数据
各省市级行政区划数据

市级行政区划数据不是最新数据，在某些地区显示会存在误差，如莱芜市已经并入济南市，当时市级数据还包含莱芜市。
行政区划数据源

数据可视化

数据可视化采用开源地理可视化库 L7，L7提供丰富地理可视化功能，满足疫情地图的开发需求。

如何使用L7绘制填充图具体参照L7官网https://l7.antv.vision/zh/docs/api/l7。

绘制省级疫情地图

疫情地图数据表达形式是填充图，通过颜色的深浅表达，不同省份的确诊人数的严重程度。

绘制填充图

前面我们已经准备好了行政区划数据和疫情数据，我首先需要将行政区划数据和疫情数据根据省份信息做好关联，这样我们就可以利用L7 的PolygonLayer 进行绘制了。

const chinaLayer = new PolygonLayer({
    autoFit: true
  })
    .source(data)
    .shape("fill")
    .color("confirm", (d) => {
      return d > 1000 ? colors[5] :
      d > 499 ? colors[4] :
       d > 100 ? colors[3] :
        d > 10 ? colors[2] :
          d > 0 ? colors[1] :
            colors[0];
    })
    .style({
      opacity: 1
    });

上面这段代码我们就可以把全国省份的填充绘制出来了。

绘制省份边界

const chinaLine = new LineLayer({})
    .source(data)
    .size(0.5)
    .shape("line")
    .color("#222")
    .style({
      opacity: 1
    });

绘制文字标注

const textlayer = new PointLayer({})
    .source(dataPoint, {
      parser: {
        type: "json",
        coordinates: "center"
      }
    })
    .shape("name", "text")
    .size(12)
    .color("#fff")
    .style({
      stroke: "#ffffff", // 描边颜色
      strokeWidth: 1.0, // 描边宽度
      strokeOpacity: 1.0,
      textAllowOverlap: false
    });

通过添加上面的三个图层我们就完成了一个静态的全国省级的疫情地图。

实现双击下钻功能

我们通过双击省份的方式触发下钻到市级地图，绘制市级地图方式和上面一致，这里主要是交互逻辑。

添加双击交互

chinaLayer.on('dblclick',(e)=>{
      const {adcode, cities = []} = e.feature.properties;
      // 这里可以添加加载城市图层的逻辑，并且隐藏省级地图
      this.addCityLayer(adcode, cities);
    })

如何加载市级地图这里就不详细描述了，跟省级地图类似。

添加上取交互

当市级地图出现之后，我们需要返回到省级地图，这里的交互通过双击市级地图空白处触发。

空白区域事件我们可以通过监听市级地图的 undblclick事件实现

cityLayer.on('undblclick',()=>{
        this.cityLayer.destroy(); // 销毁市级地图
        ...// 显示省级地图
   })

这样我们就介绍完了上钻下取地图实现的全部核心逻辑。最后我们可以添加一些图例，信息窗口等辅助信息。
详细代码可以去GitHub 下载源码 https://github.com/lzxue/yiqingditu。

这里再提供一个全球疫情可视化的案例；https://haiyu915.gitee.io/ncov-2019-map/

疫情地图

进入疫情地图首页是全国省级尺度的疫情分布填充图，鼠标滑过每个省份，右上角显示每个省份疫情详细信息。

鼠标在地图上双击我们可以进入到对应省份的详细的疫情分布数据

完整交互演示

这个可视化项目是开源的，你可以去GitHub 获取源码，你可以加入进来不断完善可视化功能，学习如何进行地理可视化。

地图部署

通过github的gh-page服务我们可以把疫情地图部署成在线服务在线服务就可以实现制作自己的疫情地图了，也可以分享给朋友查看。