2010年3月12日金曜日

OpenLayers 55 Feature Info in Popup - WMSGetFeatureInfo コントロールでレイヤ情報をポップアップ表示

Feature Info Example(getfeatureinfo-popup.html)を参考に WMS レイヤからの位置情報と属性をポップアップ表示することを試してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_getfeatureinfo_popup.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「getfeatureinfo-popup.html」の内容をコピーして新規作成したファイルに貼り付けます。


コードの修正とちょっと解説します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers55 GetFeatureInfo Popup</title>

<!-- 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>

<!-- スタイルシート -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />


<script>
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正

var map, info;

function load() {
// 東京都用 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)
});
// ここまで


var layer1 = new OpenLayers.Layer.WMS("Gyoseikukaku", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:gyoseikukaku', // 修正
// transparent: true,
format: 'image/png'
},{
isBaseLayer: true
});
var layer2 = new OpenLayers.Layer.WMS("railroad", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:railroad2', // 修正
transparent: true,
format: 'image/png'
},{
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326")
});

var layer3 = new OpenLayers.Layer.WMS("Public Facilities", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:pf_tokyo', // 修正
transparent: true,
format: 'image/png'
},{
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326")
});

water = new OpenLayers.Layer.WMS("River", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:river_tokyo2', // 修正
transparent: true,
format: 'image/png'
},{
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326")
});

var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
});

map.addLayers([layer1, layer2, layer3, water, highlight]);


// Popup スクリプト
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms',
title: 'Identify features by clicking',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true
));
}
}
});
map.addControl(info);
info.activate();

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
// map.zoomToMaxExtent();
map.zoomToExtent(new OpenLayers.Bounds(-210000,1070000,-200000,1075000));
}

</script>
</head>


<body onload="load()">
<h1 id="title">Feature Info in Popup</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates the WMSGetFeatureInfo control for fetching information
about a position from WMS (via GetFeatureInfo request). Results
are displayed in a popup.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>

OpenLayers 54 Feature Info - WMSGetFeatureInfo コントロールでレイヤ情報を表示

Feature Info Example(getfeatureinfo-control.html)を参考に WMS レイヤからの位置情報と属性を表示することを試してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_getfeatureinfo_ctrl.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「getfeatureinfo-control.html」の内容をコピーして新規作成したファイルに貼り付けます。


コードの修正とちょっと解説します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers54 WMS Feature Info (GeoServer)</title>

<!-- 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>


<!-- スタイルシート -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- フィーチャの属性の表示スタイル -->
<style type="text/css">
ul, li {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
#info {
position: absolute;
top: 6em;
left: 550px;
}
#info table td {
border:1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
background:#fff;
}
#info table th{
padding:.2em .2em;
text-transform: uppercase;
font-weight: bold;
background: #eee;
}
tr.odd td {
background:#eee;
}
table.featureInfo caption {
text-align:left;
font-size:100%;
font-weight:bold;
text-transform:uppercase;
padding:.2em .2em;
}

</style>


<script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正

var map, infocontrols, water, highlightlayer;

function load() {
// 東京都用 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)
});
// ここまで


var layer1 = new OpenLayers.Layer.WMS("Gyoseikukaku", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:gyoseikukaku', // 修正
// transparent: true, // 修正
format: 'image/png'
},{
isBaseLayer: true
});
var layer2 = new OpenLayers.Layer.WMS("railroad", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:railroad2', // 修正
transparent: true,
format: 'image/png'
},{
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326") // 追加
});

var layer3 = new OpenLayers.Layer.WMS("Public Facilities", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:pf_tokyo', // 修正
transparent: true,
format: 'image/png'
},{
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326") // 追加
});

water = new OpenLayers.Layer.WMS("River", // 修正
"http://localhost:8080/geoserver/wms", // 修正
{
'layers': 'sde:river_tokyo2', // 修正
transparent: true,
format: 'image/png'
},{
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:4326") // 追加
});


highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
});

infoControls = {
click: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms', // 修正
title: 'Identify features by clicking',
layers: [water],
queryVisible: true
}),
hover: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms', // 修正
title: 'Identify features by clicking',
layers: [water],
hover: true,
// defining a custom format options here
formatOptions: {
typeName: 'water_bodies',
featureNS: 'http://geoserver.sf.net'
},
queryVisible: true
})
}


map.addLayers([layer1, layer2, layer3, water, highlightLayer]);
for (var i in infoControls) {
infoControls[i].events.register("getfeatureinfo", this, showInfo);
map.addControl(infoControls[i]);
}

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加

infoControls.click.activate();
// map.zoomToMaxExtent();
map.zoomToExtent(new OpenLayers.Bounds(-210000,1070000,-200000,1075000)); // 最初の表示範囲を狭くしました。
}


// フィーチャのハイライトまたは属性の表示
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
} else {
$('responseText').innerHTML = evt.text;
}
}
// Click または Hover の選択
function toggleControl(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
// フィーチャ属性表示またはハイライトの選択
function toggleFormat(element) {
for (var key in infoControls) {
var control = infoControls[key];
control.infoFormat = element.value;
}
}
// [water] レイヤまたはすべてのレイヤが対象か選択
function toggleLayers(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == 'Specified') {
control.layers = [water];
} else {
control.layers = null;
}
}
}

</script>
</head>


<body onload="load()">
<h1 id="title">Feature Info Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
</p>
<div id="info">
<h1>Tasmania</h1>
<p>Click on the map to get feature info.</p>
<div id="responseText"></div>
</div>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
<ul id="control">
<li>
<input type="radio" name="controlType" value="click" id="click" onclick="toggleControl(this);" checked="checked" />
<label for="click">Click</label>
</li>
<li>
<input type="radio" name="controlType" value="hover" id="hover" onclick="toggleControl(this);" />
<label for="hover">Hover</label>
</li>
</ul>
<ul id="format">
<li>
<input type="radio" name="formatType" value="text/html" id="html" onclick="toggleFormat(this);" checked="checked" />
<label for="html">Show HTML Description</label>
</li>
<li>
<input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight" onclick="toggleFormat(this);" />
<label for="highlight">Highlight Feature on Map</label>
</li>
</ul>
<ul id="layers">
<li>
<input type="radio" name="layerSelection" value="Specified" id="Specified" onclick="toggleLayers(this);" checked="checked" />
<label for="Specified">Get water body info</label>
</li>
<li>
<input type="radio" name="layerSelection" value="Auto" id="Auto" onclick="toggleLayers(this);" />
<label for="Auto">Get info for visible layers</label>
</li>
</ul>
</body>
</html>


river_tokyo2(water) レイヤと railroad2(layer2) レイヤの色が同じなので、railroad2 レイヤの線の色を GeoServer で変えます。

GeoServer の設定ページの左側の欄の Data -> Layers をクリックします。
Layers 画面の 「railroad2」 をクリックします。
sde:railroad2 画面の 「Publishing」 タブをクリックします。
Default Title の Default Style の選択リストで「simple_roads」を選びます。
「Save」ボタンをクリックします。



2010年3月11日木曜日

OpenLayers 53 WFS Reprojection + Canvas Renderer - WFS レイヤを自動的に再投影

