javascript - 如何使用 HTML 发送 WPS 请求
问题描述
我已经在 GeoServer 上安装了 WPS 扩展。我已经使用 GeoServer 的 WPS 请求生成器生成了 WPS 请求。为此,我选择了 process=gs:Bounds, Process inputs=VECTOR_LAYER 并选择了我上传的任何一个矢量图层,然后从 WPS Request Builder 中选择了“从流程输入/输出生成 XML”选项。之后生成了一个 XML 文件我用 .xml 扩展名保存了我。我使用 HTML、CSS 和 Java 脚本创建了一个网站。现在我想从网站访问这个 XML 文件。我该如何定义该代码?
解决方案
获得 XML 后,您只需要使用它进行 POST 请求。举个例子:
<!DOCTYPE html>
<html>
<head>
<title>WPS Example</title>
</head>
<body>
<h1>How to send WPS request using HTML</h1>
<div><button onclick="getBounds()">Get Bounds</button></div>
<p id="result"></p>
<script>
var getBounds = function () {
var FEATURES_COLLECTION = '{ "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] }';
var GEOSERVER_URL = 'http://localhost/geoserver';
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/xml");
var raw = '<?xml version="1.0" encoding="UTF-8"?>\
<wps:Execute version="1.0.0" service="WPS"\
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\
xmlns="http://www.opengis.net/wps/1.0.0"\
xmlns:wfs="http://www.opengis.net/wfs"\
xmlns:wps="http://www.opengis.net/wps/1.0.0"\
xmlns:ows="http://www.opengis.net/ows/1.1"\
xmlns:gml="http://www.opengis.net/gml"\
xmlns:ogc="http://www.opengis.net/ogc"\
xmlns:wcs="http://www.opengis.net/wcs/1.1.1"\
xmlns:xlink="http://www.w3.org/1999/xlink"\
xsi:schemaLocation="http://www.opengis.net/wps/1.0.0\ http://schemas.opengis.net/wps/1.0.0/wpsAll.xsd">\
<ows:Identifier>gs:Bounds</ows:Identifier>\
<wps:DataInputs>\
<wps:Input>\
<ows:Identifier>features</ows:Identifier>\
<wps:Data>\
<wps:ComplexData mimeType="application/json">' +
'<![CDATA[' + FEATURES_COLLECTION + ']]>' +
'</wps:ComplexData>\
</wps:Data>\
</wps:Input>\
</wps:DataInputs>\
<wps:ResponseForm>\
<wps:RawDataOutput>\
<ows:Identifier>bounds</ows:Identifier>\
</wps:RawDataOutput>\
</wps:ResponseForm>\
</wps:Execute>';
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch(GEOSERVER_URL + "/wps", requestOptions)
.then(response => response.text())
.then(result => {
document.getElementById("result").innerText = result;
console.log(result);
})
.catch(error => console.log('error', error));
};
</script>
</body>
</html>
在哪里:
- 变量 raw 是带有参数 FEATURES_COLLECTION 的字符串格式的 XML,在此示例中,我选择 GeoJSON 作为特征格式(在生成 XML 时),使用 OpenLayers,您可以使用writeFeatures来获取值
- FEATURES_COLLECTION 是您的特征集合(例如 { "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] })
- GEOSERVER_URL 是您的地图服务器网址(例如http://localhost:8080/geoserver)
推荐阅读
- android - 从我的片段中隐藏浮动操作按钮,即使我改变手机的方向也保持隐藏
- linux - FFmpeg — 尝试替换音频时出现分段错误
- r-plotly - 如何强制 plotly R 用类别轴绘制缺失值
- kubernetes - 使用 kubernetes 将密钥附加到 CATALINA_OPTS
- php - PHP:“无法获取 DOMElement。节点不再存在于”使用 DOMXpath
- tensorflow-data-validation - 如何以正确的格式保存 TFDV 统计信息以便重新加载?
- java - 动画 Drawable - 空对象引用
- bash - 在文件开头添加 0 以获得 5 位组
- docker - 为什么 cap_net_bind_service 在这个 nginx 嵌套 Docker 容器中不起作用?
- javascript - 如何从 API 加载数据?