Patch from http://trac.osgeo.org/openlayers/ticket/3307.
Uses a remote GeoServer now, which is added to the allowed hosts for proxy.cgi.
This commit is contained in:
ahocevar
289
examples/wps.js
Normal file
289
examples/wps.js
Normal file
@@ -0,0 +1,289 @@
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
var capabilities, // the capabilities, read by Format.WPSCapabilities::read
|
||||
process; // the process description from Format.WPSDescribeProcess::read
|
||||
|
||||
// get some capabilities
|
||||
getCapabilities();
|
||||
|
||||
// create the UI
|
||||
var layer = new OpenLayers.Layer.Vector("Scratchpad", {
|
||||
isBaseLayer: true
|
||||
});
|
||||
var toolbar = new OpenLayers.Control.EditingToolbar(layer);
|
||||
toolbar.addControls([new OpenLayers.Control.ModifyFeature(layer, {
|
||||
title: "Select feature"
|
||||
})]);
|
||||
var map = new OpenLayers.Map('map', {
|
||||
controls: [
|
||||
toolbar,
|
||||
new OpenLayers.Control.ZoomPanel(),
|
||||
new OpenLayers.Control.PanPanel()
|
||||
],
|
||||
layers: [layer]
|
||||
});
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
// add behavior to html elements
|
||||
document.getElementById("processes").onchange = describeProcess;
|
||||
|
||||
// using OpenLayers.Format.WPSCapabilities to read the capabilities
|
||||
function getCapabilities() {
|
||||
OpenLayers.Request.GET({
|
||||
url: "http://suite.opengeo.org/geoserver/wps/",
|
||||
params: {
|
||||
"SERVICE": "wps",
|
||||
"REQUEST": "GetCapabilities"
|
||||
},
|
||||
success: function(response){
|
||||
capabilities = new OpenLayers.Format.WPSCapabilities().read(
|
||||
response.responseText
|
||||
);
|
||||
var dropdown = document.getElementById("processes");
|
||||
var offerings = capabilities.processOfferings, option;
|
||||
// populate the dropdown
|
||||
for (var p in offerings) {
|
||||
option = document.createElement("option");
|
||||
option.innerHTML = offerings[p].identifier;
|
||||
option.value = p;
|
||||
dropdown.appendChild(option);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// using OpenLayers.Format.WPSDescribeProcess to get information about a
|
||||
// process
|
||||
function describeProcess() {
|
||||
var selection = this.options[this.selectedIndex].value;
|
||||
OpenLayers.Request.GET({
|
||||
url: "http://suite.opengeo.org/geoserver/wps/",
|
||||
params: {
|
||||
"SERVICE": "wps",
|
||||
"REQUEST": "DescribeProcess",
|
||||
"VERSION": capabilities.version,
|
||||
"IDENTIFIER": selection
|
||||
},
|
||||
success: function(response) {
|
||||
process = new OpenLayers.Format.WPSDescribeProcess().read(
|
||||
response.responseText
|
||||
).processDescriptions[selection];
|
||||
buildForm();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// dynamically create a form from the process description
|
||||
function buildForm() {
|
||||
document.getElementById("abstract").innerHTML = process["abstract"];
|
||||
document.getElementById("input").innerHTML = "<h3>Input:</h3>";
|
||||
document.getElementById("output").innerHTML = "";
|
||||
|
||||
var inputs = process.dataInputs, supported = true;
|
||||
var input;
|
||||
for (var i=0,ii=inputs.length; i<ii; ++i) {
|
||||
input = inputs[i];
|
||||
if (input.complexData) {
|
||||
var formats = input.complexData.supported.formats;
|
||||
if (formats["application/wkt"]) {
|
||||
addWKTInput(input);
|
||||
} else if (formats["text/xml; subtype=wfs-collection/1.0"]) {
|
||||
addWFSCollectionInput(input);
|
||||
} else {
|
||||
supported = false;
|
||||
}
|
||||
} else if (input.literalData) {
|
||||
addLiteralInput(input);
|
||||
} else {
|
||||
supported = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (supported) {
|
||||
var executeButton = document.createElement("button");
|
||||
executeButton.innerHTML = "Execute";
|
||||
document.getElementById("input").appendChild(executeButton);
|
||||
executeButton.onclick = execute;
|
||||
} else {
|
||||
document.getElementById("input").innerHTML = '<span class="notsupported">' +
|
||||
"Sorry, the WPS builder does not support the selected process." +
|
||||
"</span>";
|
||||
}
|
||||
}
|
||||
|
||||
// helper function to dynamically create a textarea for geometry (WKT) data
|
||||
// input
|
||||
function addWKTInput(input, previousSibling) {
|
||||
var name = input.identifier;
|
||||
var container = document.getElementById("input");
|
||||
var label = document.createElement("label");
|
||||
label["for"] = name;
|
||||
label.title = input["abstract"];
|
||||
label.innerHTML = name + " (select feature, then click field):";
|
||||
previousSibling && previousSibling.nextSibling ?
|
||||
container.insertBefore(label, previousSibling.nextSibling) :
|
||||
container.appendChild(label);
|
||||
var field = document.createElement("textarea");
|
||||
field.onclick = function () {
|
||||
if (layer.selectedFeatures.length) {
|
||||
this.innerHTML = new OpenLayers.Format.WKT().write(
|
||||
layer.selectedFeatures[0]
|
||||
);
|
||||
}
|
||||
createCopy(input, this, addWKTInput);
|
||||
};
|
||||
field.onblur = function() {
|
||||
input.data = field.value ? {
|
||||
complexData: {
|
||||
mimeType: "application/wkt",
|
||||
value: this.value
|
||||
}
|
||||
} : undefined;
|
||||
};
|
||||
field.title = input["abstract"];
|
||||
field.id = name;
|
||||
previousSibling && previousSibling.nextSibling ?
|
||||
container.insertBefore(field, previousSibling.nextSibling.nextSibling) :
|
||||
container.appendChild(field);
|
||||
}
|
||||
|
||||
// helper function to dynamically create a WFS collection reference input
|
||||
function addWFSCollectionInput(input) {
|
||||
var name = input.identifier;
|
||||
var field = document.createElement("input");
|
||||
field.title = input["abstract"];
|
||||
field.value = name + " (layer on demo server)";
|
||||
addValueHandlers(field, function() {
|
||||
input.reference = field.value ? {
|
||||
mimeType: "text/xml; subtype=wfs-collection/1.0",
|
||||
href: "http://geoserver/wfs",
|
||||
method: "POST",
|
||||
body: {
|
||||
wfs: {
|
||||
version: "1.0.0",
|
||||
outputFormat: "GML2",
|
||||
featureType: field.value
|
||||
}
|
||||
}
|
||||
} : undefined;
|
||||
});
|
||||
document.getElementById("input").appendChild(field);
|
||||
}
|
||||
|
||||
// helper function to create a literal input textfield or dropdown
|
||||
function addLiteralInput(input, previousSibling) {
|
||||
var name = input.identifier;
|
||||
var container = document.getElementById("input");
|
||||
var anyValue = input.literalData.anyValue;
|
||||
// anyValue means textfield, otherwise we create a dropdown
|
||||
var field = document.createElement(anyValue ? "input" : "select");
|
||||
field.id = name;
|
||||
field.title = input["abstract"];
|
||||
previousSibling && previousSibling.nextSibling ?
|
||||
container.insertBefore(field, previousSibling.nextSibling) :
|
||||
container.appendChild(field);
|
||||
if (anyValue) {
|
||||
var dataType = input.literalData.dataType;
|
||||
field.value = name + (dataType ? " (" + dataType + ")" : "");
|
||||
addValueHandlers(field, function() {
|
||||
input.data = field.value ? {
|
||||
literalData: {
|
||||
value: field.value
|
||||
}
|
||||
} : undefined;
|
||||
});
|
||||
} else {
|
||||
var option;
|
||||
option = document.createElement("option");
|
||||
option.innerHTML = name;
|
||||
field.appendChild(option);
|
||||
for (var v in input.literalData.allowedValues) {
|
||||
option = document.createElement("option");
|
||||
option.value = v;
|
||||
option.innerHTML = v;
|
||||
field.appendChild(option);
|
||||
}
|
||||
field.onchange = function() {
|
||||
createCopy(input, field, addLiteralInput);
|
||||
input.data = this.selectedIndex ? {
|
||||
literalData: {
|
||||
value: this.options[this.selectedIndex].value
|
||||
}
|
||||
} : undefined;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// if maxOccurs is > 1, this will add a copy of the field
|
||||
function createCopy(input, field, fn) {
|
||||
if (input.maxOccurs && input.maxOccurs > 1 && !field.userSelected) {
|
||||
// add another copy of the field - we don't check maxOccurs
|
||||
field.userSelected = true;
|
||||
var newInput = OpenLayers.Util.extend({}, input);
|
||||
// we recognize copies by the occurrence property
|
||||
newInput.occurrence = (input.occurrence || 0) + 1;
|
||||
process.dataInputs.push(newInput);
|
||||
fn(newInput, field);
|
||||
}
|
||||
}
|
||||
|
||||
// helper function for adding events to form fields
|
||||
function addValueHandlers(field, onblur) {
|
||||
field.onclick = function() {
|
||||
if (!this.initialValue) {
|
||||
this.initialValue = this.value;
|
||||
this.value = "";
|
||||
}
|
||||
};
|
||||
field.onblur = function() {
|
||||
if (!this.value) {
|
||||
this.value = this.initialValue;
|
||||
delete this.initialValue;
|
||||
}
|
||||
onblur.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
// execute the process
|
||||
function execute() {
|
||||
var output = process.processOutputs[0];
|
||||
var input;
|
||||
// remove occurrences that the user has not filled out
|
||||
for (var i=process.dataInputs.length-1; i>=0; --i) {
|
||||
input = process.dataInputs[i];
|
||||
if (input.occurrence && !input.data && !input.reference) {
|
||||
OpenLayers.Util.removeItem(process.dataInputs, input);
|
||||
}
|
||||
}
|
||||
process.responseForm = {
|
||||
rawDataOutput: {
|
||||
identifier: output.identifier
|
||||
}
|
||||
};
|
||||
if (output.complexOutput && output.complexOutput.supported.formats["application/wkt"]) {
|
||||
process.responseForm.rawDataOutput.mimeType = "application/wkt";
|
||||
}
|
||||
OpenLayers.Request.POST({
|
||||
url: "http://suite.opengeo.org/geoserver/wps",
|
||||
data: new OpenLayers.Format.WPSExecute().write(process),
|
||||
success: showOutput
|
||||
});
|
||||
}
|
||||
|
||||
// add the process's output to the page
|
||||
function showOutput(response) {
|
||||
var result = document.getElementById("output");
|
||||
result.innerHTML = "<h3>Output:</h3>";
|
||||
var features;
|
||||
var contentType = response.getResponseHeader("Content-Type");
|
||||
if (contentType == "application/wkt") {
|
||||
features = new OpenLayers.Format.WKT().read(response.responseText);
|
||||
} else if (contentType == "text/xml; subtype=wfs-collection/1.0") {
|
||||
features = new OpenLayers.Format.WFST.v1_0_0().read(response.responseText);
|
||||
}
|
||||
if (features && (features instanceof OpenLayers.Feature.Vector || features.length)) {
|
||||
layer.addFeatures(features);
|
||||
result.innerHTML += "The result should also be visible on the map.";
|
||||
}
|
||||
result.innerHTML += "<textarea>" + response.responseText + "</textarea>";
|
||||
}
|
||||
Reference in New Issue
Block a user