WFS Transaction Example(wfs-reprojection.html)を参考に WFS レイヤを自動的に再投影することを試してみます。
ここの例では、さらに unique value rules を使った styleMap を設定しています。
また、Canvas と SVG 両方をサポートしたブラウザでマップを表示しています。
Canvas は、Mozilla Developer Center (MDC) の

「Canvas チュートリアル」
https://developer.mozilla.org/ja/Canvas_tutorial

に「スクリプト(一般的に JavaScript)を使って図形を描くために使われる新しい HTML 要素です。」とあります。
SVG は、MDC の

「Mozilla SVG Project」
https://developer.mozilla.org/ja/Mozilla_SVG_Project

に「Scalable Vector Graphics のことであり、それが高度な 2 次元グラフィックのための XML 言語である」とあります。

FIPS (Federal Information Processing Standard) state コードは、アメリカ合衆国の50州につけられたアルファベット2文字のコードと2桁の数字コードです。
今回は、行政コードを使用します。


HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_wfsreprojection.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「wfs-reprojection.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers53 WFS Reprojection + Canvas Renderer</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>

<!-- Google Map API キー -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIA...(以下省略)" type="text/javascript"></script>


<script type="text/javascript">

var map, layer, styleMap;
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; // 修正
function init(){
// 東京都用 map の設定
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
// インストールした Proj4js で 東京都の範囲に変更
maxExtent: new OpenLayers.Bounds(15465203, 4227761, 15579121, 4292512)
});


var g = new OpenLayers.Layer.Google("G", {sphericalMercator: true});
map.addLayers([g]);

// prepare to style the data
styleMap = new OpenLayers.StyleMap({
strokeColor: "black",
strokeWidth: 2,
strokeOpacity: 0.5,
fillOpacity: 0.2
});
// create a color table for aac(state FIPS) code
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
var code, gyo_aac = {}; // 'gyo_aac' に修正
for(var i=1; i<=320; ++i) { // Tokyo aac 13101 -> 13421
code = 13100 + i;
gyo_aac[code] = {fillColor: colors[i % colors.length]}; // 'gyo_aac' に修正
}
// add unique value rules with your color lookup
styleMap.addUniqueValueRules("default", "aac", gyo_aac); // 'gyo_aac' に修正


// create a wfs layer with a projection different than the map
// (only if your wfs doens't support your map projection)
var wfs = layer = new OpenLayers.Layer.WFS(
"Gyoseikai (SVG)", // 修正
"http://localhost:8080/geoserver/ows", // 修正
{typename: 'sde:gyoseikai'}, // 修正
{
typename: 'gyoseikai', // 修正
featureNS: 'http://geoserver.sf.net', // 修正
projection: new OpenLayers.Projection("EPSG:4326"),
extractAttributes: true,
ratio: 1.2,
styleMap: styleMap
}
);
map.addLayer(wfs);

var wfs = layer = new OpenLayers.Layer.WFS(
"Gyoseikai (Canvas)", // 修正
"http://localhost:8080/geoserver/ows", // 修正
{typename: 'sde:gyoseikai'}, // 修正
{
typename: 'gyoseikai', // 修正
featureNS: 'http://geoserver.sf.netp', // 修正
projection: new OpenLayers.Projection("EPSG:4326"),
extractAttributes: true,
ratio: 1.2,
styleMap: styleMap,
renderers: ['Canvas', 'SVG', 'VML']
}
);
map.addLayer(wfs);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加

// if you want to use Geographic coords, transform to ESPG:900913
var ddBounds = new OpenLayers.Bounds(138.926, 35.468, 139.949, 35.941); // 修正
map.zoomToExtent(
ddBounds.transform(map.displayProjection, map.getProjectionObject())
);
}
</script>
</head>


<body onload="init()">
<h1 id="title">WFS Reprojection + Canvas Renderer Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows the use of the WFS layer reprojection support
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows automatic WFS reprojection, displaying an 'unprojected'
WFS layer projected on the client side over Google Maps. The key configuration
here is the 'projection' option on the WFS layer.</p>
<p>Also shown is styleMap for the layer with unique value rules. Colors
are assigned based on the STATE_FIPS attribute.</p>
<p>Additionally, this map demonstrates the Canvas/SVG renderers in browsers
which support both. See the two different layers in the LayerSwitcher.</p>
</div>
</body>
</html>

OpenLayers 52b WFS Transaction - WFS レイヤに描画フィーチャを保存

WFS Transaction Example(wfs-protocol-transaction.html)を参考に WS レイヤにフィーチャを保存するためのコントロールの使い方を試してみます。

データベース tokyo に描画用テーブル drawing を作成します。
PostGIS では保存できなかったので、Shapefile で編集可能レイヤを作成します。
gyoseikai テーブルをコピーし千代田区のデータだけのテーブルを作成します。
(gyoseikai テーブルにないデータで抽出します。)

user@debian:~$ psql tokyo
Welcome to psql 8.3.9, the PostgreSQL interactive terminal.

Type: \copyright for distribution terms
\h for help with SQL commands
\? for help with psql commands
\g or terminate with semicolon to execute query
\q to quit

tokyo=> create table drawing as select * from gyoseikai where aac = '13101';
SELECT
tokyo=> \dt
List of relations
Schema | Name | Type | Owner
--------+------------------+-------+-------
public | drawing | table | user
public | geometry_columns | table | user
public | gyoseikai | table | user
public | pf_tokyo | table | user
public | population | table | user
public | railroad2 | table | user
public | railroad3 | table | user
public | river_tokyo2 | table | user
public | river_tokyo3 | table | user
public | spatial_ref_sys | table | user
(10 rows)

tokyo=> select gid, prn, sun, con, cn2, aac from drawing ;
gid | prn | sun | con | cn2 | aac
------+--------+-----+----------+-----+-------
3276 | 東京都 | | 千代田区 | | 13101
(1 row)

tokyo=> \q


drawing レイヤを GeoServer に追加します。
「Layer Configration」
1 ログインした GeoServer ページの左側の欄の「Data」の「Layers」をクリックします。
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。
4 Tokyo store のリソース(レイヤ)のリストが表示されます。
「drawing」の「Publish」をクリックします。
5 選択したレイヤのリソースと編集した情報の設定をします。

「Basic Resource Info」を入力します。
Name: drawing (変更なし)
Title: Drawing (最初の文字を大文字に変更 任意)
Abstract: Tokyo Drawing (任意)

「Keywords」を入力します。
Current Keywords: (追加したキーワードが表示されます)
New Keyword: drawing, tokyo (1つずつ入力して「追加」ボタンをクリック)

「Metadata links」は変更しません。

「Coordinate Reference Systems」を入力します。
Native SRS: 空(変更なし)
Declared SRS: EPSG:4326 (「Find」ボタンをクリックして「4326」を検索して表示された「4326」をクリック)
SRS handling: Force declared (変更しない)

6 「Bounding Boxes」を入力します。
Native Bounding Box: (手動で入力してください。「Compute from data」をクリックした値でも大丈夫みたいです。)
Min X: 136.069
Min Y: 20.425
Max X: 153.987
Max Y: 35.898
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 136.069
Min Y: 20.425
Max X: 153.987
Max Y: 35.898

