source:
branches/PublicaMundi_David-devel/workshop/2010/building_wps_client_using_ol.rst
@
952
Last change on this file since 952 was 689, checked in by nbozon, 9 years ago | |
---|---|
|
|
File size: 12.7 KB |
Building a WPS client using OpenLayers
Table of Contents
The next step of our workshop is to connect to the OGR Services we have created from an OpenLayers map. This will allow to apply single or multiple geometries processes on user-selected polygons and to display the new generated geometries.
Creating a simple map showing the dataset as WMS
OpenLayers is also included in OSGeoLive default distribution, so it is convenient to use it for our needs. Please open /var/www/zoo-ogr.html using your favorite text editor and paste the following HTML snippet:
The following JavaScript code must then be added in a <script></script> section within the <head> one. This will setup a map showing the japanese regions data as WMS.
Once done, please save your HTML file as zoo-ogr.html in your workshop directory, then copy it in /var/www and visualize it with your favorite Web browser using this link : http://localhost/zoo-ogr.html. You should obtain a map centered on the Japan with the WMS layer activated.
![./images/OL-JP-1.png](./images/OL-JP-1.png)
Fetching the data layer as WFS and adding selection controls
Before accessing the displayed data via WFS, you first have to create new vector layers dedicated to host the several interactions we are going to create. Please add the following lines within the init() function, and do not forget to add the newly created layer in the map.addLayers method:
Then, you can now access the data by creating new controls to select polygons, as the following. Please note that OpenLayers.Protocol.WFS.fromWMSLayer is used to access geometries and that several state of selection are declared and append to the control variable.
Please save your HTML file again. You should now be able to select a polygon only by clicking on it. The selected polygon should appear in blue color.
![./images/OL-JP-2.png](./images/OL-JP-2.png)
Calling the single geometry services from JavaScript
Now that everything is setup, we can go on and call our OGR ZOO services with JavaScript. Please add the following lines after the init() function, which will call the single geometry processes. You can notice that we use a specific parseMapServerId function which let us remove the unecessary white space returned as fid value.
Then, some specific buttons must be added in the HTML, in order to be able to call the different processes we just declared. You can add them on top of the map by writing the following lines before the <div id="map"></div>.
Save your HTML file again. You should now be able to select a polygon and to launch a Buffer, ConvexHull, Boundary or Centroid on it by clicking one of the button. The result of the process should appear as GeoJSON layer on the map, in orange color.
![./images/OL-JP-3.png](./images/OL-JP-3.png)
Calling the multiples geometries processes from JavaScript
Using the same technique, you can now write a function dedicated to the multiple geometries processes. Please add the following lines after the simpleProcessing() function, we will guide you during the exercise in section 5 on how to create such a function.
Note that this time we didn't use the GET method to request the ZOO Kernel but a XML POST. We did that because if you use the GET method you will get error due to the HTTP GET method limitation based on the length of your request. Using JSON string representing the geometry will make your request longer.
Once you get the functions to call your multiple geometries processes, you' must add some buttons to fire the request call. Here is the HTML code to add to your current zoo-ogr.html file :
Please reload the page. You should then be able to run your multiple geometries services and you should get results displayed in red as shown by the following screenshots :
![./images/OL-JP-4.png](./images/OL-JP-4.png)
![./images/OL-JP-5.png](./images/OL-JP-5.png)
![./images/OL-JP-6.png](./images/OL-JP-6.png)
![./images/OL-JP-7.png](./images/OL-JP-7.png)
It seems that something is missing in your Services Provider to get the same results … The multiple geometries Services ! This is what we are going to do together in the next section.