背景
最近疫情肆虐,各个网站也都上线了各种疫情地图的页面,单大部分都是基于图表的,所以想做个3D可视化的全球疫情展示
要实现这个功能,主要简单分为三块内容
(1)3D可视化地球
(2)爬取疫情数据
(3)数据推送
环境
分别准备三部分环境
(1)前端3D可视化
这里使用threejs进行实现,环境选择: nodejs,npm,webpack,threejs等
(2)后端数据爬取
使用python爬虫框架scrapy实现,环境选择:python3,scrapy,monggodb/mysql
(3)数据推送
使用python作为数据推送,采用websocket实现,环境选择 :python3,websoket,mysql/MongoDB
素材
这里包括显示素材,数据素材等
(1)世界地图贴图
偷懒直接从echarts官网的3D地球实例请求抓取世界地图图片
(2)疫情数据源
由于只是demo应用,简单爬取各大网战的疫情页面数据即可,这里选择:https://news.qq.com/zt2020/page/feiyan.htm#/global?ct=United%20States&nojump=1
附上:
整体demo比较简陋,博客写的也比较乱,希望大家轻踩。。
不定时更新组件效果和源码
爬虫,socket服务端源码 :https://github.com/VicentDong/VDDataServer
VDEarth组件前端源码:https://github.com/VicentDong/VDEarth
后续优化:
VDEarth组件整体动效,展示内容优化
爬虫服务和调度
更新记录:
2020-05-05 更新
1 支持多种地球主题
2 新增疫情概览数据展示
3 新增多种地图标注类型
相关链接
从0开始疫情3D地球 - 3D疫情地球VDEarth - 1- 引言
从0开始疫情3D地球 - 3D疫情地球VDEarth - 2 - 前端代码构建
从0开始疫情3D地球 - 3D疫情地球VDEarth - 3 - 3D地球组件实现(1)
从0开始疫情3D地球 - 3D疫情地球VDEarth - 4 - 3D地球组件实现(2)