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
})
});