7 ページ上部の「Publishing」タブをクリックします。
8 「Default Title」の「Default Style」を「polygon」にします。
(他は変更しません。)
9 ページ下部の「Save」ボタンをクリックします。

「Layer」ページの一番最後に「drawing」が追加されます。
drawing レイヤの Shapefile を作成します。

1 GeoServer ページの左側の欄の「Layer Preview」をクリックします。
2 sde:drawing の All Formats のドロップダウンリストで 「Shapefile」を選択します。
3 「drawing.zip を開く」ダイアログで「ファイルを保存する」を選択し「OK」ボタンをクリックします。
4 「ファイル名を入れてください」ダイアログでデスクトップに保存しました。

この Shapefile を GeoServer に設定します。
1 drawing.zip を解凍します。
2 geoserver-2.0.1/data_dir/data/drawing を作成します。
3 解凍したファイルを全部 geoserver-2.0.1/data_dir/data/drawing に入れます。

user@debian:~/Desktop$ ls
drawing.zip featureserver-1.12 sld_data tilecache.csv
eclipse quicktime4linux-2.0.0 streaming tilecache2.csv
user@debian:~/Desktop$ unzip drawing.zip
Archive: drawing.zip
inflating: drawingPolygon.dbf
inflating: drawingPolygon.shx
inflating: drawingPolygon.shp
inflating: drawingPolygon.prj
inflating: drawingPolygon.cst
user@debian:~/Desktop$ ls
drawing.zip drawingPolygon.shp quicktime4linux-2.0.0 tilecache2.csv
drawingPolygon.cst drawingPolygon.shx sld_data
drawingPolygon.dbf eclipse streaming
drawingPolygon.prj featureserver-1.12 tilecache.csv
user@debian:~/Desktop$ mkdir ../geoserver-2.0.1/data_dir/data/drawing
user@debian:~/Desktop$ mv drawing* ../geoserver-2.0.1/data_dir/data/drawing/

4 GeoServer ページの左側の欄の Data -> Stores をクリックします。

5 Layers 画面の「Add new Store」をクリックします。

6 New data source の Vector Data Sources の「Shapefile」をクリックします。

7 New Vector Data Source 画面で次のように設定します。

「Basic Store Info」を入力します。
Workspace: sde
Data Source Name: Tokyo_Shapefile
Description: Tokyo MLIT Shapefile
Enable: チェック(変更なし)

「Connection Parameters」を入力します。
URL: file:data/drawing
create spatial index: チェック(変更なし)
charset: utf-8
memory mapped buffer: チェック(変更なし)

「Save」ボタンをクリックします。
New layer chooser 画面になるので、drawingPolygon の「Publish」をクリックします。

8 sde:drawingPolygon 画面で次のように設定します。

Data タブの
「Basic Rsource Info」を入力します。
Name: drawingPolygon(変更なし)
Title: DrawingPolygon
Abstract: Tokyo MLIT Gyoseikai Shapefile

「Keywords」を入力します。
New Keyword: tokyo, gyoseikai

「Metadata links」は入力しません。

「Coordinate Reference Systems」を入力します。
Native SRS: EPSG;4326(変更なし)
Declared SRS: EPSG;4326(変更なし)
SRS handling: Force declared(変更なし)

「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: 139.73
Min Y: 35.669
Max X: 139.783
Max Y: 35.705
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 139.73
Min Y: 35.669
Max X: 139.783
Max Y: 35.705

ページ上部の「Publishing」タブをクリックします。
「Default Title」の「Default Style」が「polygon」になっていることを確認します。
(他は変更しません。)
ページ下部の「Save」ボタンをクリックします。
「Layer」ページの一番下に「drawingPolygon」が追加されます。


HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_wfs-prot-trans.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「wfs-protocol-transaction.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers52 WFS Transaction</title>

<!-- 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>

<!--
Google API キー
Google Maps API ページ
http://code.google.com/intl/ja/apis/maps/
より取得します。
実際に地図を Web ページに埋め込む作業をすると利用規約の主旨が理解できます。
-->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIA...(以下省略)" type="text/javascript"></script>


<!-- スタイルシート -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- Editing Tool Bar スタイルシート -->
<style>
.customEditingToolbar {
float: right;
right: 0px;
height: 30px;
width: 200px;
}
.customEditingToolbar div {
float: right;
margin: 5px;
width: 24px;
height: 24px;
}
.olControlNavigationItemActive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -103px -23px;
}
.olControlNavigationItemInactive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -103px -0px;
}
.olControlDrawFeaturePolygonItemInactive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -26px 0px;
}
.olControlDrawFeaturePolygonItemActive {
background-image: url("./theme/default/img/editing_tool_bar.png"); /* 修正 */
background-repeat: no-repeat;
background-position: -26px -23px ;
}
.olControlModifyFeatureItemActive {
background-image: url(./theme/default/img/move_feature_on.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlModifyFeatureItemInactive {
background-image: url(./theme/default/img/move_feature_off.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemActive {
background-image: url(./theme/default/img/remove_point_on.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemInactive {
background-image: url(./theme/default/img/remove_point_off.png); /* 修正 */
background-repeat: no-repeat;
background-position: 0px 1px;
}
</style>


<script type="text/javascript">
var map, wfs;

var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
initialize: function(layer, options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.layer = layer;
this.handler = new OpenLayers.Handler.Feature(
this, layer, {click: this.clickFeature}
);
},
clickFeature: function(feature) {
// if feature doesn't have a fid, destroy it
if(feature.fid == undefined) {
this.layer.destroyFeatures([feature]);
} else {
feature.state = OpenLayers.State.DELETE;
this.layer.events.triggerEvent("afterfeaturemodified", {feature: feature});
feature.renderIntent = "select";
this.layer.drawFeature(feature);
}
},
setMap: function(map) {
this.handler.setMap(map);
OpenLayers.Control.prototype.setMap.apply(this, arguments);
},
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
});


function init() {
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; // 修正
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
// インストールした Proj4js で計算した東京都の範囲に変更
maxExtent: new OpenLayers.Bounds(15465203, 4227761, 15579121, 4292512),
controls: [
new OpenLayers.Control.PanZoom()
]
});


/* Google Map(地形図)レイヤ
* Spherical Mercator については
* http://docs.openlayers.org/library/spherical_mercator.html
* を参照。民間企業が提供する地図の再投影法。
*/
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP, sphericalMercator: true}
);

var saveStrategy = new OpenLayers.Strategy.Save();

// 変種可能レイヤに作成・修正したフィーチャのデータを保存
wfs = new OpenLayers.Layer.Vector("Editable Features", {
strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
projection: new OpenLayers.Projection("EPSG:4326"),
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
srsName: "EPSG:4326",
url: "http://localhost:8080/geoserver/wfs", // 自分の GeoServer
featureNS : "http://geoserver.sf.net", // drawing がある Workspace の名前空間
featureType: "drawingPolygon", // 修正
geometryName: "the_geom",
schema: "http://localhost:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=sde:drawingPolygon" // 修正
})
});

