新网 网站建设,win7卸载电脑上的wordpress,军事要闻军事频道,服装设计好找工作吗1.项目地址
GISpjd/WebGIS-Show-Covid19 (github.com)#xff0c;具体每个文件的职能可以参考README文档。
2.前言 预览 所用技术栈#xff1a; 项目需求本身不是过于复杂#xff0c;所以没有在相应前端框架下完成#xff0c;但转入框架也是比较容易的 #… 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);
}); c.构建前端界面 整体布局以flex布局为主图表是依据于chart.js具体操作可以查询项目源代码我的注释会逐渐完善的。
