2014年10月22日水曜日

2 - ol3ex 21a - WFS example 1

「WFS example(vector-wfs.html)」を参考に地図を表示してみます。

OGC(http://www.opengeospatial.org/) の 「OpenGIS Web Map Tile Service Implementation Standard(http://www.opengeospatial.org/standards/wmts)」には、次ように書かれています。
*****
The OGC Web Map Service allows a client to overlay map images for display served from multiple Web Map Services on the Internet.
OGC の ウェッブマップサービス(WMS)は、クライアントにインターネット上で複数のウェッブマップサービス(WMS)から提供される、表示するためのマップ画像をオーバーレイすることを可能にします。

In a similar fashion, the OGC Web Feature Service allows a client to retrieve and update geospatial data encoded in Geography Markup Language (GML) from multiple Web Feature Services.
同様に、OGC のウェッブフィーチャサービス(WFS)は、クライアントに、複数のウェッブフィーチャサービス(WFS)からジオグラフィマークアップラングエッジ(GML)でエンコードされた地理空間データを取得し、更新することを可能にします。

The requirements for a Web Feature Service are:
ウェブフィーチャサービスのための要件は次のとおりです。
1. The interfaces must be defined in XML.
インターフェイスは、XMLで定義する必要があります。
2. GML must be used to express features within the interface.
GMLは、インタフェース内の地物を表現するために使用されなければなりません。
3. At a minimum a WFS must be able to present features using GML.
最低限、WFS が GML を使用しての地物を提示することができなければなりません。
4. The predicate or filter language will be defined in XML and be derived from CQL as defined in the OpenGIS Catalogue Interface Implementation Specification.
OpenGIS Catalogue Interface Implementation Specification で定められた通り、述語型言語またはフィルタ言語は、XMLで定められ、CQLに由来します。
5. The datastore used to store geographic features should be opaque to client applications and their only view of the data should be through the WFS interface.
地理的特徴物を格納するために使用されるデータストアは、クライアント·アプリケーションに対して不透明であるべきであり、データの唯一のビューは、WFSインタフェースを介さなければなりません。
6.The use of a subset of XPath expressions for referencing properties.
プロパティを参照するためのXPath式のサブセットを使用します。
*****

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.0.0」->「examples」->「vector-wfs.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「vector-wfs.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「221-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「vector-wfs.html」の内容をコピーして「221-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「221-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「vector-wfs.js」の内容をコピーして貼り付け、修正します。「vector-wfs-require.js」も「221-ol3ex-require.js」に貼り付けます。


「221-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.0.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>WFS example</title>
 </head>
 <body>
  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
<!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.0.0/examples/"><img src="v3.0.0/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">WFS example</h4>
     <p id="shortdesc">Example of using WFS with a BBOX strategy.</p>
     <div id="docs">
<!--
      <p>See the <a href="vector-wfs.js" target="_blank">vector-wfs.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="221-ol3ex.js" target="_blank">221-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">vector, WFS, bbox, loading, server</div>
    </div>
   </div>
  </div>
<!--
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
  -->
  <script src="v3.0.0/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=vector-wfs" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=221-ol3ex" type="text/javascript"></script>

 </body>
</html>

0 件のコメント: