WebGIS实现各地区COVID-19数据一览

1.项目地址

GISpjd/WebGIS-Show-Covid19 (github.com)，具体每个文件的职能可以参考README文档。

2.前言 + 预览

>> 所用技术栈：

项目需求本身不是过于复杂，所以没有在相应前端框架下完成，但转入框架也是比较容易的，项目本身灵感来自于油管的一位印度小哥，我从他那里学到了很多，很感谢他分享的开源技术。

技术栈
后端数据库	postgresql
后端数据与前端交互框架	express.js
前端	JavaScript,jQuery,bootstrap,openlayers,chart.js

>> 项目预览：

吐槽一下csdn的导入图像机制，最大只能导入5mb，许多功能不能完整地展示

2.准备工作

a. 下载Tomcat作为web server

b. 安装pg数据库以及postgis插件，以及qgis

c. 安装postgresql jdbc driver文件到Tomcat文件夹下的libs里，如下图：

3.实现步骤

a.向数据库导入数据

利用QGIS将需要的世界行政区划面以及COVID-19相关数据导入进PG数据库,为了方便写sql语句，我对表名和字段进行了修改

b.开服务器传后端数据

在express框架下开启服务器连接到PG数据库

import express from 'express';
import pkg from 'pg';
const { Pool } = pkg;
const app = express()//解决跨域问题
app.all('*', (req, res, next) => {res.header('Access-Control-Allow-Origin', '*')next()
})const pool = new Pool({user: 'postgres',host: '127.0.0.1',database: 'covid',password: '123456',port: 5432,
})app.use(express.json())app.get('/get-maximum', async (req, res) => {try {const { parameter, date1, date2 } = req.queryconst query = {text: `SELECT MAX(sum) FROM (SELECT SUM(daily_${parameter}) as sumFROM world_covid_dataWHERE date >= $1 AND date <= $2GROUP BY country_name) z`,values: [date1, date2],};const result = await pool.query(query)res.json({ maximum: result.rows })} catch (err) {console.error(err.message);res.status(500).send('Server error');}
})....... //此处省略一万行app.listen(3000, () => {console.log('Server running at http://localhost:3000');
});