HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_wfsgetfeature.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「getfeature-wfs.html」の内容をコピーして新規作成したファイルに貼り付けます。
コードの修正とちょっと解説します。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers51 WFS GetFeature</title>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<!-- OpenLayers ライブラリ -->
<script src="./lib/Firebug/firebug.js"></script>
<script src="./lib/OpenLayers.js"></script>
<!-- Proj4js ライブラリ -->
<script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
<script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>
<script type="text/javascript">
var map, layer, select, hover, control;
function init(){
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; // 修正
// 東京都用 map の設定
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
},{
controls: [
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.Navigation()
]
});
// ここまで
// GeoServer WMS リクエスト, MapServer と比較できるように書き方を変えました。
layer = new OpenLayers.Layer.WMS( "Gyoseikukaku WMS/WFS", // 名前を修正
"http://localhost:8080/geoserver/ows", // 自分の GeoServer
{
layers: 'sde:gyoseikukaku', // GeoServer に追加したレイヤ
format: 'image/png'
});
select = new OpenLayers.Layer.Vector("Selection",
{
styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
});
hover = new OpenLayers.Layer.Vector("Hover");
map.addLayers([layer, hover, select]);
control = new OpenLayers.Control.GetFeature({
/*
* OpenLayers.Control.GetFeature ドキュメントページ
* http://dev.openlayers.org/apidocs/files/OpenLayers/Control/GetFeature-js.html
*
* に説明があります。
*/
protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer),
/*
* WFS.js ドキュメントページ
* http://dev.openlayers.org/docs/files/OpenLayers/Protocol/WFS-js.html
*
* に「OpenLayers.Protocol.WFS.fromWMSLayer」の説明があります。
*/
box: true, // 描いた四角形によってフィーチャを選択
hover: true, // マウスを重ねたらフィーチャリクエストを送信
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]);
});
control.events.register("hoverfeature", this, function(e) {
hover.addFeatures([e.feature]);
});
control.events.register("outfeature", this, function(e) {
hover.removeFeatures([e.feature]);
});
map.addControl(control);
control.activate();
// 次の３つのコントロールは、この位置でないと表示できませんでした。
map.addControl(new OpenLayers.Control.LayerSwitcher()); // 追加
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomToMaxExtent(); // 追加
}
</script>
</head>
<body onload="init()">
<h1 id="title">WFS GetFeature Example (GeoServer)</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows how to use the GetFeature control to select features from a
WMS layer. Click or drag a box to select features, use the Shift key to
add features to the selection, use the Ctrl key to toggle a feature's
selected status. Note that this control also has a hover option, which is
enabled in this example. This gives you a visual feedback by loading the
feature underneath the mouse pointer from the WFS, but causes a lot of
GetFeature requests to be issued.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
オレンジが Hover 状態、青が選択状態です。
クラスの説明を訳してみました。
OpenLayers.Control.GetFeature
Gets vector features for locations underneath the mouse cursor.
Can be configured to act on click, hover or dragged boxes.
Uses an OpenLayers.Protocol that supports spatial filters to retrieve features from a server and fires events that notify applications of the selected features.
マウスカーソルの下の位置のベクトルフィーチャを取得します。
クリック、ホーバ（重ね合わせ）、またはドラッグしたボックスに基づいて動作するように設定できます。
サーバからフィーチャを検索し、選択したフィーチャのアプリケーションに通知するイベントを発生するための空間フィルタをサポートする OpenLayers.Protocol を使用します。
OpenLayers. Protocol. WFS. fromWMSLayer
Convenience function to create a WFS protocol from a WMS layer.
This makes the assumption that a WFS requests can be issued at the same URL as WMS requests and that a WFS featureType exists with the same name as the WMS layer.
WMS レイヤから WFS プロトコルを作成する便利な関数。
これは、WFS リクエストは、WMS リクエストと同じ URL で発行され、WFS の featureType は、WMS レイヤと同じ名前で存在することができると仮定します。
This function is designed to auto-configure <url>, <featureType>, <featurePrefix> and <srsName> for WFS <version> 1.1.0.
Note that srsName matching with the WMS layer will not work with WFS 1.0.0..
この関数は、WFS の<version> 1.1.0 で <url>、<featureType>、<featurePrefix>および <srsName> を自動的に設定するように設計されています。
WMS レイヤと一致する srsName は、WFS 1.0.0. では動作しないので注意してください。
0 件のコメント:
コメントを投稿