javascript - 如何使用 HTML 发送 WPS 请求

标签 javascript html xml openlayers geoserver

enter image description here我已经在 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获得值(value)
  • FEATURES_COLLECTION 是您的功能集合(例如 { “类型”:“多边形”, “坐标”:[ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] })
  • GEOSERVER_URL 是您的 map 服务器 URL(例如 http://localhost:8080/geoserver)

关于javascript - 如何使用 HTML 发送 WPS 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59640290/

相关文章:

html - 使用 Kanna 快速解析 html

javascript - IE9 未获取 XML 节点的 'children'

javascript - 怎么修? Chrome控制台: ERR_UNSAFE_REDIRECT

javascript - 一键切换div内容

javascript - 在函数中使用/添加正则表达式(?)将 HTML 表导出到 Excel?

java - XmlPullParserException "expected: START_DOCUMENT {null}articles (position:START_TAG"

java - 如何在模式中正确声明扩展?

javascript - _underscore 模板 - 从外部文件加载模板

javascript - jQuery 选择随机数量的复选框不起作用

javascript - 使用对象数组中的 propTypes 来 react 组件