= !OpenLayers を使用したWPSクライアントの構築 = [[TOC(heading= )]] [wiki:ZooWorkshop/FOSS4GJapan/ja/CreatingOGRBasedWebServices 前へ] | [wiki:ZooWorkshop/FOSS4GJapan/ja ワークショップ 目次] | [wiki:ZooWorkshop/FOSS4GJapan/ja/Exercice 次へ] 次のステップでは!OpenLayers mapから作成したOGR Servicesに関連付けます。こうすることで、選択したポリゴン上で単一または複数の幾何処理を行い、新規作成したジオメトリを表示することができます。 == WMSのデータセットを表示する簡単なマップの作成 == !OpenLayersはOSGeoLiveのデフォルトのディストリビューションにも含まれているため、便宜上これを使用します。好きなテキストエディタで {{{/var/www/zoo-ogr.html}}} を開き、次のHTMLをペーストしてください： {{{ #!text/html ZOO WPS Client example
}}} 次の!JavaScript コードを{{{}}}内の {{{}}}} セクションに追加します。するとWMSとして日本の領域を表示するデータが設定されます。 {{{ #!js var map, layer, select, hover, multi, control; var typename="regions"; var main_url="http://localhost/cgi-bin/mapserv?map=/var/www/wfs.map"; function init(){ map = new OpenLayers.Map('map', { controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.Navigation() ] }); layer = new OpenLayers.Layer.WMS(typename,main_url, { layers: 'regions', transparent: 'true', format: 'image/png' }, { isBaseLayer: true, visibility: true, buffer: 0, singleTile: true } ); map.addLayers([layer]); map.setCenter(new OpenLayers.LonLat(138,33.5),5); } }}} 終了したらHTMLファイルをzoo-ogr.htmlとしてワークショップディレクトリに保存し、{{{/var/www}}} にコピーします。好きなウェブブラウザでリンク{{{/var/www}}} http://localhost/zoo-ogr.html. を開き、これを使って可視化してください。WMSレイヤーが選択されている、USAを中心とするマップを手に入れることができます。 [[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-1.png,nolink,width=500px,margin=5)]] == WFSのデータレイヤー取得と選択コントロールの追加 == WFSを通じて表示されているデータにアクセスする前に、先ずはこれから作成するいくつもの相互作用をすることを目的とするに新規ベクトルレイヤーを作成しなければなりません。{{{init()}}} 関数内に次のラインを追加します。 {{{map.addLayers}}} メソッドに新規作成したレイヤーを忘れず追加して下さい： {{{ #!js select = new OpenLayers.Layer.Vector("Selection", { styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"]) }); hover = new OpenLayers.Layer.Vector("Hover"); multi = new OpenLayers.Layer.Vector("Multi", { styleMap: new OpenLayers.Style({ fillColor:"red", fillOpacity:0.4, strokeColor:"red", strokeOpacity:1, strokeWidth:2 }) }); map.addLayers([layer, select, hover, multi]); }}} 次に、下記ようにポリゴンを選択する新規コントロールを作成することによってtデータにアクセスすることが可能になります。{{{OpenLayers.Protocol.WFS.fromWMSLayer(layer)}}}はジオメトリへのアクセスに使用され、そして選択の状況は表示され制御変数に追加されるということにご注意ください。 {{{ #!js control = new OpenLayers.Control.GetFeature({ protocol: protocol, box: false, hover: false, multipleKey: "shiftKey", toggleKey: "ctrlKey" }); control.events.register("featureselected", this, function(e) { select.addFeatures([e.feature]); }); control.events.register("featureunselected", this, function(e) { select.removeFeatures([e.feature]); }); map.addControl(control); control.activate(); }}} HTMファイルを再度保存して下さい。ポリゴン上でクリックすると選択することができます。選択されたポリゴンは青色で表示されます。 [[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-2.png,width=500px,nolink,margin: 5)]] == !JavaScript から呼び出される単一ジオメトリサービス == これで全て設定できたので、!JavaScriptでOGR ZOO サービスを呼び出してみましょう。 {{{init()}}} 関数のあとに次の行を追加してください。一つのジオメトリ処理を呼び出します。fid 値として返された不要な空白を削除する特定の {{{parseMapServerId}}} 関数を使うことに気づくでしょう。 {{{ #!c function parseMapServerId(){ var sf=arguments[0].split("."); return sf[0]+"."+sf[1].replace(/ /g,''); } function simpleProcessing(aProcess) { if (select.features.length == 0) return alert("No feature selected!"); if(multi.features.length>=1) multi.removeFeatures(multi.features); var url = '/cgi-bin/zoo_loader.cgi?request=Execute&service=WPS&version=1.0.0&'; if (aProcess == 'Buffer') { var dist = document.getElementById('bufferDist')?document.getElementById('bufferDist').value:'1'; if (isNaN(dist)) return alert("Distance is not a Number!"); url+='Identifier=Buffer&DataInputs=BufferDistance='+dist+'@datatype=interger;InputPolygon=Reference@xlink:href='; } else url += 'Identifier='+aProcess+'&DataInputs=InputPolygon=Reference@xlink:href='; var xlink = control.protocol.url +"&SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0"; xlink += '&typename='+control.protocol.featurePrefix; xlink += ':'+control.protocol.featureType; xlink += '&SRS='+control.protocol.srsName; xlink += '&FeatureID='+parseMapServerId(select.features[0].fid); url += encodeURIComponent(xlink); url += '&RawDataOutput=Result@mimeType=application/json'; var request = new OpenLayers.Request.XMLHttpRequest(); request.open('GET',url,true); request.onreadystatechange = function() { if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) { var GeoJSON = new OpenLayers.Format.GeoJSON(); var features = GeoJSON.read(request.responseText); hover.removeFeatures(hover.features); hover.addFeatures(features); } } request.send(); } }}} 次に、私たちがちょうど示した異なる処理を呼び出すには、いくつかの特定のボタンをHTMLに追加しなければなりません。{{{
}}}の前に次の行を書き込んでマップの上にそれらを追加します。 {{{ #!xml

Single geometry processing

}}} 再びHTMLファイルを保存してください。これでボタンの一つをクリックして、ポリゴンを選択し、Buffer、!ConvexHull、Boundary あるいは Centroidを起動できます。処理の結果はマップ上にGeoJSONレイヤーとしてオレンジ色で表示されます。 [[Image(http://www.zoo-project.org/trac/raw-attachment/wiki/ZooWorkshop/FOSS4GJapan/BuildingWPSClientUsingOL/OL-JP-3.png,width=500px,nolink,margin: 5)]] == !JavaScript から呼び出される複合ジオメトリサービス == 同じテクニックを使って、複数のジオメトリ処理のために作られている関数を書き込むことができます。{{{simpleProcessing()}}} 関数のあとに次の行を追加してください。このような関数を作成する方法はセクション5のエクササイズで説明します。 {{{ #!js function multiProcessing(aProcess) { if (select.features.length == 0 || hover.features.length == 0) return alert("No feature created!"); var url = '/cgi-bin/zoo_loader.cgi'; var xlink = control.protocol.url +"&SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0"; xlink += '&typename='+control.protocol.featurePrefix; xlink += ':'+control.protocol.featureType; xlink += '&SRS='+control.protocol.srsName; xlink += '&FeatureID='+parseMapServerId(select.features[0].fid); var GeoJSON = new OpenLayers.Format.GeoJSON(); try { var params = ''; params += ''+aProcess+''; params += ''; params += ''; params += 'InputEntity1'; params += ''; params += ''; params += ''; params += 'InputEntity2'; params += ''; params += ' '+GeoJSON.write(hover.features[0].geometry)+' '; params += ''; params += ''; params += ''; params += ''; params += ''; params += 'Result'; params += ''; params += ''; params += ''; } catch(e) { alert(e); return false; } var request = new OpenLayers.Request.XMLHttpRequest(); request.open('POST',url,true); request.setRequestHeader('Content-Type','text/xml'); request.onreadystatechange = function() { if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) { var GeoJSON = new OpenLayers.Format.GeoJSON(); var features = GeoJSON.read(request.responseText); multi.removeFeatures(multi.features); multi.addFeatures(features); } } request.send(params); } }}} 今回は、ZOO Kernelを呼び出すのにGETメソッドではなくXML POSTを使用していることに注意してください。GETメソッドを使用すると、リクエストの長さに基づくHTTP GETメソッド制限のためにエラーが表示されます。ジオメトリを表すJSONストリングの使用すると、リクエストは長くなります。 一度複数のジオメトリ処理を呼び出す関数を得ると、リクエストの呼び出しを消すためにいくつかボタンを追加しなければなりません。これは現在の {{{zoo-ogr.html}}} ファイルに追加するためのHTMLコードです: {{{ #!xml

Multiple geometries processing

}}} ページをリロードしてください。すると、複数のジオメトリサービスを実行でき、次のスクリーンショットのように赤色で表示された結果を得ることができます: ||[[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)]]|| ||[[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)]]|| 同じ結果を得るには、Services Providerに何かが足りないように思われます … 複数のジオメトリサービスです! これは次のセクションで行います。 [wiki:ZooWorkshop/FOSS4GJapan/ja/CreatingOGRBasedWebServices 前へ] | [wiki:ZooWorkshop/FOSS4GJapan/ja ワークショップ 目次] | [wiki:ZooWorkshop/FOSS4GJapan/ja/Exercice 次へ]