wuhan2020-mapviz

map visualization components for wuhan 2020

Usage no npm install needed!

<script type="module">
  import wuhan2020Mapviz from 'https://cdn.skypack.dev/wuhan2020-mapviz';
</script>

README

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

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

项目介绍

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

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

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

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

  • 基础疫情地图,并用统计图(线图+ stacked area chart)显示疫情发展数据

  • 省市层级交互

  • 时间轴交互

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

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

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

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

使用

npm install wuhan2020-mapviz

本地开发

配置

  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:
  1. 如有其它建议请开 issue
  2. 参与更多讨论请加入slack 讨论组,我们在 channel #proj-map-visualization

技术栈

教程及有用链接

5 分钟上手 ECharts

echarts example

百度地图

坐标拾取

例子

百度迁徙

百度实时疫情数据

丁香园实时疫情数据

qq 实时疫情数据

临时接口

省市每日历史数据

百度实时疫情

百度迁徙

丁香园实时疫情

丁香园每分钟历史数据

丁香园其他

qq 实时+历史疫情

百度地图地址转经纬度

新闻收集接口