map.addLayers([gphy, wfs]);


var panel = new OpenLayers.Control.Panel(
{'displayClass': 'customEditingToolbar'} // CSS の設定
);

// 新しい Navigation Control の作成
var navigate = new OpenLayers.Control.Navigation({
title: "Pan Map",
});

// フィーチャ描画コントロール
var draw = new OpenLayers.Control.DrawFeature(
wfs, OpenLayers.Handler.Polygon,
{
title: "Draw Feature",
displayClass: "olControlDrawFeaturePolygon",
handlerOptions: {multi: true}
}
);

// フィーチャ変形コントロール
var edit = new OpenLayers.Control.ModifyFeature(wfs, {
title: "Modify Feature",
displayClass: "olControlModifyFeature",
});

// フィーチャ削除
var del = new DeleteFeature(wfs, {title: "Delete Feature"});

// フィーチャ保存
var save = new OpenLayers.Control.Button({
title: "Save Changes",
trigger: function() {
if(edit.feature) {
edit.selectControl.unselectAll();
}
saveStrategy.save();
},
displayClass: "olControlSaveFeatures"
});

panel.addControls([navigate, save, del, edit, draw]);
panel.defaultControl = navigate;
map.addControl(panel);
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 Transaction Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows the use of the WFS Transactions (WFS-T).
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>The WFS protocol allows for creation of new features and reading,
updating, or deleting of existing features.</p>
<p>Use the tools to create, modify, and delete (in order from left
to right) features. Use the save tool (picture of a disk) to
save your changes. Use the navigation tool (hand) to stop editing
and use the mouse for map navigation.</p>
</div>
</body>
</html>


「Draw Feature」ボタンをクリックして描画した後、「Save」ボタンをクリックします。

2010年3月10日水曜日

OpenLayers 52a WFS Transaction - WFS レイヤに描画フィーチャを保存

WFS Transaction Example(wfs-t.html)を参考に WSF レイヤにフィーチャを保存するためのコントロールの使い方を試してみます。

データベース tokyo に描画用テーブル drawingpoint を作成します。
PostGIS では保存できなかったので、Shapefile で編集可能レイヤを作成します。

pf_tokyo テーブルをコピーし空のデータのテーブルを作成します。
(pf_tokyo テーブルにないデータで抽出します。)

tokyo=> create table drawingpoint3 as select * from pf_tokyo where gid = '0';
SELECT

the_geom カラムの座標系を MULTIPOINTM にします。(POINT ではデータが追加できないため。)

tokyo=> ALTER TABLE drawingpoint3 ADD constraint enforce_geotype_the_geom CHECK (geometrytype("the_geom") = 'MULTIPOINTM'::text OR "the_geom" IS NULL);
ALTER TABLE
tokyo=> \d drawingpoint3
Table "public.drawingpoint3"
Column | Type | Modifiers
----------+-----------------------+-----------
gid | integer |
aac | character varying(5) |
ren | character varying(1) |
com | character varying(1) |
cls | character varying(1) |
pca | character varying(2) |
pci | character varying(5) |
na8 | character varying(1) |
na0 | character varying(82) |
ads | character varying(63) |
apf | character varying(1) |
ad6 | character varying(1) |
ys3 | character varying(1) |
oy2 | character varying(1) |
rcn | character varying(12) |
the_geom | geometry |
Check constraints:
"enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTIPOINTM'::text OR the_geom IS NULL)

the_geom にデータを入力します。

tokyo=> INSERT INTO drawingpoint3 (the_geom ) values (GeomFromEWKT('MULTIPOINT(139.554 35.682 0)'));
INSERT 0 1
tokyo=> select gid, aac, ren, com, cls, pca, pci, na8, na0, ads, apf, ad6, ys3, oy2, rcn, the_geom from drawingpoint3 ;
gid | aac | ren | com | cls | pca | pci | na8 | na0 | ads | apf | ad6 | ys3 | oy2 | rcn | the_geom
-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+------------------------------------------------------------------------------
| | | | | | | | | | | | | | | 01040000800100000001010000807D3F355EBA7161409EEFA7C64BD741400000000000000000
(1 row)

drawingpoint レイヤを GeoServer に追加します。
「Layer Configration」
1 ログインした GeoServer ページの左側の欄の「Data」の「Layers」をクリックします。
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。
4 Tokyo store のリソース(レイヤ)のリストが表示されます。
「drawingpoint3」の「Publish」をクリックします。
5 選択したレイヤのリソースと編集した情報の設定をします。

「Basic Resource Info」を入力します。
Name: drawingpoint3 (変更なし)
Title: Drawing Point3 (最初の文字を大文字に変更 任意)
Abstract: Tokyo Drawing Point3(任意)

「Keywords」を入力します。
Current Keywords: (追加したキーワードが表示されます)
New Keyword: drawing, point, tokyo (1つずつ入力して「追加」ボタンをクリック)

「Metadata links」は変更しません。

「Coordinate Reference Systems」を入力します。
Native SRS: 空(変更なし)
Declared SRS: EPSG:4326 (「Find」ボタンをクリックして「4326」を検索して表示された「4326」をクリック)
SRS handling: Force declared (変更しない)

6 「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: 139.554
Min Y: 35.682
Max X: 139.554
Max Y: 35.682
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 139.554
Min Y: 35.682
Max X: 139.554
Max Y: 35.682

7 ページ上部の「Publishing」タブをクリックします。
8 「Default Title」の「Default Style」を「point」にします。
(他は変更しません。)
9 ページ下部の「Save」ボタンをクリックします。

「Layer」ページの一番最後に「drawingpoint3」が追加されます。
drawing レイヤの Shapefile を作成します。

1 GeoServer ページの左側の欄の「Layer Preview」をクリックします。
2 sde:drawingpoint3 の All Formats のドロップダウンリストで 「Shapefile」を選択します。
3 「drawingpoint3.zip を開く」ダイアログで「ファイルを保存する」を選択し「OK」ボタンをクリックします。
4 「ファイル名を入れてください」ダイアログでデスクトップに保存しました。

この Shapefile を GeoServer に設定します。
1 drawingpoint3.zip を解凍します。
2 geoserver-2.0.1/data_dir/data/drawing を作成します。
3 解凍したファイルを全部 geoserver-2.0.1/data_dir/data/drawing に入れます。

user@debian:~/Desktop$ ls
drawingpoint3.zip featureserver-1.12 sld_data tilecache.csv
eclipse quicktime4linux-2.0.0 streaming tilecache2.csv
user@debian:~/Desktop$ unzip drawingpoint.zip
Archive: drawingpoint.zip
inflating: drawingpoint3MPoint.prj
inflating: drawingpoint3MPoint.dbf
inflating: drawingpoint3MPoint.cst
inflating: drawingpoint3MPoint.shx
inflating: drawingpoint3MPoint.shp
user@debian:~/Desktop$ ls
drawingpoint3.zip drawingpointPoint.shx streaming
drawingpoint3MPoint.cst eclipse tilecache.csv
drawingpoint3MPoint.dbf featureserver-1.12 tilecache2.csv
drawingpoint3MPoint.prj quicktime4linux-2.0.0
drawingpoint3MPoint.shp sld_data
user@debian:~/Desktop$ mkdir ../geoserver-2.0.1/data_dir/data/drawing
user@debian:~/Desktop$ mv drawingpoint3* ../geoserver-2.0.1/data_dir/data/drawing/

