40
GitHub - wuhan2020/map-viz: 通用的地图可视化组件
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可视化库及其他技术栈:
创建一个完整独立的疫情地图
- 目的&设计:创建一个独立的疫情地图可视化,有两个主要目标
- 地理精度:有市级地理粒度,最开始是一个全国地图的heatmap,点击一个省重绘成省map。(重绘参考)
- 时间信息:有时间轴,点击一个地区可以画出stacked area chart之类的疫情发展图 (确诊/疑似/死亡为不同层),也可以根据选择的时间点重绘地图。(时间轴参考案例)
- 使用:单独webpage,最终作为iframe整合进前端页面
- 与下面的通用组件不同,疫情地图与前端其他组件交互较少,且数据可以通过API直接获取,单独成项目更合理。
创建一个通用地图组件
- 目的:用于可视化各种不同地理信息(例如医院位置,酒店位置,etc.)
- 使用:作为组件被前端调用,数据来自前端。
- 基础设计:点图+地图(参考例子)
- 交互:
- 不自带过滤等交互组件,上层应该自己创建checkbox, slider, etc. 过滤后数据传入地图组件可以重绘地图
- 接受传入的mouseEvent,可以帮助做信息过滤及定位(e.g., 点击一个省选中它的信息)
- (相关讨论)
- 数据格式设计讨论
任务拆分&参与指南
合作指南参考主repo(viz没有项目机器人+注意将demo script改成我们的repo) TL;DR:
- 请在project面板自行认领&self-assign issues(如果不能更改assignee,请回复issue表示认领,我们会后面添加assign)
- 对数据和设计如果有讨论请参见如下issue:
- 如有其它建议请开issue
- 参与更多讨论请加入slack讨论组,我们在channel #proj-map-visualization
技术栈
- 可视化库: ECharts v4
- 逻辑语言: TypeScript v3
- 组件引擎: WebCell v2
- 组件库: BootCell v1
- 状态管理: MobX v5
- PWA 框架: Workbox v4
- 打包工具: Parcel v1
- CI / CD: Travis CI + GitHub Pages
本地开发
配置
# 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
教程及有用链接
例子
临时接口
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK