Changes between Initial Version and Version 1 of ZooWorkshop/FOSS4GJapan/ja/BuildingWPSClientUsingOL


Ignore:
Timestamp:
Oct 27, 2010, 10:18:24 AM (16 years ago)
Author:
hayashi
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • ZooWorkshop/FOSS4GJapan/ja/BuildingWPSClientUsingOL

    v1 v1  
     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
     34var map, layer, select, hover, multi, control;
     35
     36var typename="regions";
     37var main_url="http://localhost/cgi-bin/mapserv?map=/var/www/wfs.map";
     38
     39function 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
     70WFSを通じて表示されているデータにアクセスする前に、先ずはこれから作成するいくつもの相互作用をすることを目的とするに新規ベクトルレイヤーを作成しなければなりません。{{{init()}}} 関数内に次のラインを追加します。 {{{map.addLayers}}} メソッドに新規作成したレイヤーを忘れず追加して下さい：
     71
     72{{{
     73#!js
     74select = new OpenLayers.Layer.Vector("Selection", {
     75  styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
     76});
     77     
     78hover = new OpenLayers.Layer.Vector("Hover");
     79multi = 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
     89map.addLayers([layer, select, hover, multi]);
     90}}}
     91
     92次に、下記ようにポリゴンを選択する新規コントロールを作成することによってtデータにアクセスすることが可能になります。{{{OpenLayers.Protocol.WFS.fromWMSLayer(layer)}}}はジオメトリへのアクセスに使用され、そして選択の状況は表示され制御変数に追加されるということにご注意ください。
     93
     94{{{
     95#!js
     96control = new OpenLayers.Control.GetFeature({
     97        protocol: protocol,
     98        box: false,
     99        hover: false,
     100        multipleKey: "shiftKey",
     101        toggleKey: "ctrlKey"
     102      });
     103control.events.register("featureselected", this, function(e) {
     104                select.addFeatures([e.feature]);
     105            });
     106control.events.register("featureunselected", this, function(e) {
     107                select.removeFeatures([e.feature]);
     108            });
     109map.addControl(control);
     110control.activate();
     111}}}
     112
     113HTMファイルを再度保存して下さい。ポリゴン上でクリックすると選択することができます。選択されたポリゴンは青色で表示されます。
     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
     125function parseMapServerId(){
     126  var sf=arguments[0].split(".");
     127  return sf[0]+"."+sf[1].replace(/ /g,'');
     128}
     129
     130function 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
     199function 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,'&amp;')+'"/>';
     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]

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