4 GeoServer ページの左側の欄の Data -> Stores をクリックします。
5 Layers 画面の「Add new Store」をクリックします。
6 New data source の Vector Data Sources の「Shapefile」をクリックします。
7 New Vector Data Source 画面で次のように設定します。

「Basic Store Info」を入力します。
Workspace: sde
Data Source Name: Tokyo_Shapefile
Description: Tokyo MLIT Shapefile
Enable: チェック(変更なし)

「Connection Parameters」を入力します。
URL: file:data/drawing
create spatial index: チェック(変更なし)
charset: utf-8
memory mapped buffer: チェック(変更なし)

「Save」ボタンをクリックします。
New layer chooser 画面になるので、drawingpoint3MPoint の「Publish」をクリックします。

8 sde:drawingpoint3MPoint 画面で次のように設定します。

Data タブの
「Basic Rsource Info」を入力します。
Name: drawingpoint3MPoint(変更なし)
Title: Drawingpoint3M Point
Abstract: Drawingpoint3M Point

「Keywords」を入力します。
New Keyword: tokyo, public facilities

「Metadata links」は入力しません。

「Coordinate Reference Systems」を入力します。
Native SRS: EPSG;4326(変更なし)
Declared SRS: EPSG;4326(変更なし)
SRS handling: Force declared(変更なし)

「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: 139.554
Min Y: 35.682
Max X: 139.554
Max Y: 35.682
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 139.554
Min Y: 35.682
Max X: 139.554
Max Y: 35.682

ページ上部の「Publishing」タブをクリックします。
「Default Title」の「Default Style」が「point」になっていることを確認します。
(他は変更しません。)
ページ下部の「Save」ボタンをクリックします。
「Layer」ページの一番下に「drawingpoint3MPoint」が追加されます。


HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_wfs_t.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「wfs-t.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers52a WFS-T</title>

<!-- 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>

<!-- スタイルシート -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- Editing Tool Bar スタイルシート -->

<style>
/* カスタムツールバーを追加 */
.customEditingToolbar {
float: right;
right: 0px;
height: 30px;
width: 200px;
}
.customEditingToolbar div {
float: right;
margin: 5px;
width: 24px;
height: 24px;
}
.olControlNavigationItemActive {
background-image: url("./theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -23px; /* editing_tool_bar.png をずらして表示 */
}
.olControlNavigationItemInactive {
background-image: url("./theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -0px; /* editing_tool_bar.png をずらして表示 */
}
.olControlSaveFeaturesItemActive {
background-image: url("./theme/default/img/save_features_on.png");
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlSaveFeaturesItemInactive {
background-image: url("./theme/default/img/save_features_off.png");
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDrawFeaturePointItemActive {
background-image: url("./theme/default/img/editing_tool_bar.png");
background-position: -77px -23px; /* editing_tool_bar.png をずらして表示 */
background-repeat: no-repeat;
}
.olControlDrawFeaturePointItemInactive {
background-image: url("./theme/default/img/editing_tool_bar.png");
background-position: -77px 0px; /* editing_tool_bar.png をずらして表示 */
background-repeat: no-repeat;
}

</style>


<script type="text/javascript">
var map, wfs;
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正

function init() {
// 東京都用 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),
});

// ここまで
// WMS レイヤ

var wms = new OpenLayers.Layer.WMS( "Gyoseikukaku",
"http://localhost:8080/geoserver/wms", // 自分の GeoServer
{
layers: 'sde:gyoseikukaku'
});

wfs = new OpenLayers.Layer.WFS( "Drawing Point",
"http://localhost:8080/geoserver/wfs", // 自分の GeoServer
{
typename: 'sde:drawingpoint3MPoint'
},{
typename: "drawingpoint3MPoint",
featureNS: "http://geoserver.sf.net", // drawingpointPoint がある Workspace の名前空間
extractAttributes: false, // レイヤ属性の解析
commitReport: function(str) {OpenLayers.Console.log(str);},
// コミットが成功または失敗したときメッセージを送信。エラーを FireBug のようなコンソールに表示
projection: new OpenLayers.Projection("EPSG:4326")
});

map.addLayers([wms, wfs]);


// customEditingToolbar に変更
var panel = new OpenLayers.Control.Panel(
{'displayClass': 'customEditingToolbar'}
);
// ナビゲーションコントロール(地図表示範囲の移動)追加
var navigate = new OpenLayers.Control.Navigation({
title: "Pan Map",
});
// フィーチャ描画コントロール
var draw = new OpenLayers.Control.DrawFeature(
wfs, OpenLayers.Handler.Point,
{
handlerOptions: {freehand: false, multi: true},
displayClass: "olControlDrawFeaturePoint"
}
);

// フィーチャ保存
var save = new OpenLayers.Control.Button({
trigger: OpenLayers.Function.bind(wfs.commit, wfs), // オブジェクトに関数を結びつける
displayClass: "olControlSaveFeatures"
});

panel.addControls([
new OpenLayers.Control.Navigation(),
save, draw
]);


map.addControl(panel);
map.addControl(new OpenLayers.Control.LayerSwitcher()); // 追加
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomToMaxExtent();
// map.zoomToExtent(new OpenLayers.Bounds(-210000,1070000,-200000,1075000));
}

</script>
</head>


<body onload="init()">
<h1 id="title">WFS Transaction Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows the use the WFS layer for transactions.
</p>
<div id="map" class="smallmap"></div>
<p id="docs">
This is an example of using a WFS layer type. Note that it requires a
working GeoServer install, which the OpenLayers project does not maintain;
however, if you're interested, you should be able to point this against
a default GeoServer setup without too much trouble.
</p>
</body>
</html>

OpenLayers 51 WFS GetFeature - WMS レイヤでフィーチャを選択するためのコントロール

WFS GetFeature Example(getfeature-wfs.html)を参考に WMS レイヤでフィーチャを選択するための GetFeature コントロールの使い方を試してみます。

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

// 次の3つのコントロールは、この位置でないと表示できませんでした。

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. では動作しないので注意してください。

2010年3月9日火曜日

OpenLayers 50 Vector Behavior - BBOX strategy, WFS protocol, GML format を使用したマップ

Vector Behavior Example(wfs-protocol.html)を参考に BBOX strategy, WFS protocol, GML format を使用したマップを作成してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_wfsprotocol.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「wfs-protocol.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers50 Vector Behavior</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;

function init() {
OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; // 修正
// map = new OpenLayers.Map('map');
// 東京都用 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)
});

// ここまで
// MapServer WMS リクエスト

var layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'height',
format: 'image/png'
});

var layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
});

// GeoServer WFS リクエスト

var layer3 = new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://localhost:8080/geoserver/wfs", // 自分の GeoServer
featureType: "railroad2", // GeoServer に追加したレイヤ
featureNS: "http://geoserver.sf.net"
// railroad2 がある Workspace の名前空間。ログインした画面の左側の欄の
// Data の Workspaces をクリック。sde をクリックすると表示されます。
}),
projection: new OpenLayers.Projection("EPSG:4326") // 追加
});

map.addLayers([layer1, layer2, layer3]); // 修正
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">Vector Behavior Example</h1>
<p id="shortdesc">
Uses a BBOX strategy, WFS protocol, and GML format.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
The vector layer shown uses the BBOX strategy, the WFS protocol,
and the GML format. The BBOX strategy fetches features within a
bounding box. When the map bounds invalidate the data bounds,
another request is triggered. The WFS protocol gets features
through a WFS request. The GML format is used to serialize
features.
</p>
</div>
</body>
</html>


表示に時間がかかります。
「応答のないスクリプト」ダイアログが表示されたときは、「処理を続行」をクリックしてください。

OpenLayers 49 WFS United States (GeoServer) - GeoServer を使用した東京都マップ

WFS United States (GeoServer) Example(wfs-states.html)を参考に GeoServer を使用した東京都マップを作成してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_wfsstates.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「wfs-states.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers49 WFS: Tokyo (GeoServer)</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;

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.MouseDefaults()
]
});

// ここまで
// MapServer WMS リクエスト

var layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'height',
format: 'image/png'
});

var layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
});

// GeoServer WFS リクエスト

var layer3 = new OpenLayers.Layer.WFS( "Gyoseikai WFS",
"http://localhost:8080/geoserver/ows", // 自分の GeoServer
{
typename: 'sde:gyoseikai' // GeoServer に追加したレイヤ
},{
projection: new OpenLayers.Projection("EPSG:4326") // 追加
});

map.addLayers([layer1, layer2, layer3]); // 修正
// 次の3つのコントロールは、この位置でないと表示できませんでした。
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 United States (GeoServer) Example</h1>
<p id="shortdesc">
Shows the use of the WFS United States (GeoServer)
</p>
<div id="map" class="smallmap"></div>
</body>
</html>

root で proxy.cgi の allowHosts に 'localhost:8080' を追加します。
debian:/home/user# vim /usr/lib/cgi-bin/proxy.cgi

---
allowedHosts = ['www.openlayers.org', 'openlayers.org',
'labs.metacarta.com', 'world.freemap.in',
'prototype.openmnnd.org', 'geo.openplans.org',
'sigma.openplans.org', 'demo.opengeo.org',
'www.openstreetmap.org', 'sample.avencia.com',
'maps.google.co.jp', 'picasaweb.google.com',
'picasaweb.google.co.jp', 'api.flickr.com',
'jugl.tschaub.net',
'192.168.1.6', 'localhost', 'localhost:8080', '127.0.0.1' ]
---

表示に時間がかかります。
「応答のないスクリプト」ダイアログが表示されたときは、「処理を続行」をクリックしてください。

2010年3月8日月曜日

GeoServer を使った OpenLayers の examples 5 - WFS データの GeoServer と MapServer の比較

wget コマンドで確認した WFS の GetCapabilities のデータを比較してみます。

GeoServer
データは見やすいように整形しています。

user@debian:~$ wget -O geoserver_wfs_gc.xml "http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetCapabilities"


<?xml version="1.0" encoding="UTF-8"?>
<wfs:WFS_Capabilities version="1.1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.opengis.net/wfs"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:ows="http://www.opengis.net/ows"
xmlns:gml="http://www.opengis.net/gml"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xsi:schemaLocation="http://www.opengis.net/wfs http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd"
xmlns:cite="http://www.opengeospatial.net/cite"
xmlns:it.geosolutions="http://www.geo-solutions.it"
xmlns:tiger="http://www.census.gov"
xmlns:sde="http://geoserver.sf.net"
xmlns:topp="http://www.openplans.org/topp"
xmlns:sf="http://www.openplans.org/spearfish"
xmlns:nurc="http://www.nurc.nato.int"
updateSequence="57">
<ows:ServiceIdentification>
<ows:Title>GeoServer Web Feature Service</ows:Title>
<ows:Abstract>
This is the reference implementation of WFS 1.0.0 and WFS 1.1.0, supports all WFS operations including Transaction.
</ows:Abstract>
<ows:Keywords>
<ows:Keyword>WFS</ows:Keyword>
<ows:Keyword>WMS</ows:Keyword>
<ows:Keyword>GEOSERVER</ows:Keyword>
</ows:Keywords>
<ows:ServiceType>WFS</ows:ServiceType>
<ows:ServiceTypeVersion>1.1.0</ows:ServiceTypeVersion>
---
<FeatureTypeList>
<Operations>
<Operation>Query</Operation>
<Operation>Insert</Operation>
<Operation>Update</Operation>
<Operation>Delete</Operation>
<Operation>Lock</Operation>
</Operations>
<FeatureType xmlns:sde="http://geoserver.sf.net">
<Name>sde:gyoseikai</Name>
<Title>Gyoseikai</Title>
<Abstract>Land Numerical Info. Tokyo Gyoseikai</Abstract>
<ows:Keywords>
<ows:Keyword>gyoseikai</ows:Keyword>
<ows:Keyword>tokyo</ows:Keyword>
</ows:Keywords>
<DefaultSRS>urn:x-ogc:def:crs:EPSG:4326</DefaultSRS>
<ows:WGS84BoundingBox>
<ows:LowerCorner>136.069 20.425</ows:LowerCorner>
<ows:UpperCorner>153.987 35.898</ows:UpperCorner>
</ows:WGS84BoundingBox>
</FeatureType>
---

MapServer

user@debian:~$ wget -O mapserver_wfs_gc.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&service=WFS&request=GetCapabilities&version=1.0.0"


<?xml version='1.0' encoding="ISO-8859-1" ?>
<WFS_Capabilities
version="1.0.0"
updateSequence="0"
xmlns="http://www.opengis.net/wfs"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-capabilities.xsd">
---
<Service>
<Name>MapServer WFS</Name>
<!-- WARNING: Mandatory metadata '..._title' was missing in this context. -->
<Title>tokyo_pf_pgis_map</Title>
<OnlineResource>http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&</OnlineResource>
</Service>
---
<FeatureTypeList>
<Operations>
<Query/>
</Operations>
<FeatureType>
<Name>gyoseikai</Name>
<Title>Gyoseikai Tokyo mlit Map WMS Layer</Title>
<SRS>EPSG:4326</SRS>
<LatLongBoundingBox minx="-2.5e+07" miny="-2.5e+07" maxx="2.5e+07" maxy="2.5e+07" />
</FeatureType>
---

どちらもレイヤの Name、Title、SRS、BoundingBox のデータがあります。
gyoseikai レイヤの WFS データソースを取得します。
データを1つだけにしています。
Geoserver

http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeName=sde:gyoseikai&maxFeatures=1


<wfs:FeatureCollection
numberOfFeatures="1"
timeStamp="2010-02-13T14:45:32.554+09:00"
xsi:schemaLocation="http://geoserver.sf.net
http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=DescribeFeatureType&typeName=sde%3Agyoseikai
http://www.opengis.net/wfs
http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:tiger="http://www.census.gov"
xmlns:sde="http://geoserver.sf.net"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:topp="http://www.openplans.org/topp"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:sf="http://www.openplans.org/spearfish"
xmlns:ows="http://www.opengis.net/ows"
xmlns:gml="http://www.opengis.net/gml"
xmlns:xlink="http://www.w3.org/1999 xlink">
<gml:featureMembers>
<sde:gyoseikai gml:id="gyoseikai.1">
<sde:prn>東京都</sde:prn>
<sde:con>西多摩郡</sde:con>
<sde:cn2>奥多摩町</sde:cn2>
<sde:aac>13308</sde:aac>
<sde:the_geom>
<gml:MultiSurface srsName="urn:x-ogc:def:crs:EPSG:4326">
<gml:surfaceMember>
<gml:Polygon>
<gml:exterior>
<gml:LinearRing>
<gml:posList>35.850868 139.163527 ...
</gml:posList>
</gml:LinearRing>
</gml:exterior>
</gml:Polygon>
</gml:surfaceMember>
</gml:MultiSurface>
</sde:the_geom>
</sde:gyoseikai>
</gml:featureMembers>
</wfs:FeatureCollection>

MapServer

http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&service=wfs&version=1.0.0&request=GetFeature&typeName=gyoseikai&maxFeatures=1


<?xml version='1.0' encoding="ISO-8859-1" ?>
<wfs:FeatureCollection
xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:gml="http://www.opengis.net/gml"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd
http://mapserver.gis.umn.edu/mapserver http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=gyoseikai&OUTPUTFORMAT=XMLSCHEMA">
<gml:boundedBy>
<gml:Box srsName="EPSG4326">
<gml:coordinates>138.942865,35.501252 139.918904,35.898424</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<!-- WARNING: FeatureId item 'ID' not found in typename 'gyoseikai'. -->
<gml:featureMember>
<ms:gyoseikai>
<gml:boundedBy>
<gml:Box srsName="EPSG4326">
<gml:coordinates>138.942865,35.738576 139.178427,35.898424</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<ms:msGeometry>
<gml:Polygon srsName="EPSG4326">
<gml:outerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>139.163527,35.850868 ...
</gml:coordinates>
</gml:LinearRing>
</gml:outerBoundaryIs>
</gml:Polygon>
</ms:msGeometry>
<ms:gid>1</ms:gid>
<ms:prn>東京都</ms:prn>
<ms:sun></ms:sun>
<ms:con>西多摩郡</ms:con>
<ms:cn2>奥多摩町</ms:cn2>
<ms:aac>13308</ms:aac>
</ms:gyoseikai>
</gml:featureMember>
</wfs:FeatureCollection>

2つのデータには、名前空間に違いがあります。
行政区画名などの属性の名前空間は、GeoServer では Workspace 名に、MapServer では mapserver になっています。
また、GML の要素名にも違いがあります。

GeoServer を使った OpenLayers の examples 4 - WFS の準備


WFS reference ページ
http://docs.geoserver.org/2.0.x/en/user/services/wfs/reference.html

の「GetCapabilities」を参考に、WFS server が提供するサービスを確認します。


次のようにコマンドで出力するとすべてが1行で書かれていて少し見にくいです。

user@debian:~$ wget -O geoserver_wfs_gc.xml "http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetCapabilities"

ブラウザを使うと見やすいです。
ブラウザのアドレス欄に次のように入力します。

http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetCapabilities

デモデータなど、追加されたレイヤのデータ情報がすべて出力されています。
MapServer では、Map を基本としてデータが処理されますが、GeoServer は、Map と関係なく、レイヤのデータが個々に処理されているようです。

<wfs:WFS_Capabilities version="1.1.0" xsi:schemaLocation="http://www.opengis.net/wfs http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd" updateSequence="57">
<ows:ServiceIdentification>
<ows:Title>GeoServer Web Feature Service</ows:Title>
<ows:Abstract>
This is the reference implementation of WFS 1.0.0 and WFS 1.1.0, supports all WFS operations including Transaction.
</ows:Abstract>
---
<FeatureTypeList>
<Operations>
<Operation>Query</Operation>
<Operation>Insert</Operation>
<Operation>Update</Operation>
<Operation>Delete</Operation>
<Operation>Lock</Operation>
</Operations>
<FeatureType>
<Name>sde:gyoseikai</Name>
<Title>Gyoseikai</Title>
<Abstract>Base Map Info. Tokyo Gyoseikai</Abstract>
<ows:Keywords>
<ows:Keyword>gyoseikai</ows:Keyword>
<ows:Keyword>tokyo</ows:Keyword>
</ows:Keywords>
<DefaultSRS>urn:x-ogc:def:crs:EPSG:2456</DefaultSRS>
<ows:WGS84BoundingBox>
<ows:LowerCorner>142.001 26.0</ows:LowerCorner>
<ows:UpperCorner>142.002 26.0</ows:UpperCorner>
</ows:WGS84BoundingBox>
</FeatureType>
<FeatureType>
<Name>tiger:poly_landmarks</Name>
---

「gyoseikai」レイヤと同様に、データベース tokyo の他のレイヤを追加します。

1 左側の欄の「Data」の「Layers」をクリックします。
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。

4 Tokyo store のリソース(レイヤ)のリストが表示されます。
「pf_tokyo」の設定値

「Basic Resource Info」を入力します。
Name: pf_tokyo (変更なし)
Title: PF_tokyo (最初の文字を大文字に変更 任意)
Abstract: Land Numerical Info. Tokyo Public Facilities (任意)

「Keywords」を入力します。
Current Keywords: (追加したキーワードが表示されます)
New Keyword: public facilities, tokyo (1つずつ入力して「追加」ボタンをクリック)

「Metadata links」は変更しません。

「Coordinate Reference Systems」を入力します。
Native SRS: 空(変更なし)
Declared SRS: EPSG:4326 (「Find」ボタンをクリックして「4326」を検索して表示された「4326」をクリック)
SRS handling: Force declared (変更しない)

6 「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: 139.016
Min Y: 26.64
Max X: 142.204
Max Y: 35.842
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 139.016
Min Y: 26.64
Max X: 142.204
Max Y: 35.842

7 ページ上部の「Publishing」タブをクリックします。
8 「Default Title」の「Default Style」が「point」になっていることを確認します。
(他は変更しません。)
9 ページ下部の「Save」ボタンをクリックします。


「railroad2」の設定値
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。

4 Tokyo store のリソース(レイヤ)のリストが表示されます。

「Basic Resource Info」を入力します。
Name: railroad2 (変更なし)
Title: Railroad2 (最初の文字を大文字に変更 任意)
Abstract: Land Numerical Info. Railroad2 (任意)

「Keywords」を入力します。
Current Keywords: (追加したキーワードが表示されます)
New Keyword: railroad (1つずつ入力して「追加」ボタンをクリック)

「Metadata links」は変更しません。

「Coordinate Reference Systems」を入力します。
Native SRS: 空(変更なし)
Declared SRS: EPSG:4326 (「Find」ボタンをクリックして「4326」を検索して表示された「4326」をクリック)
SRS handling: Force declared (変更しない)

