40

GitHub - wuhan2020/map-viz: 通用的地图可视化组件

 4 years ago
source link: https://github.com/wuhan2020/map-viz
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

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

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

任务

基于ECharts可视化库及其他技术栈:

创建一个完整独立的疫情地图

  • 目的&设计:创建一个独立的疫情地图可视化,有两个主要目标
    1. 地理精度:有市级地理粒度,最开始是一个全国地图的heatmap,点击一个省重绘成省map。(重绘参考
    2. 时间信息:有时间轴,点击一个地区可以画出stacked area chart之类的疫情发展图 (确诊/疑似/死亡为不同层),也可以根据选择的时间点重绘地图。(时间轴参考案例)
  • 使用:单独webpage,最终作为iframe整合进前端页面
    • 与下面的通用组件不同,疫情地图与前端其他组件交互较少,且数据可以通过API直接获取,单独成项目更合理。

创建一个通用地图组件

  • 目的:用于可视化各种不同地理信息(例如医院位置,酒店位置,etc.)
  • 使用:作为组件被前端调用,数据来自前端。
  • 基础设计:点图+地图(参考例子
  • 交互
    • 不自带过滤等交互组件,上层应该自己创建checkbox, slider, etc. 过滤后数据传入地图组件可以重绘地图
    • 接受传入的mouseEvent,可以帮助做信息过滤及定位(e.g., 点击一个省选中它的信息)
    • (相关讨论)
  • 数据格式设计讨论

任务拆分&参与指南

合作指南参考主repo(viz没有项目机器人+注意将demo script改成我们的repo) TL;DR:

  1. 请在project面板自行认领&self-assign issues(如果不能更改assignee,请回复issue表示认领,我们会后面添加assign)
  2. 对数据和设计如果有讨论请参见如下issue:
  1. 如有其它建议请开issue
  2. 参与更多讨论请加入slack讨论组,我们在channel #proj-map-visualization

技术栈

本地开发

配置

  1. 安装 Node.js
# clone the repo
git clone [email protected]:wuhan2020/map-viz.git
# setup the npm env
cd map-viz
npm install
# start the project
npm start

教程及有用链接

5 分钟上手 ECharts

echarts example

百度地图

例子

百度迁徙

百度实时疫情数据

丁香园实时疫情数据

qq实时疫情数据

临时接口

省市每日历史数据

百度实时疫情

百度迁徙

丁香园实时疫情

丁香园每分钟历史数据

丁香园其他

qq实时+历史疫情

百度地图地址转经纬度

新闻收集接口


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK