mutuyihao / Catgis

A website that displays coronavirus data on a e-map via webgis.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

项目文档

1.项目目的

1.1在地图上展示新冠病毒数据

2.项目介绍

项目地址:

https://catgis.cn

2.1技术架构

HTML+CSS+JS(Vue)

第三方库:(MapboxGL + Echarts + ElementUI + Lodash + axios + timeplayer )

2.2后期改进(规划待定)

2.2.1由于MapboxGL的版权限制,后期打算尝试改用Leaflet、OpenLayers

2.2.2现有热力图数据源老旧(更新截止于2020-07),后期打算更换数据源到

https://github.com/CSSEGISandData/COVID-19

2.2.3更换地图加载geojson数据方式,以提高加载速度

2.2.4 ……

3.地图集介绍

3.1国内新冠疫情地图

3.1.1更新时间

地图更新时间为2021年12月28日。

3.1.2数据来源

原始数据来源自

赵冰冰爬取的腾讯新闻……等来源的疫情数据。

https://gitee.com/bbwilly/Wuhan-2019-nCoV

原始数据更新截止于2020年7月4日

(后期可能会更换数据源,待定)

3.1.3数据处理

……

3.1.4详细介绍

地图主要为新冠疫情目前确诊数的热力图+聚类统计图

左侧边栏展示总和数据,echarts图表

右侧边栏有时间选择器,数据详情表(筛选、排序、点击省市跳转地图到地理点)


3.2新冠疫苗专题地图

3.2.1更新时间

地图更新时间为2021年12月29日。

3.2.2数据来源

原始数据来源自

https://ourworldindata.org

https://github.com/owid/covid-19-data/tree/master/public/data/vaccinations

原始数据更新截止于2021年12月26日

3.2.3数据处理

……

3.2.4详细介绍

地图主要为全球范围下的新冠疫苗总接种人数占该国总人口的百分比填色图

左侧边栏展示全球、各大洲、国内的总和数据

右侧边栏有时间选择器,数据详情表(筛选、排序、点击国家名跳转地图到该国家)

点击地图上多边形会跳出详细信息

3.3地图后期改进

3.3.1 timeplayer

3.3.2 数据源

3.3.3 数据接口

3.3.4 地图交互

……

4.工具介绍

4.1 地理编码

将输入的地址解析成坐标对

待优化:增加文件上传、批量地理编码(由于API限额,优化待定)

4.2其它待开发功能

4.2.1反地理编码

4.2.2坐标转换

……

……

5.用户指南+帮助

5.1用户指南+帮助

打算通过md-loader加载md文件(待定)

……

……

6.更新计划

6.1修改首页占位内容

6.2补上用户指南+帮助页

……

……

7.紧急

7.1优化项目C端加载速度

gzip

cache

X cdn

X 加钱升级服务器

7.2首页太丑了

8.库内容说明

打包下载,解压缩,

然后cd目录

然后

npm install

npm run serve

npm run build

(需要填写mapboxgl API,高德API)

About

A website that displays coronavirus data on a e-map via webgis.

License:MIT License


Languages

Language:Vue 69.1%Language:JavaScript 29.8%Language:HTML 1.1%Language:CSS 0.1%