2 - ol3ex 21b - WFS example 2

OpenLayers 2 では、ドメインの違うサーバから WFS でデータを取得するのに、proxy.cgi ファイルを設定しました。OpenLayers 3 は、別の手順で取得します。
vector-wfs.js で、自分の GeoServer から WFS のデータを次のようにリクエストします。

var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
 'version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&' +
 'outputFormat=text/javascript&format_options=callback:loadFeatures' +
 '&srsname=EPSG:2451&bbox=' + extent.join(',') + ',EPSG:2451';

Geoserver に WFS をリクエストするとき、オプションを 「outputFormat=text/javascript」とすると、JSON形式で取得できます。

vector レイヤは表示されませんでした。
Firebug を起動して再表示すると、次のように表示されました。

データが、XML（GML）で送信されています。
Google で検索すると、「Geographic Information Systems Stack Exchange」の「GeoServer 2.3 how to enable jsonp（http://gis.stackexchange.com/questions/57494/geoserver-2-3-how-to-enable-jsonp）」に、

---
Add to this file: /tomcat/webapps/geoserver/WEB-INF/web.xml

<context-param>
 <param-name>ENABLE_JSONP</param-name>
 <param-value>true</param-value>
</context-param>

---

とあります。自分のサーバでは、

user@debian7-vmw:~$ su
パスワード:
root@debian7-vmw:/home/user# vim /etc/tomcat7/web.xml

---
 <context-param>
  <param-name>ENABLE_JSONP</param-name>
  <param-value>true</param-value>
 </context-param>

</web-app>
:wq

と、ファイルに追加し、tomcat7 を再起動します。

root@debian7-vmw:/home/user# /etc/init.d/tomcat7 restart
[ ok ] Stopping Tomcat servlet engine: tomcat7.
[ ok ] Starting Tomcat servlet engine: tomcat7.

Firebug に何も表示されませんが、地図にも表示されません。
Webブラウザのアドレスバーに次のように入力します。

http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&outputFormat=text/javascript&format_options=callback:loadFeatures&srsname=EPSG:2451

