Changeset 262 for trunk/docs/workshop/2010/building_wps_client_using_ol.txt
- Timestamp:
- Jul 15, 2011, 8:03:05 PM (13 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/docs/workshop/2010/building_wps_client_using_ol.txt
r256 r262 2 2 3 3 Building a WPS client using OpenLayers 4 ############################### 4 ###################################### 5 5 6 6 .. contents:: Table of Contents … … 8 8 :backlinks: top 9 9 10 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. 10 The next step of our workshop is to connect to the OGR Services we have created 11 from an OpenLayers map. This will allow to apply single or multiple geometries 12 processes on user-selected polygons and to display the new generated geometries. 11 13 12 14 Creating a simple map showing the dataset as WMS 13 ****************************************************** 14 15 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: 15 ************************************************ 16 17 OpenLayers is also included in OSGeoLive default distribution, so it is convenient 18 to use it for our needs. Please open ``/var/www/zoo-ogr.html`` using your favorite 19 text editor and paste the following HTML snippet: 16 20 17 21 .. code-block:: guess … … 32 36 </html> 33 37 34 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. 38 The following JavaScript code must then be added in a ``<script></script>`` section within the 39 ``<head>`` one. This will setup a map showing the japanese regions data as WMS. 35 40 36 41 .. code-block:: guess … … 65 70 } 66 71 67 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. 72 Once done, please save your HTML file as ``zoo-ogr.html`` in your workshop directory, 73 then copy it in ``/var/www`` and visualize it with your favorite Web browser using this link : 74 ``http://localhost/zoo-ogr.html``. You should obtain a map centered on the Japan with the WMS layer activated. 68 75 69 76 .. image:: ./images/OL-JP-1.png … … 73 80 74 81 Fetching the data layer as WFS and adding selection controls 75 **************************************************************** 76 77 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: 82 ************************************************************ 83 84 Before accessing the displayed data via WFS, you first have to create new vector layers 85 dedicated to host the several interactions we are going to create. Please add the following 86 lines within the ``init()`` function, and do not forget to add the newly created layer in 87 the map.addLayers method: 78 88 79 89 .. code-block:: guess … … 96 106 map.addLayers([layer, select, hover, multi]); 97 107 98 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. 108 Then, you can now access the data by creating new controls to select polygons, as the 109 following. Please note that ``OpenLayers.Protocol.WFS.fromWMSLayer`` is used to access 110 geometries and that several state of selection are declared and append to the control variable. 99 111 100 112 .. code-block:: guess … … 122 134 control.activate(); 123 135 124 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. 136 Please save your HTML file again. You should now be able to select a polygon only by 137 clicking on it. The selected polygon should appear in blue color. 125 138 126 139 .. image:: ./images/OL-JP-2.png … … 130 143 131 144 Calling the single geometry services from JavaScript 132 ******************************************************* 133 134 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. 145 **************************************************** 146 147 Now that everything is setup, we can go on and call our OGR ZOO services with JavaScript. 148 Please add the following lines after the ``init()`` function, which will call the single 149 geometry processes. You can notice that we use a specific ``parseMapServerId`` function 150 which let us remove the unecessary white space returned as fid value. 135 151 136 152 .. code-block:: guess … … 175 191 176 192 177 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>``. 193 Then, some specific buttons must be added in the HTML, in order to be able to call 194 the different processes we just declared. You can add them on top of the map by writing 195 the following lines before the ``<div id="map"></div>``. 178 196 179 197 .. code-block:: guess … … 198 216 </div> 199 217 200 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. 218 Save your HTML file again. You should now be able to select a polygon and to launch a Buffer, 219 ConvexHull, Boundary or Centroid on it by clicking one of the button. The result of the 220 process should appear as GeoJSON layer on the map, in orange color. 201 221 202 222 .. image:: ./images/OL-JP-3.png … … 206 226 207 227 Calling the multiples geometries processes from JavaScript 208 ************************************************************** 209 210 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. 228 ********************************************************** 229 230 Using the same technique, you can now write a function dedicated to the multiple geometries 231 processes. Please add the following lines after the ``simpleProcessing()`` function, we will 232 guide you during the exercise in section 5 on how to create such a function. 211 233 212 234 .. code-block:: guess … … 261 283 } 262 284 263 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. 264 265 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 : 285 Note that this time we didn't use the GET method to request the ZOO Kernel but a XML POST. 286 We did that because if you use the GET method you will get error due to the HTTP GET method 287 limitation based on the length of your request. Using JSON string representing the geometry 288 will make your request longer. 289 290 Once you get the functions to call your multiple geometries processes, you' must add some 291 buttons to fire the request call. Here is the HTML code to add to your current ``zoo-ogr.html`` file : 266 292 267 293 .. code-block:: guess … … 283 309 </ul> 284 310 285 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 : 311 Please reload the page. You should then be able to run your multiple geometries services and 312 you should get results displayed in red as shown by the following screenshots : 286 313 287 314 … … 299 326 :height: 140px 300 327 301 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. 328 It seems that something is missing in your Services Provider to get the same results … 329 The multiple geometries Services ! This is what we are going to do together in the next section.
Note: See TracChangeset
for help on using the changeset viewer.