Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to send WPS request using HTML

enter image description hereI have installed WPS extension at GeoServer.I have generated the WPS request using GeoServer's WPS Request Builder. For it I have chosen process=gs:Bounds, Process inputs=VECTOR_LAYER and chosen any one vector layer among I have uploaded then chosen option "Generate XML from process inputs/outputs' from WPS Request Builder. After it one XML file has been generated and i have saved i with .xml extension. I have created one website using HTML,CSS ans Java Script. Now I want to access this XML file from the website. How could i define that code?

like image 596
florida Avatar asked Nov 30 '25 03:11

florida


1 Answers

After you get the XML you just need to do a POST request with it. As an example:

<!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>

Where:

  • the variable raw is your XML in string format with the parameter FEATURES_COLLECTION, in this example I choose GeoJSON for the features format (at the moment of generating the XML), with OpenLayers you can use writeFeatures to get the value
  • FEATURES_COLLECTION is your features collection (ex. { "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 is your map server url (ex. http://localhost:8080/geoserver)
like image 73
cabesuon Avatar answered Dec 02 '25 16:12

cabesuon



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!