武汉新型冠状病毒防疫信息收集平台-地图可视化项目

本项目负责平台的信息展示，可视化地理信息。

项目介绍

提供基于 ECharts 可视化库的前端组件。

1、提供一个完整独立的疫情地图组件

• 目的&设计：创建一个独立的疫情地图可视化，有两个主要目标

  1. 地理精度：有市级地理粒度，最开始是一个全国地图的 heatmap，点击一个省重绘成省 map。（重绘参考）
  • optional: 可能会做成县级精度，具体见讨论
  2. 时间信息：有时间轴，点击一个地区可以画出stacked area chart之类的疫情发展图 (确诊/疑似/死亡为不同层)，也可以根据选择的时间点重绘地图。(时间轴参考案例)

• 进度

• 基础疫情地图，并用统计图（线图+ stacked area chart）显示疫情发展数据

• 省市层级交互

• 时间轴交互

• 接入手动收集的省级数据

• 疫情地图时间轴与统计图联动

2、提供一个通用地图组件

• 目的：用于可视化各种不同地理信息（例如医院位置，酒店位置，etc.）
• 使用：作为组件被前端调用，数据来自前端。

使用

npm install wuhan2020-mapviz

• 疫情地图组件说明文档

• 通用地图组件说明文档

• javascript使用样例参考

• typescript使用样例参考

本地开发

配置

1. 安装 Node.js

# clone the repo
git clone git@github.com:wuhan2020/map-viz.git

cd map-viz
# checkout react branch
git checkout react
# setup the npm env
npm install
# start the project
npm start

任务拆分&参与指南

合作指南参考（注意将 demo script 改成我们的 repo）

1. 请在project 面板自行认领&self-assign issues（如果不能更改 assignee，请回复 issue 表示认领，我们会后面添加 assign）
2. 对数据和设计如果有讨论请参见如下 issue:

• 地图设计讨论
• 数据格式设计讨论
• 收集已有数据及可视化

3. 如有其它建议请开 issue
4. 参与更多讨论请加入slack 讨论组，我们在 channel #proj-map-visualization

技术栈

• 可视化库: ECharts v4
• 逻辑语言: TypeScript v3
• 开发框架: React.js
• 组件库: Ant Design

教程及有用链接

5 分钟上手 ECharts

echarts example

百度地图

坐标拾取

例子

百度迁徙

百度实时疫情数据

丁香园实时疫情数据

qq 实时疫情数据

临时接口

省市每日历史数据

百度实时疫情

百度迁徙

丁香园实时疫情

丁香园每分钟历史数据

丁香园其他

qq 实时+历史疫情

百度地图地址转经纬度

新闻收集接口