WBG必胜！

最新推荐文章于 2024-11-12 21:14:07 发布

Sinon！

最新推荐文章于 2024-11-12 21:14:07 发布

阅读量1.2k

点赞数 42

文章标签： java javascript 青少年编程

本文链接：https://blog.csdn.net/weixin_70306182/article/details/135351370

版权

本文详细介绍了如何使用nodejs和PostgreSQL构建一个简单的WebGIS系统，包括空间数据导入、数据库查询、nodejs服务端开发以及前端地图客户端的交互实现。

摘要由CSDN通过智能技术生成

实验三简单WebGIS系统搭建

总体步骤：

1 空间数据导入数据库，使用pgadmin预查询；

2 安装nodejs，编写nodejs服务端测试程序；

3 使用nodejs对数据库进行查询；

4 前端引入地图客户端并调用nodejs服务接口实现查询。

一、空间数据导入数据库，使用pgadmin预查询

1 以postgis_31_sample为模板新建数据库“WebGIS_1”，将p3.sql导入其中。

2 练习查询语句

（1）以文本形式查看空间数据；

（2）计算迁西县的面积；

（3）计算梁春雨家与你家的空间距离；

（4）根据学生姓名查询学生所在区县。

二、nodejs安装与测试

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2.1 nodejs安装

Nodejs安装参考地址:

https://www.runoob.com/nodejs/nodejs-install-setup.html

2.2安装Express框架

新建文件夹server，进入文件夹，按住shift键，在空白处同时点击鼠标右键，在弹出窗口中选择“在此处打开powershell窗口”，在打开窗口中输入如下代码：

cnpm install express --save 或者npm install express --save

2.3 编写Nodejs服务端测试程序

2.2.1 在server文件夹中，新建文本文档，server.txt，将后缀名改为js，注意：文档路径不能包含空格。

2.2.2 使用编辑软件（sublime）打开server.js，将如下代码粘贴至server.js中。

var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

2.2.3 切换至server.js所在目录，在powershell窗口中输入如下代码：

node server.js

2.2.4 打开浏览器，在浏览器中输入如下URL：

localhost:8081

2.2.5 如浏览器中返回Hello Word，则说明运行正常。

三、使用nodejs对数据库进行查询；

3.1安装nodejs访问postgresql的连接库

在server.js同级目录下打开powershell（打开方式，见2.2），输入如下代码：

npm install pg --save

3.2 将如下代码与server.js原有代码进行替换，注意：修改第5行的用户名、密码、数据库名

var express = require('express');

var app = express();

var pg = require('pg');

//数据库配置

var conString = "tcp://postgres:******@localhost/T1030"; //tcp://用户名：密码@localhost/数据库名

var client = new pg.Client(conString);

//设置允许跨域访问

app.all('*', function (req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By", ' 3.2.1')

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

app.get('/', function (req, res) {

res.send('Hello World');

})

app.get('/getProvFromName',function(req, res){

var name = req.query.name;

console.log(name);

selectSQLString = "select xian.name,st_asgeojson(ST_Centroid(xian.geom)) from xian where st_within((select giser2021.geom from giser2021 where name = '"+name+"'),xian.geom)";

//客户端连接，进行数据插入

client.connect(function(error, results){

client.query(selectSQLString,function(error,results){

//将返回结果传递至客户端

console.log(results);

res.send(results);

})

});

})

var server = app.listen(8081, function () {

var host = server.address().address

var port = server.address().port

console.log("应用实例，访问地址为 http://%s:%s", host, port)

})

3.3 切换至2.2.3的powershell窗口，使用ctrl+c终止服务，再次按照2.2.3的方式启动服务。

四前端调用nodejs服务接口实现查询

4.1 在server文件夹的同级目录新建client文件夹，进入client文件夹，新建index.html文件。

在index.html同级目录新建js文件夹。访问如下URL下载jQuery。

https://code.jquery.com/jquery-1.4.1.min.js

可以将jQuery文件下载至本地，也可以直接在线引用（本例为在线引用方式）。

4.2 打开HBuilderX软件，“文件”-“导入”-“从本地目录导入”，在弹出窗口中选择client文件夹。使用HBuilder编辑客户端文件。

4.3 将如下代码复制到index.html中

<!DOCTYPE html>

<html>

<head>

<title>根据姓名查询所在省份</title>

</head>

html,

body {

height: 100%;

margin: 0px;

}

#pano {

position: absolute;

z-index: 1000;

}

#map {

width: 100%;

height: 100%;

float: left;

background-color: aqua;

}

</style>

var map;

function queryByName() {

var name = $("#name").val();

$.get("http://localhost:8081/getProvFromName?name=" + name, function(data, status) {

try{

var prov = data.rows[0].name;

var coor = eval('(' + data.rows[0].st_asgeojson + ')');

var lon = coor.coordinates[0];

var lat = coor.coordinates[1];

$("#resultText").html(name + "来自" + prov + "坐标为:" + lon + "," + lat);

var infoWindow = new AMap.InfoWindow({

//创建信息窗体

isCustom: true, //使用自定义窗体

content: "<div>"+name+"</div>", //信息窗体的内容可以是任意html片段

offset: new AMap.Pixel(16, -45),

});

var onMarkerClick = function(e) {

infoWindow.open(map, e.target.getPosition()); //打开信息窗体

};

var position = new AMap.LngLat(lon, lat); // Marker经纬度

var marker = new AMap.Marker({

position: position

});

map.add(marker);

map.setCenter(position,false,1000);

marker.on("click", onMarkerClick); //绑定click事件

}catch(e){

alert("查无此人！")

}

});

}

function init() {

map = new AMap.Map('map', {

viewMode: '2D', // 默认使用 2D 模式

zoom: 11, //初始化地图层级

center: [116.397428, 39.90923] //初始化地图中心点

});

}

</script>

<span>请输入姓名：</span>

</div>

</body>

</html>

4.4 在HBuilder菜单栏点击“运行”-“运行到浏览器”-“Chrome”，在弹出窗口中的左上角输入学生名称，点击查询。