ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL: zoo-ogr-jp.html

File zoo-ogr-jp.html, 7.0 KB (added by foss4g-tokyo, 13 years ago)

HTML File

Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2  <head>
3    <link rel="stylesheet" href="/openlayers/theme/default/style.css" type="text/css" />
4    <link rel="stylesheet" href="layout-demo.css" type="text/css" />
5    <title>OGR ZOO WS 2010 Demo Client</title>
6    <style>
7     #map{width:700px;height:500px;}
8    </style>
9
10    <script src="/openlayers/lib/OpenLayers.js"></script>
11    <script type="text/javascript">
12        var map, layer, select, hover, multi, control;
13var typename="regions";
14        var main_url="http://localhost/cgi-bin/mapserv?map=/var/www/wfs.map";
15
16function init(){
17
18  map = new OpenLayers.Map('map', {
19    controls: [
20      new OpenLayers.Control.PanZoom(),
21      new OpenLayers.Control.Permalink(),
22      new OpenLayers.Control.Navigation()
23    ]
24  });
25  layer = new OpenLayers.Layer.WMS(typename,main_url, {
26        layers: 'regions',
27        transparent: 'true',
28        format: 'image/png'
29      }, 
30      {
31        isBaseLayer: true,
32        visibility: true,
33        buffer: 0,
34        singleTile: true
35      }
36);
37select = new OpenLayers.Layer.Vector("Selection", {
38  styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
39});
40     
41hover = new OpenLayers.Layer.Vector("Hover");
42multi = new OpenLayers.Layer.Vector("Multi", { styleMap: 
43  new OpenLayers.Style({
44    fillColor:"red",
45    fillOpacity:0.4,
46    strokeColor:"red",
47    strokeOpacity:1,
48    strokeWidth:2
49  })
50});
51
52map.addLayers([layer, select, hover, multi]);
53
54  map.setCenter(new OpenLayers.LonLat(138,33.5),5);
55
56var protocol = OpenLayers.Protocol.WFS.fromWMSLayer(layer, {
57        featurePrefix: 'ms',
58        geometryName: 'msGeometry',
59        featureType: typename
60    });
61
62control = new OpenLayers.Control.GetFeature({
63        protocol: protocol,
64        box: false,
65        hover: false,
66        multipleKey: "shiftKey",
67        toggleKey: "ctrlKey"
68      });
69control.events.register("featureselected", this, function(e) {
70                select.addFeatures([e.feature]);
71            });
72control.events.register("featureunselected", this, function(e) {
73                select.removeFeatures([e.feature]);
74            });
75map.addControl(control);
76control.activate();
77
78}
79
80function parseMapServerId(){
81  var sf=arguments[0].split(".");
82  return sf[0]+"."+sf[1].replace(/ /g,'');
83}
84
85function simpleProcessing(aProcess) {
86  if (select.features.length == 0)
87    return alert("No feature selected!");
88  if(multi.features.length>=1)
89        multi.removeFeatures(multi.features);
90  var url = '/cgi-bin/zoo_loader.cgi?request=Execute&service=WPS&version=1.0.0&';
91  if (aProcess == 'Buffer') {
92    var dist = document.getElementById('bufferDist')?document.getElementById('bufferDist').value:'1';
93    if (isNaN(dist)) return alert("Distance is not a Number!");
94    url+='Identifier=Buffer&DataInputs=BufferDistance='+dist+'@datatype=interger;InputPolygon=Reference@xlink:href=';
95  } else
96    url += 'Identifier='+aProcess+'&DataInputs=InputPolygon=Reference@xlink:href=';
97  var xlink = control.protocol.url +"&SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0";
98  xlink += '&typename='+control.protocol.featurePrefix;
99  xlink += ':'+control.protocol.featureType;
100  xlink += '&SRS='+control.protocol.srsName;
101  xlink += '&FeatureID='+parseMapServerId(select.features[0].fid);
102  url += encodeURIComponent(xlink);
103  url += '&RawDataOutput=Result@mimeType=application/json';
104 
105  var request = new OpenLayers.Request.XMLHttpRequest();
106  request.open('GET',url,true);
107  request.onreadystatechange = function() {
108    if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
109      var GeoJSON = new OpenLayers.Format.GeoJSON();
110      var features = GeoJSON.read(request.responseText);
111      hover.removeFeatures(hover.features);
112      hover.addFeatures(features);
113    }
114  }
115  request.send();
116}
117
118function multiProcessing(aProcess) {
119  if (select.features.length == 0 || hover.features.length == 0)
120    return alert("No feature created!");
121  var url = '/cgi-bin/zoo_loader.cgi';
122  var xlink = control.protocol.url +"&SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0";
123  xlink += '&typename='+control.protocol.featurePrefix;
124  xlink += ':'+control.protocol.featureType;
125  xlink += '&SRS='+control.protocol.srsName;
126  xlink += '&FeatureID='+parseMapServerId(select.features[0].fid);
127  var GeoJSON = new OpenLayers.Format.GeoJSON();
128  try {
129    var params = '<wps:Execute service="WPS" version="1.0.0" xmlns:wps="http://www.opengis.net/wps/1.0.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wps/1.0.0/../wpsExecute_request.xsd">';
130    params += '<ows:Identifier>'+aProcess+'</ows:Identifier>';
131    params += '<wps:DataInputs>';
132    params += '<wps:Input>';
133    params += '<ows:Identifier>InputEntity1</ows:Identifier>';
134    params += '<wps:Reference xlink:href="'+xlink.replace(/&/gi,'&amp;')+'"/>';
135    params += '</wps:Input>';
136    params += '<wps:Input>';
137    params += '<ows:Identifier>InputEntity2</ows:Identifier>';
138    params += '<wps:Data>';
139    params += '<wps:ComplexData mimeType="application/json"> '+GeoJSON.write(hover.features[0].geometry)+' </wps:ComplexData>';
140    params += '</wps:Data>';
141    params += '</wps:Input>';
142    params += '</wps:DataInputs>';
143    params += '<wps:ResponseForm>';
144    params += '<wps:RawDataOutput>';
145    params += '<ows:Identifier>Result</ows:Identifier>';
146    params += '</wps:RawDataOutput>';
147    params += '</wps:ResponseForm>';
148    params += '</wps:Execute>';
149  } catch(e) {
150    alert(e);
151    return false;
152  }
153  var request = new OpenLayers.Request.XMLHttpRequest();
154  request.open('POST',url,true);
155  request.setRequestHeader('Content-Type','text/xml');
156  request.onreadystatechange = function() {
157    if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
158      var GeoJSON = new OpenLayers.Format.GeoJSON();
159      var features = GeoJSON.read(request.responseText);
160      multi.removeFeatures(multi.features);
161      multi.addFeatures(features);
162    }
163  }
164  request.send(params);
165}
166
167    </script>
168  </head>
169<body onload="init()">
170<div style="float: right;padding-left: 5px;">
171 <h3>Single geometry processing</h3>
172 <ul>
173   <li>
174    <input type="button" onclick="simpleProcessing(this.value);" value="Buffer" />
175    <input id="bufferDist" value="1" />
176   </li>
177   <li>
178    <input type="button" onclick="simpleProcessing(this.value);" value="ConvexHull" />
179   </li>
180   <li>
181    <input type="button" onclick="simpleProcessing(this.value);" value="Boundary" />
182   </li>
183   <li>
184    <input type="button" onclick="simpleProcessing(this.value);" value="Centroid" />
185   </li>
186 </ul>
187<h3>Multiple geometries processing</h3>
188<ul>
189  <li>
190    <input type="button" onclick="multiProcessing(this.value);" value="Union"/>
191  </li>
192  <li>
193    <input type="button" onclick="multiProcessing(this.value);" value="Difference"/>
194  </li>
195  <li>
196    <input type="button" onclick="multiProcessing(this.value);" value="SymDifference"/>
197  </li>
198  <li>
199    <input type="button" onclick="multiProcessing(this.value);" value="Intersection"/>
200  </li>
201</ul>
202
203</div>
204
205
206  <div id="map"></div>
207  </body>
208</html>

Download now !

Search

Context Navigation

Main Navigation

ZOO Sponsors

http://www.zoo-project.org/trac/chrome/site/img/geolabs-logo.pnghttp://www.zoo-project.org/trac/chrome/site/img/neogeo-logo.png http://www.zoo-project.org/trac/chrome/site/img/apptech-logo.png http://www.zoo-project.org/trac/chrome/site/img/3liz-logo.png http://www.zoo-project.org/trac/chrome/site/img/gateway-logo.png

Become a sponsor !

Knowledge partners

http://www.zoo-project.org/trac/chrome/site/img/ocu-logo.png http://www.zoo-project.org/trac/chrome/site/img/gucas-logo.png http://www.zoo-project.org/trac/chrome/site/img/polimi-logo.png http://www.zoo-project.org/trac/chrome/site/img/fem-logo.png http://www.zoo-project.org/trac/chrome/site/img/supsi-logo.png http://www.zoo-project.org/trac/chrome/site/img/cumtb-logo.png

Become a knowledge partner

Related links

http://zoo-project.org/img/ogclogo.png http://zoo-project.org/img/osgeologo.png