| 1 | = Building a WPS client using !OpenLayers = |
| 2 | |
| 3 | [[TOC(heading= )]] |
| 4 | [wiki:ZooWorkshop/FOSS4GJapan/ja/CreatingOGRBasedWebServices Prev.] | |
| 5 | [wiki:ZooWorkshop/FOSS4GJapan WorkShop table of content] | [wiki:ZooWorkshop/FOSS4GJapan/ja/Exercice Next] |
| 6 | |
| 7 | 次のステップでは!OpenLayers mapから作成したOGR Servicesに関連付けます。こうすることで、選択したポリゴン上で単一または複数の幾何処理を行い、新規作成したジオメトリを表示することができます。 |
| 8 | == Creating a simple map showing the dataset as WMS == |
| 9 | |
| 10 | !OpenLayersはOSGeoLiveのデフォルトのディストリビューションにも含まれているため、便宜上これを使用します。好きなテキストエディタで {{{/var/www/zoo-ogr.html}}} を開き、次のHTMLをペーストしてください: |
| 11 | |
| 12 | {{{ |
| 13 | #!text/html |
| 14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN"> |
| 15 | <head> |
| 16 | <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> |
| 17 | <title>ZOO WPS Client example</title> |
| 18 | <style> |
| 19 | #map{width:700px;height:600px;} |
| 20 | </style> |
| 21 | <link rel="stylesheet" href="/openlayers/theme/default/style.css" type="text/css" /> |
| 22 | <script type="text/javascript" src="/openlayers/lib/OpenLayers.js"></script> |
| 23 | </head> |
| 24 | <body onload="init()"> |
| 25 | <div id="map"></div> |
| 26 | </body> |
| 27 | </html> |
| 28 | }}} |
| 29 | |
| 30 | 次の!JavaScript コードを{{{<head>}}}内の {{{<script></script>}}}} セクションに追加します。するとWMSとして日本の領域を表示するデータが設定されます。 |
| 31 | |
| 32 | {{{ |
| 33 | #!js |
| 34 | var map, layer, select, hover, multi, control; |
| 35 | |
| 36 | var typename="regions"; |
| 37 | var main_url="http://localhost/cgi-bin/mapserv?map=/var/www/wfs.map"; |
| 38 | |
| 39 | function init(){ |
| 40 | map = new OpenLayers.Map('map', { |
| 41 | controls: [ |
| 42 | new OpenLayers.Control.PanZoom(), |
| 43 | new OpenLayers.Control.Permalink(), |
| 44 | new OpenLayers.Control.Navigation() |
| 45 | ] |
| 46 | }); |
| 47 | layer = new OpenLayers.Layer.WMS(typename,main_url, { |
| 48 | layers: 'regions', |
| 49 | transparent: 'true', |
| 50 | format: 'image/png' |
| 51 | }, |
| 52 | { |
| 53 | isBaseLayer: true, |
| 54 | visibility: true, |
| 55 | buffer: 0, |
| 56 | singleTile: true |
| 57 | } |
| 58 | ); |
| 59 | map.addLayers([layer]); |
| 60 | map.setCenter(new OpenLayers.LonLat(138,33.5),5); |
| 61 | } |
| 62 | }}} |
| 63 | |
| 64 | 終了したらHTMLファイルをzoo-ogr.htmlとしてワークショップディレクトリに保存し、{{{/var/www}}} にコピーします。好きなウェブブラウザでリンク{{{/var/www}}} http://localhost/zoo-ogr.html. を開き、これを使って可視化してください。WMSレイヤーが選択されている、USAを中心とするマップを手に入れることができます。 |
| 65 | |
| 66 | [[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-1.png,nolink,width=500px,margin=5)]] |
| 67 | |
| 68 | == Fetching the data layer as WFS and adding selection controls == |
| 69 | |
| 70 | WFSを通じて表示されているデータにアクセスする前に、先ずはこれから作成するいくつもの相互作用をすることを目的とするに新規ベクトルレイヤーを作成しなければなりません。{{{init()}}} 関数内に次のラインを追加します。 {{{map.addLayers}}} メソッドに新規作成したレイヤーを忘れず追加して下さい: |
| 71 | |
| 72 | {{{ |
| 73 | #!js |
| 74 | select = new OpenLayers.Layer.Vector("Selection", { |
| 75 | styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"]) |
| 76 | }); |
| 77 | |
| 78 | hover = new OpenLayers.Layer.Vector("Hover"); |
| 79 | multi = new OpenLayers.Layer.Vector("Multi", { styleMap: |
| 80 | new OpenLayers.Style({ |
| 81 | fillColor:"red", |
| 82 | fillOpacity:0.4, |
| 83 | strokeColor:"red", |
| 84 | strokeOpacity:1, |
| 85 | strokeWidth:2 |
| 86 | }) |
| 87 | }); |
| 88 | |
| 89 | map.addLayers([layer, select, hover, multi]); |
| 90 | }}} |
| 91 | |
| 92 | 次に、下記ようにポリゴンを選択する新規コントロールを作成することによってtデータにアクセスすることが可能になります。{{{OpenLayers.Protocol.WFS.fromWMSLayer(layer)}}}はジオメトリへのアクセスに使用され、そして選択の状況は表示され制御変数に追加されるということにご注意ください。 |
| 93 | |
| 94 | {{{ |
| 95 | #!js |
| 96 | control = new OpenLayers.Control.GetFeature({ |
| 97 | protocol: protocol, |
| 98 | box: false, |
| 99 | hover: false, |
| 100 | multipleKey: "shiftKey", |
| 101 | toggleKey: "ctrlKey" |
| 102 | }); |
| 103 | control.events.register("featureselected", this, function(e) { |
| 104 | select.addFeatures([e.feature]); |
| 105 | }); |
| 106 | control.events.register("featureunselected", this, function(e) { |
| 107 | select.removeFeatures([e.feature]); |
| 108 | }); |
| 109 | map.addControl(control); |
| 110 | control.activate(); |
| 111 | }}} |
| 112 | |
| 113 | HTMファイルを再度保存して下さい。ポリゴン上でクリックすると選択することができます。選択されたポリゴンは青色で表示されます。 |
| 114 | |
| 115 | [[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-2.png,width=500px,nolink,margin: 5)]] |
| 116 | |
| 117 | |
| 118 | == Calling the single geometry services from !JavaScript == |
| 119 | |
| 120 | これで全て設定できたので、!JavaScriptでOGR ZOO サービスを呼び出してみましょう。 {{{init()}}} 関数のあとに次の行を追加してください。一つのジオメトリ処理を呼び出します。fid 値として返された不要な空白を削除する特定の {{{parseMapServerId}}} 関数を使うことに気づくでしょう。 |
| 121 | |
| 122 | {{{ |
| 123 | #!c |
| 124 | |
| 125 | function parseMapServerId(){ |
| 126 | var sf=arguments[0].split("."); |
| 127 | return sf[0]+"."+sf[1].replace(/ /g,''); |
| 128 | } |
| 129 | |
| 130 | function simpleProcessing(aProcess) { |
| 131 | if (select.features.length == 0) |
| 132 | return alert("No feature selected!"); |
| 133 | if(multi.features.length>=1) |
| 134 | multi.removeFeatures(multi.features); |
| 135 | var url = '/cgi-bin/zoo_loader.cgi?request=Execute&service=WPS&version=1.0.0&'; |
| 136 | if (aProcess == 'Buffer') { |
| 137 | var dist = document.getElementById('bufferDist')?document.getElementById('bufferDist').value:'1'; |
| 138 | if (isNaN(dist)) return alert("Distance is not a Number!"); |
| 139 | url+='Identifier=Buffer&DataInputs=BufferDistance='+dist+'@datatype=interger;InputPolygon=Reference@xlink:href='; |
| 140 | } else |
| 141 | url += 'Identifier='+aProcess+'&DataInputs=InputPolygon=Reference@xlink:href='; |
| 142 | var xlink = control.protocol.url +"&SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0"; |
| 143 | xlink += '&typename='+control.protocol.featurePrefix; |
| 144 | xlink += ':'+control.protocol.featureType; |
| 145 | xlink += '&SRS='+control.protocol.srsName; |
| 146 | xlink += '&FeatureID='+parseMapServerId(select.features[0].fid); |
| 147 | url += encodeURIComponent(xlink); |
| 148 | url += '&RawDataOutput=Result@mimeType=application/json'; |
| 149 | |
| 150 | var request = new OpenLayers.Request.XMLHttpRequest(); |
| 151 | request.open('GET',url,true); |
| 152 | request.onreadystatechange = function() { |
| 153 | if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) { |
| 154 | var GeoJSON = new OpenLayers.Format.GeoJSON(); |
| 155 | var features = GeoJSON.read(request.responseText); |
| 156 | hover.removeFeatures(hover.features); |
| 157 | hover.addFeatures(features); |
| 158 | } |
| 159 | } |
| 160 | request.send(); |
| 161 | } |
| 162 | }}} |
| 163 | |
| 164 | 次に、私たちがちょうど示した異なる処理を呼び出すには、いくつかの特定のボタンをHTMLに追加しなければなりません。{{{<div id="map"></div>}}}の前に次の行を書き込んでマップの上にそれらを追加します。 |
| 165 | |
| 166 | {{{ |
| 167 | #!xml |
| 168 | <div style="float: right;padding-left: 5px;"> |
| 169 | <h3>Single geometry processing</h3> |
| 170 | <ul> |
| 171 | <li> |
| 172 | <input type="button" onclick="simpleProcessing(this.value);" value="Buffer" /> |
| 173 | <input id="bufferDist" value="1" /> |
| 174 | </li> |
| 175 | <li> |
| 176 | <input type="button" onclick="simpleProcessing(this.value);" value="ConvexHull" /> |
| 177 | </li> |
| 178 | <li> |
| 179 | <input type="button" onclick="simpleProcessing(this.value);" value="Boundary" /> |
| 180 | </li> |
| 181 | <li> |
| 182 | <input type="button" onclick="simpleProcessing(this.value);" value="Centroid" /> |
| 183 | </li> |
| 184 | </ul> |
| 185 | </div> |
| 186 | }}} |
| 187 | |
| 188 | 再びHTMLファイルを保存してください。これでボタンの一つをクリックして、ポリゴンを選択し、Buffer、!ConvexHull、Boundary あるいは Centroidを起動できます。処理の結果はマップ上にGeoJSONレイヤーとしてオレンジ色で表示されます。 |
| 189 | |
| 190 | [[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-3.png,width=500px,nolink,margin: 5)]] |
| 191 | |
| 192 | |
| 193 | == Calling the multiples geometries processes from !JavaScript == |
| 194 | |
| 195 | 同じテクニックを使って、複数のジオメトリ処理のために作られている関数を書き込むことができます。{{{simpleProcessing()}}} 関数のあとに次の行を追加してください。このような関数を作成する方法はセクション5のエクササイズで説明します。 |
| 196 | |
| 197 | {{{ |
| 198 | #!js |
| 199 | function multiProcessing(aProcess) { |
| 200 | if (select.features.length == 0 || hover.features.length == 0) |
| 201 | return alert("No feature created!"); |
| 202 | var url = '/cgi-bin/zoo_loader.cgi'; |
| 203 | var xlink = control.protocol.url +"&SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0"; |
| 204 | xlink += '&typename='+control.protocol.featurePrefix; |
| 205 | xlink += ':'+control.protocol.featureType; |
| 206 | xlink += '&SRS='+control.protocol.srsName; |
| 207 | xlink += '&FeatureID='+parseMapServerId(select.features[0].fid); |
| 208 | var GeoJSON = new OpenLayers.Format.GeoJSON(); |
| 209 | try { |
| 210 | 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">'; |
| 211 | params += '<ows:Identifier>'+aProcess+'</ows:Identifier>'; |
| 212 | params += '<wps:DataInputs>'; |
| 213 | params += '<wps:Input>'; |
| 214 | params += '<ows:Identifier>InputEntity1</ows:Identifier>'; |
| 215 | params += '<wps:Reference xlink:href="'+xlink.replace(/&/gi,'&')+'"/>'; |
| 216 | params += '</wps:Input>'; |
| 217 | params += '<wps:Input>'; |
| 218 | params += '<ows:Identifier>InputEntity2</ows:Identifier>'; |
| 219 | params += '<wps:Data>'; |
| 220 | params += '<wps:ComplexData mimeType="application/json"> '+GeoJSON.write(hover.features[0].geometry)+' </wps:ComplexData>'; |
| 221 | params += '</wps:Data>'; |
| 222 | params += '</wps:Input>'; |
| 223 | params += '</wps:DataInputs>'; |
| 224 | params += '<wps:ResponseForm>'; |
| 225 | params += '<wps:RawDataOutput>'; |
| 226 | params += '<ows:Identifier>Result</ows:Identifier>'; |
| 227 | params += '</wps:RawDataOutput>'; |
| 228 | params += '</wps:ResponseForm>'; |
| 229 | params += '</wps:Execute>'; |
| 230 | } catch(e) { |
| 231 | alert(e); |
| 232 | return false; |
| 233 | } |
| 234 | var request = new OpenLayers.Request.XMLHttpRequest(); |
| 235 | request.open('POST',url,true); |
| 236 | request.setRequestHeader('Content-Type','text/xml'); |
| 237 | request.onreadystatechange = function() { |
| 238 | if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) { |
| 239 | var GeoJSON = new OpenLayers.Format.GeoJSON(); |
| 240 | var features = GeoJSON.read(request.responseText); |
| 241 | multi.removeFeatures(multi.features); |
| 242 | multi.addFeatures(features); |
| 243 | } |
| 244 | } |
| 245 | request.send(params); |
| 246 | } |
| 247 | }}} |
| 248 | |
| 249 | 今回は、ZOO Kernelを呼び出すのにGETメソッドではなくXML POSTを使用していることに注意してください。GETメソッドを使用すると、リクエストの長さに基づくHTTP GETメソッド制限のためにエラーが表示されます。ジオメトリを表すJSONストリングの使用すると、リクエストは長くなります。 |
| 250 | |
| 251 | 一度複数のジオメトリ処理を呼び出す関数を得ると、リクエストの呼び出しを消すためにいくつかボタンを追加しなければなりません。これは現在の {{{zoo-ogr.html}}} ファイルに追加するためのHTMLコードです: |
| 252 | |
| 253 | {{{ |
| 254 | #!xml |
| 255 | <h3>Multiple geometries processing</h3> |
| 256 | <ul> |
| 257 | <li> |
| 258 | <input type="button" onclick="multiProcessing(this.name);" value="Union"/> |
| 259 | </li> |
| 260 | <li> |
| 261 | <input type="button" onclick="multiProcessing(this.name);" value="Difference"/> |
| 262 | </li> |
| 263 | <li> |
| 264 | <input type="button" onclick="multiProcessing(this.value);" value="SymDifference"/> |
| 265 | </li> |
| 266 | <li> |
| 267 | <input type="button" onclick="multiProcessing(this.name);" value="Intersection"/> |
| 268 | </li> |
| 269 | </ul> |
| 270 | }}} |
| 271 | |
| 272 | ページをリロードしてください。すると、複数のジオメトリサービスを実行でき、次のスクリーンショットのように赤色で表示された結果を得ることができます: |
| 273 | |
| 274 | ||[[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-4.png,width=250px,align=left,margin: 5px)]]||[[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-5.png,width=250px,align=left,margin: 5px)]]|| |
| 275 | ||[[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-6.png,width=250px,align=left,margin: 5px)]]||[[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-7.png,width=250px,align=left,margin: 5px)]]|| |
| 276 | |
| 277 | 同じ結果を得るには、Services Providerに何かが足りないように思われます … 複数のジオメトリサービスです! これは次のセクションで行います。 |
| 278 | |
| 279 | [wiki:ZooWorkshop/FOSS4GJapan/ja/CreatingOGRBasedWebServices Prev.] | |
| 280 | [wiki:ZooWorkshop/FOSS4GJapan WorkShop table of content] | [wiki:ZooWorkshop/FOSS4GJapan/ja/Exercice Next] |