6 「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: 127.652
Min Y: 26.193
Max X: 145.598
Max Y: 45.417
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 127.652
Min Y: 26.193
Max X: 145.598
Max Y: 45.417

7 ページ上部の「Publishing」タブをクリックします。
8 「Default Title」の「Default Style」が「line」になっていることを確認します。
(他は変更しません。)
9 ページ下部の「Save」ボタンをクリックします。


「railroad3」の設定値
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。

4 Tokyo store のリソース(レイヤ)のリストが表示されます。

「Basic Resource Info」を入力します。
Name: railroad3 (変更なし)
Title: Railroad3 (最初の文字を大文字に変更 任意)
Abstract: Land Numerical Info. Railroad3 (任意)

以下、「railroad2」と同じ設定です。


「river_tokyo」の設定値
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。

4 Tokyo store のリソース(レイヤ)のリストが表示されます。

「Basic Resource Info」を入力します。
Name: river_tokyo (変更なし)
Title: River_tokyo (最初の文字を大文字に変更 任意)
Abstract: Land Numerical Info. Tokyo River (任意)

「Keywords」を入力します。
Current Keywords: (追加したキーワードが表示されます)
New Keyword: river tokyo (1つずつ入力して「追加」ボタンをクリック)

「Metadata links」は変更しません。

「Coordinate Reference Systems」を入力します。
Native SRS: 空(変更なし)
Declared SRS: EPSG:4326 (「Find」ボタンをクリックして「4326」を検索して表示された「4326」をクリック)
SRS handling: Force declared (変更しない)

6 「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: 138.953
Min Y: 26.639
Max X: 142.214
Max Y: 35.894
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 138.953
Min Y: 26.639
Max X: 142.214
Max Y: 35.894

7 ページ上部の「Publishing」タブをクリックします。
8 「Default Title」の「Default Style」が「point」になっていることを確認します。
(他は変更しません。)
9 ページ下部の「Save」ボタンをクリックします。


「river_tokyo2」の設定値
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。

4 Tokyo store のリソース(レイヤ)のリストが表示されます。

「Basic Resource Info」を入力します。
Name: river_tokyo2 (変更なし)
Title: River_tokyo2 (最初の文字を大文字に変更 任意)
Abstract: Land Numerical Info. Tokyo River2 (任意)

以下、「river_tokyo」と同じ設定です。
「Publishing」タブの「Default Title」の「Default Style」が「line」になっていることを確認します。


「river_tokyo3」の設定値
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo」を選択します。

4 Tokyo store のリソース(レイヤ)のリストが表示されます。

「Basic Resource Info」を入力します。
Name: river_tokyo3 (変更なし)
Title: River_tokyo3 (最初の文字を大文字に変更 任意)
Abstract: Land Numerical Info. Tokyo River3 (任意)

以下、「river_tokyo」と同じ設定です。
「Publishing」タブの「Default Title」の「Default Style」が「point」になっていることを確認します。




「Preview the Layer」で確認します。
1 左側の欄の「Layer Preview」をクリックし、「sde」を検索します。
2 それぞれのレイヤの Common Formats 列の「OpenLayers」をクリックします。
3 成功すれば、OpenLayers Map がポリゴンで表示されます。


gyoseikai

railroad2

railroad3

river_tokyo

river_tokyo2

river_tokyo3

2010年3月5日金曜日

GeoServer を使った OpenLayers の examples 3b - PostGIS Table の追加2 基盤地図情報

「Create a new data store」
最初のステップは、PostGIS データベース "tokyo_bmi" の data store を作成します。


2 左側の欄の「Data」の「Stores」をクリックします。

2a 「Add new Store」をクリックします。

3 「PostGIS」をクリックします。

4 Workspace の初期設定は変えずに、Basic Store Info の Name と Description を入力します。

Workspace: sde (変更なし)
Data Source Name: Tokyo_BMI
Description: Base Map Info. Tokyo (説明、任意です)
Enabled: チェックする(変更なし)

5 PostGIS データベースの Connection Parameters を指定します。

dbtype: postgis (変更なし)
host: localhost (変更なし)
port: 5432 (変更なし)
database: tokyo_bmi
schema: public (変更なし)
user: user (gyoseikai テーブルに接続できるユーザ)
password: ●●●●●●● (user がテーブルに接続するときのパスワード)
Namespace: http://geoserver.sf.net(固定)
max connections: 10 (変更なし、任意です)
min connections: 1 (変更なし、任意です)
fetch size: 1000 (変更なし、任意です)
Connection timeout: 20 (変更なし、任意です)
validate connection: チェックする
Primary key metadata table: (空、変更なし、任意です)
Loose bbox: チェックする(変更なし)
preparedStatements: チェッしない(変更なし)
Max open prepared statements: 50 (変更なし、任意です)

6 「Save」ボタンをクリックします。
追加されたレイヤ一覧が表示されます。

「Layer Configration」
0 「Create a new data store」から続けて操作しても OK です。
1 左側の欄の「Data」の「Layers」をクリックします。
2 「Add a new resource」をクリックします。
3 「New Layer chooser」の「Add a layer from」ドロップダウンから「sde:Tokyo_BMI」を選択します。
4 Tokyo store のリソース(レイヤ)のリストが表示されます。
「gyoseikukau」の「Publish」をクリックします。

5 選択したレイヤのリソースと編集した情報の設定をします。

「Basic Resource Info」を入力します。
Name: gyoseikukaku (変更なし)
Title: Gyoseikukau (最初の文字を大文字に変更 任意)
Abstract: Base Map Info. Tokyo Gyoseikukau (任意)

「Keywords」を入力します。
Current Keywords: (追加したキーワードが表示されます)
New Keyword: gyoseikukaku, tokyo (1つずつ入力して「追加」ボタンをクリック)

「Metadata links」は変更しません。

「Coordinate Reference Systems」を入力します。
Native SRS: 空(変更なし)
Declared SRS: EPSG:2456 (「Find」ボタンをクリックして「2456」を検索して表示された「2456」をクリック)
SRS handling: Force declared (変更しない)

6 「Bounding Boxes」を入力します。
Native Bounding Box: (「Compute from data」をクリック -以下の値が入力されました)
Min X: -619,709.125
Min Y: -606,129.5
Max X: 1,222,781.875
Max Y: 1,101,433
Lat/Lon Bounding Box: (「Compute from native bounds」をクリック -以下の値が入力されました)
Min X: 135.154
Min Y: 20.137
Max X: 155.386
Max Y: 35.935

7 ページ上部の「Publishing」タブをクリックします。
8 「Default Title」の「Default Style」が「polygon」になっていることを確認します。
(他は変更しません。)
9 ページ下部の「Save」ボタンをクリックします。

「Layer」ページの一番下に「gyoseikukaku」が追加されます。


「Preview the Layer」
1 左側の欄の「Layer Preview」をクリックし、「gyoseikukaku」を検索します。
2 Common Formats 列の「OpenLayers」をクリックします。
3 成功すれば、OpenLayers Map がポリゴンで表示されます。
範囲が諸島部まで入っていました。