loadFeatures({
 "type":"FeatureCollection",
 "features":[{
  "type":"Feature",
  "id":"akiruno_suiiki.1",
  "geometry":{
   "type":"MultiPolygon",
   "coordinates":[[[[-45875.83465282351,-29805.840956966127],
---
   [-45875.83465282351,-29805.840956966127]]]]},
  "geometry_name":"the_geom",
  "properties":{
   "id":"K12_1",
   "uuid":"fgoid:10-00200-11-6554-5598",
   "presences":2.0120305E7,
   "presencef":2.9991231E7,
   "finished":2.0120305E7,
   "orggilvl":"2500",
   "orgmdid":null,
   "category":"表示",
   "flag":"既存",
   "type":"湖池",
   "name":null}},
---

このままでは変換が必要ですが、「srsname=EPSG:3857」にすると座標が EPSG:3857 になります。

http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&outputFormat=text/javascript&format_options=callback:loadFeatures&srsname=EPSG:3857

loadFeatures({
 "type":"FeatureCollection",
 "features":[{"type":"Feature",
 "id":"akiruno_suiiki.1",
 "geometry":{
  "type":"MultiPolygon",
  "coordinates":[[[[1.5509721608105533E7,4263571.24847886],
---
  [1.5509721608105533E7,4263571.24847886]]]]},
 "geometry_name":"the_geom",
 "properties":{
  "id":"K12_1",
  "uuid":"fgoid:10-00200-11-6554-5598",
  "presences":2.0120305E7,
  "presencef":2.9991231E7,
  "finished":2.0120305E7,
  "orggilvl":"2500",
  "orgmdid":null,
  "category":"表示",
  "flag":"既存",
  "type":"湖池",
  "name":null}},
---

「url」を次のようにすると地図が表示されました。

var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
 'version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&' +
 'outputFormat=text/javascript&format_options=callback:loadFeatures' +
 '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';

「vector-wfs.js（221-ol3ex.js）」は、地図を表示するのに必要な javascript です。
「221-ol3ex.js」

var vectorSource = new ol.source.ServerVector({
/** ol.source.ServerVector
 * A vector source in one of the supported formats, using
 * a custom function to read in the data from a remote 
 * server.
 * サポートされている形式の一つのベクトルソースは、
 * カスタム関数を使用してリモートサーバからデータを読み取ります。
 * （ol3 APL）
 */

 format: new ol.format.GeoJSON(),
 /** ol.format.GeoJSON 
  * Feature format for reading and writing data 
  * in the GeoJSON format.
  * GeoJSON フォーマットのデータを読み書きするための
  * フィーチャフォーマット。（ol3 API）
  */
 loader: function(extent, resolution, projection) {

  /**var url = 'http://demo.opengeo.org/geoserver/wfs?service=WFS&' +
   *  'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
   *  'outputFormat=text/javascript&format_options=callback:loadFeatures' +
   *  '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
   */

  var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
   'version=1.1.0&request=GetFeature&typename=npn:akiruno_suiiki&' +
   'outputFormat=text/javascript&format_options=callback:loadFeatures' +
   '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
   // outputFormat=text/javascript: JSONP 形式で返信

  $.ajax({
  /** $.ajax( [url] [, settings] )
   * 非同期HTTP通信(Ajax)を行い、データの取得・処理を行います。
   * [url] String リクエスト送信先のURL
   * [settings] Object Ajaxリクエストでのオプションを記述したオ
   * ブジェクト（jQuery）
   */

   url: url,

   dataType: 'jsonp'
   /** JSONP (JSON with Padding)
    * さまざまなドメインから、JSON データを持った JavaScript を
    * 動的に挿入することができます。
    */
  });
 },

 strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
 /** ol.loadingstrategy
  * Strategies for loading vector data.
  * ベクタデータをローディングするための方法。
  * createTile 
  * ol.loadingstrategy のメソッド
  * （ol3 API）
  */

 /** ol.tilegrid.XYZ
  * Set the grid pattern for sources accessing XYZ 
  * tiled-image servers.
  * XYZタイル画像サーバにアクセスするソースのグリッドパターンを
  * 設定します。
  * （ol3 API）
  */

  maxZoom: 19
 })),

 projection: 'EPSG:3857',
 attributions: [new ol.Attribution({
 /** ol.Attribution
  * An attribution for a layer source.
  * レイヤソースの属性（ol3 API）
  */

  html: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">' + 
   '国土地理院</a> 基盤地図情報'
 })],
});

var loadFeatures = function(response) {
 vectorSource.addFeatures(vectorSource.readFeatures(response));
 /** addFeatures
  * ol.source.GeoJSON （Static vector source in GeoJSON 
  * format[GeoJSONフォーマットの静的ベクトルソース]）のメソッド
  */

 /** readFeatures
  * ol.format.GeoJSON  （Feature format for reading and 
  * writing data in the GeoJSON format. [GeoJSONフォーマットで
  * データを読み書きするための機能の形式。]）のメソッド
  * Read all features from a GeoJSON source. 
  * GeoJSONソースからすべてのフィーチャをお読み込む。
  * Works with both Feature and FeatureCollection sources.
  * フィーチャおよびフィーチャコレクションソースの両方で動作。
  * （ol3 API）
  */
};

var vector = new ol.layer.Vector({
/** ol.layer.Vector 
 * Vector data that is rendered client-side. Note that any 
 * property set in the options is set as a ol.Object property
 * on the layer object; for example, setting title: 'My 
 * Title' in the options means that title is observable, and 
 * has get/set accessors.
 * クライアント側で描画されたベクタデータ。オプションで設定した任
 * 意のプロパティは、レイヤオブジェクトで ol.Object プロパティ
 * として設定されていることに注意してください。たとえば、オプショ
 * ンで、title：'My Title' を設定することは、タイトルは 
 * observable で、アクセサを取得/設定することを意味します。
 * （ol3 API）
 */
 source: vectorSource,
 style: new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * （ol3 API）
  */
  stroke: new ol.style.Stroke({
  /** ol.style.Stroke 
   * Set stroke style for vector features. 
   * Note that the defaults given are the Canvas defaults, 
   * which will be used if option is not defined. 
   * The get functions return whatever was entered in the 
   * options; they will not return the default.
   * ベクタフィーチャのためのストロークスタイルの設定。
   * デフォルトは、オプションが定義されていない場合に使用され
   * る Canvas のデフォルトを与えられることに注意してください。 
   * GET関数は、オプションで入力されたものはすべて返します。
   * それらはデフォルトを返しません。（ol3 API）
   */
   color: 'rgba(0, 0, 255, 1.0)',
   width: 2
  })
 })
});

var raster = new ol.layer.Tile({
/** ol.layer.Tile 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング（事前描画）を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。（ol3 API）
 */
 source: new ol.source.BingMaps({
 /** ol.source.BingMaps
  * Layer source for Bing Maps tile data.
  * Bing Maps タイルデータのレイヤソース。（ol3 API）
  */
  imagerySet: 'Aerial',
  key: 'Ak-dzM4***' // 省略してます
 })
});

var map = new ol.Map({
 layers: [raster, vector],
 target: document.getElementById('map'),
 view: new ol.View({
  //center: [-8908887.277395891, 5381918.072437216]
  center: [15499413.571008531, 4264076.282950245],
  maxZoom: 19,
  zoom: 12
 })
});