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.query
        const query = {
            text: `SELECT MAX(sum) FROM (
                     SELECT SUM(daily_${parameter}) as sum
                     FROM world_covid_data
                     WHERE date >= $1 AND date <= $2
                     GROUP 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');
});

 c.构建前端界面

         整体布局以flex布局为主，图表是依据于chart.js，具体操作可以查询项目源代码，我的注释会逐渐完善的。