2009年12月31日木曜日

OpenLayers 43 Click Handler

OpenLayers Click Handler Example(click-handler.html)を参考に Click Handler を試してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名(任意:openlayers_clickhandler.html)」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
click-handler.html をすべて選択し、コピーしたら openlayers_clickhandler.html に貼り付けます。

コードを次のようにします。ちょっと修正と解説。

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

<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<!-- map と表のスタイル -->
<style type="text/css">
#map {
width: 340px;
height: 170px;
border: 1px solid gray;
}
#west {
width: 350px;
}
#east {
position: absolute;
left: 370px;
top: 3em;
}

table td {
text-align: center;
margin: 0;
border: 1px solid gray;
}
textarea.output {
text-align: left;
font-size: 0.9em;
width: 250px;
height: 65px;
overflow: auto;
}
</style>


<!-- 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">
/* Click Handler 設定:
* OpenLayers.Control.Click は 初期設定とOpenLayers.Handler.Click の
* 実行部分で構成されているクラスオブジェクトに使用しているようです。
*/
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: { // 初期設定値
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
// 初期設定
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick, // クリックしたとき
'dblclick': this.onDblclick // ダブルクリックしたとき
}, this.handlerOptions
);
},

onClick: function(evt) {
var output = document.getElementById(this.key + "Output");
// toggle の key('single'など)+ Output = singleOutput
var msg = "click " + evt.xy;
// "click " + evt.xy(XY 座標)= click x=***,y=***
output.value = output.value + msg + "\r\n";
// output.value + msg + "\r\n" = singleOutput click x=***,y=***\r\n
},

onDblclick: function(evt) {
var output = document.getElementById(this.key + "Output");
var msg = "dblclick " + evt.xy;
output.value = output.value + msg + "\n";
}

});


var map, controls;

function init(){
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);
// ここまで
// 東京都のレイヤ
layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
});
layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
});
map.addLayers([layer1, layer2]);

// ここまで

controls = {
"single": new OpenLayers.Control.Click({
// メソッドが "single" のとき、オブジェクトとして作成された
// OpenLayers.Control.Click を初期定義
handlerOptions: {
"single": true
}
}),
"double": new OpenLayers.Control.Click({
handlerOptions: {
"single": false,
"double": true
}
}),
"both": new OpenLayers.Control.Click({
handlerOptions: {
"single": true,
"double": true
}
}),
"drag": new OpenLayers.Control.Click({
handlerOptions: {
"single": true,
"pixelTolerance": null // ポインタが 0 ピクセル以上移動後(?)
}
}),
"stopsingle": new OpenLayers.Control.Click({
handlerOptions: {
"single": true,
"stopSingle": true // これを on にする前に on にした "single" ハンドラは無効
}
}),
"stopdouble": new OpenLayers.Control.Click({
handlerOptions: {
"single": false,
"double": true,
"stopDouble": true // これを on にする前に on にした "double" ハンドラは無効
}
})
};


var props = document.getElementById("props"); // ?
// 例えば、key("single") をコントロールに追加
var control;
for(var key in controls) {
control = controls[key];
// only to route output here
control.key = key;
map.addControl(control);
}

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

map.zoomToMaxExtent();
} // End of function init()


// ボタンの状態を判断して on/off の切り替えをし、singleStatus の ボタン
// (スイッチ)の表示を切り替えして、テキストエリア内を空にする。
function toggle(key) {
var control = controls[key];
if(control.active) {
control.deactivate();
} else {
control.activate();
}
var status = document.getElementById(key + "Status");
status.innerHTML = control.active ? "on" : "off";
var output = document.getElementById(key + "Output");
output.value = "";
}
</script>
</head>


<body onload="init()">
<h1 id="title">Click Handler Example</h1>
<div id="west">
<div id="tags"></div>
<p id="shortdesc">
This example shows the use of the click handler.
</p>
<div id="map" class="smallmap"></div>
<p>
The click handler can be used to gain more flexibility over handling
click events. The handler can be constructed with options to handle
only single click events, to handle single and double-click events,
to ignore clicks that include a drag, and to stop propagation of
single and/or double-click events. A single click is a click that
is not followed by another click for more than 300ms. This delay
is configured with the delay property.
</p>
<p>
The options to stop single and double clicks have to do with
stopping event propagation on the map events listener queue
(not stopping events from cascading to other elements). The
ability to stop an event from propagating has to do with the
order in which listeners are registered. With stopSingle or
stopDouble true, a click handler will stop propagation to all
listeners that were registered (or all handlers that were
activated) before the click handler was activated. So, for
example, activating a click handler with stopDouble true after
the navigation control is active will stop double-clicks from
zooming in.
</p>
</div>


<div id="east">
<table>
<caption>Controls with click handlers (toggle on/off to clear output)</caption>
<tbody>
<tr>
<td>single only</td>
<td><button id="singleStatus" onclick="toggle('single')">off</button></td>
<td><textarea class="output" id="singleOutput"></textarea></td>
</tr>
<tr>
<td>double only</td>
<td><button id="doubleStatus" onclick="toggle('double')">off</button></td>
<td><textarea class="output" id="doubleOutput"></textarea></td>
</tr>
<tr>
<td>both</td>
<td><button id="bothStatus" onclick="toggle('both')">off</button></td>
<td><textarea class="output" id="bothOutput"></textarea></td>
</tr>
<tr>
<td>single with drag</td>
<td><button id="dragStatus" onclick="toggle('drag')">off</button></td>
<td><textarea class="output" id="dragOutput"></textarea></td>
</tr>
<tr>
<td>single with stop</td>
<td><button id="stopsingleStatus" onclick="toggle('stopsingle')">off</button></td>
<td><textarea class="output" id="stopsingleOutput"></textarea></td>
</tr>
<tr>
<td>double with stop</td>
<td><button id="stopdoubleStatus" onclick="toggle('stopdouble')">off</button></td>
<td><textarea class="output" id="stopdoubleOutput"></textarea></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>



メモ:JavaScript の初期化処理について

OpenLayers.Control.prototype.initialize.apply(
this, arguments
);

prototype プロパティ: クラス側でまとめてメソッドのテーブルを持つ。
initialize: コントロール生成時に呼び出される初期化メソッド。
apply メソッド: JavaScriptのFunctionオブジェクトで定義されているもので、メソッド実行時のthis参照を指定できる。
arguments プロパティ: 関数の内部からその引数を参照するために使う配列オブジェクトのプロパティ

2009年12月29日火曜日

OpenLayers 42b WMSDescribeLayer - の WMS DescribeLayer の HTML コード

WMSDescribeLayerParser の HTML ファイルを作成します。

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

次のようにコードを修正します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers42 WMSDescribeLayer Parser</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="./lib/OpenLayers.js"></script>
<script type="text/javascript">
function parseData(req) {
format = new OpenLayers.Format.WMSDescribeLayer();
html = "<br />"
resp = format.read(req.responseText);
for(var i = 0; i < resp.length; i++) {
html += "Layer: typeName: "+ resp[i].typeName+",";
html += "<ul>";
html += "<li>owsURL: "+resp[i].owsURL+"</li>";
html += "<li>owsType: "+resp[i].owsType+"</li>";
html += "</ul>"
}
document.getElementById('output').innerHTML = html;
}
function load() {
OpenLayers.loadURL("tokyo_pf_pgis_wmsd.xml", "", null, parseData); // 修正
}
</script>
</head>

<!-- body 部分 -->

<body onload="load()">
<h1 id="title">WMSDescribeLayer Parser Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate the operation of the WMSDescribeLayer parser.
</p>
<div id="output"></div>
<div id="docs">
This script reads data from a file and parses out the coordinates, appending them to a HTML string with markup tags.
This markup is dumped to an element in the page.
</div>
</body>
</html>

tokyo_pf_pgis_wmsd.xml を Eclipse にインポートします。
1. メニューバーの ファイル -> インポート をクリック
2. 「選択」ウィンドウで 一般 -> ファイルシステム を選択し、「次へ」ボタンをクリック。
3. 「ファイル・システム」ウィンドウで、「次のディレクトリから」をダウンロードしたディレクトリ(今回は「ユーザディレクトリにしました。)、tokyo_pf_pgis_wmsd.gml をチェック、「宛先フォルダー」を「openlayersTokyoproj」にして「完了」ボタンをクリック。



tokyo_pf_pgis.map の WEB の Metadata と shinkansen レイヤの Metadata の wfs_title をコメントアウトしていますが、openlayers41_sld.html の layer1 (Shinkansen)は表示されます。

2009年12月28日月曜日

OpenLayers 42a WMSDescribeLayer - MapServer の WMS DescribeLayer 設定

MapServer の WMS DescribeLayer は、WMS サーバ設定に WFS および WCS の設定の一部を追加することによって、WFS と WCS の機能を追加する WMS サーバのオプションです。
詳しくは、

MapServer, WMS Server
http://www.mapserver.org/ogc/wms_server.html#wms-server

の 「How does a WMS Work」を参照してください。

WCS (Web Coverage Service)は、レイヤタイプが Raster(ラスター)のための Web サービスです。
詳しくは、

MapServer, WCS Server
http://mapserver.org/ogc/wcs_server.html

を参照してください。

tokyo_pf_pgis.map を次のように修正します。

MAP
NAME tokyo_pf_pgis_map
---
WEB
IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
IMAGEURL "/ka-map/tmp/kacache/"
METADATA
"wms_title" "Tokyo mlit Map WMS Server" # WMS サーバ設定
"wms_onlineresource" "http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map"
"wms_srs" "EPSG:2456 EPSG:4326"
# "wfs_title" "Tokyo mlit Map WFS Server" # WFS サーバ設定をコメントアウト
"wfs_onlineresource" "http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map" # 必須
"wcs_onlineresource" "http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map" # 追加(これはこのファイルには必要ないでしょう)
END
END

---

LAYER
NAME shinkansen
GROUP railroad
TYPE LINE
STATUS ON
DUMP TRUE # 必須
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from (select * from railroad2 where int = '1') as railroadquery using unique gid using srid = -1" #1
MINSCALEDENOM 1000 # 不適当な縮尺で使用されないように。
MAXSCALEDENOM 1000000 # (MINSCALE, MAXSCALE から置き換え。MapServer5より)
LABELITEM "lin"
METADATA
"group_title" "鉄道" # ka-Map の設定
"queryable" "true" #
"searchfield" "lin" #
"fields" "opc:運営会社,lin:路線名" # ここまで
"wms_title" "Shinkansen mlit WMS Layer" # 必須
# "wfs_title" "Shinkansen mlit WFS Layer" # コメントアウト
"gml_featureid" "gid" # 追加
"gml_include_items" "all" # 追加
END
---

次のコマンドで、shinkansen レイヤの WMS describeLayer の情報が得られます。

(Mapbender、Sld integration
http://www.mapbender.org/Sld_integration
の WMS-SLD Examples を参考にしました。)

user@debian:~$ wget -O tokyo_pf_pgis_wmsd.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&service=WMS&version=1.1.1&request=describeLayer&layers=shinkansen"

tokyo_pf_pgis_wmsd.xml の内容

<?xml version='1.0' encoding="ISO-8859-1"?>
<!DOCTYPE WMS_DescribeLayerResponse SYSTEM "http://schemas.opengis.net/wms/1.1.1/WMS_DescribeLayerResponse.dtd">
<WMS_DescribeLayerResponse version="1.1.1" >
<LayerDescription name="shinkansen" wfs="http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map" owsType="WFS" owsURL="http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map">
<Query typeName="shinkansen" />
</LayerDescription>
</WMS_DescribeLayerResponse>

次のコマンドで、shinkansen レイヤの WFS describeFeatureType の情報が得られます。

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

tokyo_pf_pgis_wmsdft.xml の内容

<?xml version='1.0' encoding="ISO-8859-1" ?>
<schema
targetNamespace="http://mapserver.gis.umn.edu/mapserver"
xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns="http://www.w3.org/2001/XMLSchema"
xmlns:gml="http://www.opengis.net/gml"
elementFormDefault="qualified" version="0.1" >

<import namespace="http://www.opengis.net/gml"
schemaLocation="http://schemas.opengis.net/gml/2.1.2/feature.xsd" />

<element name="shinkansen"
type="ms:shinkansenType"
substitutionGroup="gml:_Feature" />

<complexType name="shinkansenType">
<complexContent>
<extension base="gml:AbstractFeatureType">
<sequence>
<element name="msGeometry" type="gml:GeometryPropertyType" minOccurs="0" maxOccurs="1"/>
<element name="gid" type="string"/>
<element name="rac" type="string"/>
<element name="int" type="string"/>
<element name="lin" type="string"/>
<element name="opc" type="string"/>
</sequence>
</extension>
</complexContent>
</complexType>

</schema>

2009年12月27日日曜日

OpenLayers 41j Styled Layer Descriptor (SLD) - MapServer サーバサイドサポート

MapServer では、サーバーサイドとクライアントサイドで SLD をサポートしています。

MapServer
SLD サイト
http://mapserver.org/ogc/sld.html?highlight=sld

MapServer で使用する SLD XML ドキュメントは、サポートされていないフィーチャ(要素またはタグ)があるので修正が必要です。


sld_line_sample2.xml

<?xml version="1.0" encoding="utf-8"?>
<StyledLayerDescriptor version="1.0.0"
xmlns:sld="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/sld
http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
<sld:NamedLayer>
<sld:Name>shinkansen</sld:Name>
<Title>xxx</Title>
<sld:UserStyle>
<sld:FeatureTypeStyle>
<sld:Rule>
<Geometry>
<ogc:PropertyName>center-line</ogc:PropertyName>
</Geometry>
<sld:Stroke>
<sld:CssParameter name="stroke">#00ff00</sld:CssParameter>
<sld:CssParameter name="stroke-width">2</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>

</StyledLayerDescriptor>

次のようにブラウザのアドレス欄に入力します。
(比較のために、現在使用している東京都の地図の投影で表示しています。)

http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&SERVICE=WMS&VERSION=1.1.1&Request=GetMap&srs=EPSG:2456&format=image/png&style=&bbox=-279000,1054000,-185000,1104000&width=600&height=300&LAYERS=shinkansen,gyoseikai&SLD=http://localhost/openlayersTokyoproj/sld_line_simple2.xml

MapServer では、WMS サービスでスタイルを設定できます。

2009年12月26日土曜日

OpenLayers 41i Styled Layer Descriptor (SLD) - SLD XML ドキュメント コード

sld_line_simple.xml は次のように設定してみました。

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor version="1.0.0"
xmlns:sld="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:gml="http://www.opengis.net/gml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
<sld:NamedLayer>
<sld:Name>Shinkansen</sld:Name>
<sld:UserStyle>
<sld:Name>ShinkansenDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#0000ff</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>2</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>


<sld:NamedLayer>
<sld:Name>JRLine</sld:Name>
<sld:UserStyle>
<sld:Name>JRLineDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#ff0000</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>


<sld:NamedLayer>
<sld:Name>PublicLine</sld:Name>
<sld:UserStyle>
<sld:Name>PublicLineDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#990099</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>


<sld:NamedLayer>
<sld:Name>PrivateLine</sld:Name>
<sld:UserStyle>
<sld:Name>PrivateLineDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#00ff00</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>


<sld:NamedLayer>
<sld:Name>ThirdSecLine</sld:Name>
<sld:UserStyle>
<sld:Name>ThirdSecLineDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#999900</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>

</sld:StyledLayerDescriptor>

2009年12月25日金曜日

OpenLayers 41h Styled Layer Descriptor (SLD) - 鉄道 の WFS のHTML コード2

鉄道(railroad)の全部のレイヤを設定した HTML コードです。
publicline
privateline
thirdsec

openlayers41_sld.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers41 SLD 1</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 format = new OpenLayers.Format.SLD();
var map, sld, layerName, baselayer, layer1, layer2, layer3, layer4, layer5; // layer3-5 追加

function init() {
var url = "./sld_line_simple.xml";
OpenLayers.loadURL(url, null, null, loadSuccess);
}

// getDefaultStyle 追加
function getDefaultStyle(sld, layerName) {
var styles = sld.namedLayers[layerName].userStyles;
var style;
for(var i=0; i<styles.length; ++i) {
style = styles[i];
if(style.isDefault) {
break;
}
}
return style;
}


function loadSuccess(req) {
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);
// ここまで
baselayer = 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',
format: 'image/png'
});


layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'shinkansen',  // 修正
transparent: true,
format: 'image/png'
},{
styleMap: new OpenLayers.StyleMap(sld, "Shinkansen"),
projection: new OpenLayers.Projection("EPSG:4326")
});
// 「JR 在来線」レイヤ追加
layer2 = new OpenLayers.Layer.WFS( "JR Line",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'jrline',
transparent: true,
format: 'image/png'
},{
visibility: false, // 表示に時間がかかるので初期表示をしない
styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "JRLine")),
projection: new OpenLayers.Projection("EPSG:4326")
});
//ここから追加
// 「公営鉄道」レイヤ追加
layer3 = new OpenLayers.Layer.WFS( "Public Line",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'publicline',
transparent: true,
format: 'image/png'
},{
visibility: false,
styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "PublicLine")),
projection: new OpenLayers.Projection("EPSG:4326")
});

// 「民営鉄道」レイヤ追加
layer4 = new OpenLayers.Layer.WFS( "Private Line",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'privateline',
transparent: true,
format: 'image/png'
},{
visibility: false,
styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "PrivateLine")),
projection: new OpenLayers.Projection("EPSG:4326")
});

// 「第3セクター」レイヤ追加
layer5 = new OpenLayers.Layer.WFS( "Third Sector Line",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'thirdsec',
transparent: true,
format: 'image/png'
},{
visibility: false,
styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "ThirdSecLine")),
projection: new OpenLayers.Projection("EPSG:4326")
});

// ここまで

map.addLayers([baselayer, layer1, layer2, layer3, layer4, layer5]); // layer3-5 追加

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">OpenLayers41 SLD 1</h1>
<div id="map" class="smallmap"></div>
</body>
</html>

2009年12月24日木曜日

OpenLayers 41g Styled Layer Descriptor (SLD) - 鉄道 の WFS のHTML コード1

鉄道(railroad)の他のレイヤを設定してみます。
最初に、「JR 在来線」レイヤを追加してみます。

---
<script type="text/javascript">
var format = new OpenLayers.Format.SLD();
var map, sld, layerName, baselayer, layer1, layer2; // layer2 追加

function init() {
var url = "./sld_line_simple.xml";
OpenLayers.loadURL(url, null, null, loadSuccess);
}
// getDefaultStyle 追加
function getDefaultStyle(sld, layerName) {
var styles = sld.namedLayers[layerName].userStyles;
var style;
for(var i=0; i<styles.length; ++i) {
style = styles[i];
if(style.isDefault) {
break;
}
}
return style;
}


function loadSuccess(req) {
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; // 追加
sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

// ここまで
//ここから追加

baselayer = 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',
format: 'image/png'
});

layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'shinkansen',  // 修正
transparent: true,
format: 'image/png'
},{
styleMap: new OpenLayers.StyleMap(sld, "Shinkansen"),
projection: new OpenLayers.Projection("EPSG:4326")
});
// 「JR 在来線」レイヤ追加
layer2 = new OpenLayers.Layer.WFS( "JR Line",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'jrline',
transparent: true,
format: 'image/png'
},{
styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "JRLine")),
projection: new OpenLayers.Projection("EPSG:4326")
});

map.addLayers([baselayer, layer1, layer2]); // layer2 追加
// ここまで
// WFS のときはマップコントロールをこの位置へ
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
map.zoomToMaxExtent();
}

</script>
---

sld_line_simple.xml に JRline 用の sld を追加します。

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor version="1.0.0"
xmlns:sld="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:gml="http://www.opengis.net/gml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
<sld:NamedLayer>
<sld:Name>Shinkansen</sld:Name>
<sld:UserStyle>
<sld:Name>ShinkansenDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#0000ff</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>

<!-- JRLine 用 -->

<sld:NamedLayer>
<sld:Name>JRLine</sld:Name>
<sld:UserStyle>
<sld:Name>JRLineDefault</sld:Name>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>
<sld:Rule>
<sld:Name>justAStyler</sld:Name>
<sld:LineSymbolizer>
<sld:Stroke>
<sld:CssParameter name="stroke">
<ogc:Literal>#ff0000</ogc:Literal>
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>

</sld:StyledLayerDescriptor>

ブラウザで表示すると次のように警告が表示されます。



データが多いので表示に時間がかかるようです。
「処理を続行」ボタンをクリックし続けて地図を表示します。

2009年12月22日火曜日

OpenLayers 41f Styled Layer Descriptor (SLD) - Shinkansen の WFS のHTML コード

Shinkansen のレイヤを WFS で表示したときの HTML コードを作成します。
openlayers_sld.html を修正します。

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

<!--SLD コード -->

<script type="text/javascript">
var format = new OpenLayers.Format.SLD();
var map, sld, layerName, baselayer, layer1;

function init() {
var url = "./sld_line_simple.xml";
OpenLayers.loadURL(url, null, null, loadSuccess);
}


function loadSuccess(req) {
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; // 追加
sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

// ここまで

baselayer = 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',
format: 'image/png'
});

var styles = sld.namedLayers["Shinkansen"].userStyles;
var style = styles[0];
layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
typename: 'shinkansen',  // 修正
transparent: true,
format: 'image/png'
},{
styleMap: new OpenLayers.StyleMap(style),
projection: new OpenLayers.Projection("EPSG:4326")
});

map.addLayers([baselayer, layer1]);
// ここまで
// WFS のときはマップコントロールをこの位置へ
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
map.zoomToMaxExtent();
}
</script>

<!--body 部分 -->

</head>
<body onload="init()">
<h1 id="title">OpenLayers41 SLD 1</h1>
<div id="map" class="smallmap"></div>
</body>
</html>



OpenLayers.Layer.WMS でやってみましたが、スタイルが反映されませんでした。
以前のバージョンでは、OpenLayers.Layer.WMS で SLD が適用できたようですが、OpenLayers バージョン 2.8 では確認できませんでした。

2009年12月21日月曜日

OpenLayers 41e Styled Layer Descriptor (SLD) - Shinkansen の HTML コード

Styled Layer Descriptor (SLD)Example(sld.html)を参考に openlayers_sld.html を修正します。

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

<!-- SLD コード -->

<script type="text/javascript">
var format = new OpenLayers.Format.SLD(); // 追加
var map, sld, layerName, baselayer, layer1; // 修正

// XML ドキュメントの読み込み
function init() {
var url = "./sld_line_simple.xml";
OpenLayers.loadURL(url, null, null, loadSuccess);
}


function loadSuccess(req) {
sld = format.read(req.responseXML || req.responseText); // 追加
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

// ここまで

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

baselayer = 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',
format: 'image/png'
});

// SLD ドキュメントの処理

var styles = sld.namedLayers["Shinkansen"].userStyles;
// 追加 NamedLayer "Shinkansen" の UserStyle の読み込み
var style = styles[0];
// 追加 UseStyle 最初のスタイルの読み込み
layer1 = new OpenLayers.Layer.GML( "Shinkansen",
"railroad/shinkansen.gml",
{
styleMap: new OpenLayers.StyleMap(style), // 追加
projection: new OpenLayers.Projection("EPSG:4326")
});

map.addLayers([baselayer, layer1]);

map.zoomToMaxExtent();
} // End of function loadSuccess
</script>
</head>

<!-- body 部分 -->

<body onload="init()">
<h1 id="title">OpenLayers41 SLD 2</h1>
<div id="map" class="smallmap"></div>
</body>
</html>

2009年12月20日日曜日

OpenLayers 41d Styled Layer Descriptor (SLD) - SLD で Style 設定

Styled Layer Descriptor (SLD) Example(sld.html)の sld-tasmania.xml を参考にファイルを作成します。

sld_line_simple.xml

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor version="1.0.0"
xmlns:sld="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:gml="http://www.opengis.net/gml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
<sld:NamedLayer> <!-- レイヤの定義: Basic -->
<sld:Name>Shinkansen</sld:Name> <!-- レイヤの名前: Basic -->
<sld:UserStyle> <!-- ユーザ定義スタイル: NamedStyle(Basic) と同レベル -->
<sld:Name>ShinkansenDefault</sld:Name> <!-- ユーザ定義スタイルの名前 -->
<sld:IsDefault>1</sld:IsDefault> <!-- このスタイルがデフォルトかどうか: true -->
<sld:FeatureTypeStyle> <!-- 特別なタイプのフィーチャのレンダリング -->
<sld:Rule> <!-- (Rule 内全スタイルの)グループ描画命令のためのオブジェクト -->
<sld:Name>justAStyler</sld:Name> <!-- フィーチャスタイルの名前 -->
<sld:LineSymbolizer> <!-- 線のスタイルの定義 -->
<sld:Stroke> <!-- 線ジオメトリのためのグラフィカルな記号化パラメータ -->
<sld:CssParameter name="stroke"> <!-- カスケードスタイルシートスタイルパラメータ -->
<ogc:Literal>#0000ff</ogc:Literal> <!-- スタイルシートの値(のようです) -->
</sld:CssParameter>
<sld:CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</sld:CssParameter>
</sld:Stroke>
</sld:LineSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:NamedLayer>

</sld:StyledLayerDescriptor>

WMS 用のパラメータの基本エレメントを "Basic" とコメントしました。

詳しくは、

OGC, Styled Layer Descriptor
http://www.opengeospatial.org/standards/sld

の仕様書を参照してください。

2009年12月19日土曜日

OpenLayers 41c Styled Layer Descriptor (SLD) - 鉄道データの地図表示

次のコマンドで GML ファイルを作成します。

user@debian:~/mapdata$ wget -O shinkansen.gml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&service=WFS&version=1.0.0&request=GetFeature&typename=shinkansen"
--2009-12-10 17:24:39-- http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&service=WFS&version=1.0.0&request=GetFeature&typename=shinkansen
localhost をDNSに問いあわせています... 127.0.0.1, ::1
localhost|127.0.0.1|:80 に接続しています... 接続しました。
HTTP による接続要求を送信しました、応答を待っています... 200 OK
長さ: 特定できません [text/xml]
`shinkansen.gml' に保存中

[ <=> ] 44,047 254K/s 時間 0.2s

2009-12-10 17:24:41 (254 KB/s) - `shinkansen.gml' へ保存終了 [44047]

user@debian:~/mapdata$ vim shinkansen.gml
で内容を確認します。

shinkansen.gml ファイルを Eclipse の openlayersTokyoproj にインポートします。
1. メニューバーの ファイル -> インポート をクリック
2. 「選択」ウィンドウで 一般 -> ファイルシステム を選択し、「次へ」ボタンをクリック。
3. 「ファイル・システム」ウィンドウで、「次のディレクトリから」をダウンロードしたディレクトリ(今回は「mapdata」にしました。)、shinkansen.gml をチェック、「宛先フォルダー」を「openlayersTokyoproj」にして「完了」ボタンをクリック。

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

コードを次のようにします。

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

<!-- SLD コード -->

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

function init() {
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"), // ここから追加
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000) // ここまで
};
map = new OpenLayers.Map("map", options);
// ここまで
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加

// 東京都のレイヤ表示

baselayer = 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',
format: 'image/png'
});

layer1 = new OpenLayers.Layer.GML( "Shinkansen",
"railroad/shinkansen2.gml",
{
projection: new OpenLayers.Projection("EPSG:4326")
});

map.addLayers([baselayer, layer1]);
// ここまで
map.zoomToMaxExtent();
} // End of function init

</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers41 SLD</h1>
<div id="map" class="smallmap"></div>
</body>
</html>

2009年12月17日木曜日

OpenLayers 41b Styled Layer Descriptor (SLD) - 鉄道データレイヤの追加

tokyo_pf_gpis.map ファイルを修正します。
WFS サーバの設定をします。

---
WEB
IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/" #ka-Map の設定
IMAGEURL "/ka-map/tmp/kacache/" #ka-Map の設定
METADATA
"wms_title" "Tokyo mlit Map WMS Server" # WMS サーバ設定
"wms_onlineresource" "http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map" # WFS サーバ設定
"wms_srs" "EPSG:2456 EPSG:4326" #
"wfs_title" "Tokyo mlit Map WFS Server" # WFS サーバ設定
"wfs_onlineresource" "http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map" # WFS サーバ設定
"wfs_srs" "EPSG:2456 EPSG4326" # WFS サーバ設定
END
---

int: 「事業者種別コード」別にレイヤを作成します。

---
# 新幹線
LAYER
NAME shinkansen
GROUP railroad
TYPE LINE
STATUS ON
DUMP TRUE # 追加
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from (select * from railroad2 where int = '1') as railroadquery using unique gid using srid = -1" #1
LABELITEM "lin"
METADATA
"group_title" "鉄道"   #ka-Map の設定
"queryable" "true" #
"searchfield" "lin" #
"fields" "opc:運営会社,lin:路線名" # ここまで
"wms_title" "Shinkansen mlit WMS Layer" # 追加
"wfs_title" "Shinkansen mlit WFS Layer" # 追加
"gml_featureid" "gid" # 追加
"gml_include_items" "all" # 追加
END
CLASS
NAME "新幹線"
STYLE
COLOR 102 102 255
WIDTH 1
END
LABEL
MINFEATURESIZE 100
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF8
SIZE 8
END
END
TEMPLATE temp_railroad_pgis.html
END

# JR 在来線

LAYER
NAME jrline
GROUP railroad
TYPE LINE
STATUS ON
DUMP TRUE # 追加
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from (select * from railroad2 where int = '2') as railroadquery using unique gid using srid = -1" #1
# MAXSCALEDENOM 500000
LABELITEM "lin"
METADATA
"group_title" "鉄道"   #ka-Map の設定
"queryable" "true" #
"searchfield" "lin" #
"fields" "opc:運営会社,lin:路線名" # ここまで
"wms_title" "Shinkansen mlit WMS Layer" # 追加
"wfs_title" "Shinkansen mlit WFS Layer" # 追加
"gml_featureid" "gid" # 追加
"gml_include_items" "all" # 追加
END
CLASS
NAME "JR 在来線"
STYLE
COLOR 255 102 102
WIDTH 1
END
LABEL
MINFEATURESIZE 100
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF8
SIZE 8
END
END
TEMPLATE temp_railroad_pgis.html
END

# 公営鉄道

LAYER
NAME publicline
GROUP railroad
TYPE LINE
STATUS ON
DUMP TRUE # 追加
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from (select * from railroad2 where int = '3') as railroadquery using unique gid using srid = -1" #1
LABELITEM "lin"
METADATA
"group_title" "鉄道"   #ka-Map の設定
"queryable" "true" #
"searchfield" "lin" #
"fields" "opc:運営会社,lin:路線名" # ここまで
"wms_title" "Public Line mlit WMS Layer" # 追加
"wfs_title" "Public Line mlit WFS Layer" # 追加
"gml_featureid" "gid" # 追加
"gml_include_items" "all" # 追加
END
CLASS
NAME "公営鉄道"
STYLE
COLOR 255 102 255
WIDTH 1
END
LABEL
MINFEATURESIZE 100
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF8
SIZE 8
END
END
TEMPLATE temp_railroad_pgis.html
END

# 民営鉄道
 
LAYER
NAME privateline
GROUP railroad
TYPE LINE
STATUS ON
DUMP TRUE # 追加
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from (select * from railroad2 where int = '4') as railroadquery using unique gid using srid = -1" #1
LABELITEM "lin"
METADATA
"group_title" "鉄道"   #ka-Map の設定
"queryable" "true" #
"searchfield" "lin" #
"fields" "opc:運営会社,lin:路線名" # ここまで
"wms_title" "Private Line mlit WMS Layer" # 追加
"wfs_title" "Private Line mlit WFS Layer" # 追加
"gml_featureid" "gid" # 追加
"gml_include_items" "all" # 追加
END
CLASS
NAME "民営鉄道"
STYLE
COLOR 102 255 102
WIDTH 1
END
LABEL
MINFEATURESIZE 100
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF8
SIZE 8
END
END
TEMPLATE temp_railroad_pgis.html
END

# 第3セクター

LAYER
NAME thirdsec
GROUP railroad
TYPE LINE
STATUS ON
DUMP TRUE # 追加
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from (select * from railroad2 where int = '5') as railroadquery using unique gid using srid = -1" #1
LABELITEM "lin"
METADATA
"group_title" "鉄道"   #ka-Map の設定
"queryable" "true" #
"searchfield" "lin" #
"fields" "opc:運営会社,lin:路線名" # ここまで
"wms_title" "Private Line mlit WMS Layer" # 追加
"wfs_title" "Private Line mlit WFS Layer" # 追加
"gml_featureid" "gid" # 追加
"gml_include_items" "all" # 追加
END
CLASS
NAME "第3セクター"
STYLE
COLOR 255 255 102
WIDTH 1
END
LABEL
MINFEATURESIZE 100
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF8
SIZE 8
END
END
TEMPLATE temp_railroad_pgis.html
END

# 駅

LAYER
NAME railroad3
GROUP railroad
TYPE LINE
STATUS ON
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=tokyo host=localhost user=user password=balanced"
DATA "the_geom from railroad3"
MAXSCALEDENOM 1000
LABELITEM "lin"
METADATA
"group_title" "鉄道"   #ka-Map の設定
"queryable" "true" #
"searchfield" "stn" #
"fields" "stn:駅名" # ここまで
"wms_title" "Railroad mlit Map WMS Layer" # 追加
"wfs_title" "Railroad mlit Map WFS Layer" # 追加
"gml_featureid" "gid" # 追加?
"gml_include_items" "all" # 追加
END
CLASS
NAME "駅"
STYLE
SYMBOL 'circle'
COLOR 102 102 102
WIDTH 1
END
LABEL
MINFEATURESIZE 100
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF8
SIZE 8
END
END
TEMPLATE temp_station_pgis.html
END

END # End of Mapfile

temp_railroad_pgis.html

<html>
<head>
<title>Railroad pgis Template</title>
</head>
<body>
<li>[lin]
</body>
</html>

temp_station_pgis.html

<html>
<head>
<title>Station pgis Template</title>
</head>
<body>
<li>[stn]
</body>
</html>

2009年12月16日水曜日

OpenLayers 41a Styled Layer Descriptor (SLD) - 鉄道データの登録

Styled Layer Descriptor (SLD)Example(sld.html)を参考に SLD を試してみます。

GML ファイルから地図を作成
国土数値情報の鉄道データで SLD ファイルから地図を描画してみます。

国土数値情報の鉄道データのダウンロードします。

1 国土交通相国土計画局の GIS ホームページへようこそ
http://www.mlit.go.jp/kokudokeikaku/gis/index.html

の トップページ -> インターネットサービス -> 国土数値情報ダウンロードサービス -> (JPGIS準拠)データのダウンロード -> 鉄道(線)をクリックします。
2 鉄道データの詳細 ページの 全国 をチェックして「選択」ボタンをクリック。
3 ファイルの選択 ページの最新データの N02-08.zip をチェックして「選択」ボタンをクリック。
4 国土数値情報利用約款 ページの「同意する」ボタンをクリック。
5 ダウンロード ページで「ダウンロード」ボタンをクリック。
6 ダウンロード確認ウィンドウで「OK」ボタンをクリック。
7 もう一度ウィンドウが開いたらファイルを保存するようにする。


データベース(PostgresQL)に登録します。

1 ダウンロードしたファイル(N02-08.zip)を解凍。
N02-08_EB03 は駅のデータです。
2 一般ユーザでシェイプファイルのあるディレクトリに移動して、sqlファイルを作成。

user@debian:~$ cd N02-08/
user@debian:~/N02-08$ shp2pgsql -W sjis N02-08_EB02.shp railroad2 > railroad2.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/N02-08$ shp2pgsql -W sjis N02-08_EB03.shp railroad3 > railroad3.sql
Shapefile type: Point
Postgis type: POINT[2]

3 shp2pgsqlコマンドを使ってシェイプファイルをデータベースに登録。

user@debian:~/N02-08$ psql -d tokyo -f railroad2.sql
user@debian:~/N02-08$ psql -d tokyo -f railroad3.sql

登録した railroad2 データを確認します。

user@debian:~$ psql tokyo
Welcome to psql 8.3.8, 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=> \dt
List of relations
Schema | Name | Type | Owner
--------+------------------+-------+-------
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
(9 rows)

pf_tokyoテーブル内のカラムとその他の一覧を表示してみます。

tokyo=> \d railroad2
Table "public.railroad2"
Column | Type | Modifiers
----------+-----------------------+---------------------------------------------------------
gid | integer | not null default nextval('railroad2_gid_seq'::regclass)
rac | character varying(2) |
int | character varying(1) |
lin | character varying(33) |
opc | character varying(28) |
the_geom | geometry |
Indexes:
"railroad2_pkey" PRIMARY KEY, btree (gid)
Check constraints:
"enforce_dims_the_geom" CHECK (ndims(the_geom) = 2)
"enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTILINESTRING'::text OR the_geom IS NULL)
"enforce_srid_the_geom" CHECK (srid(the_geom) = (-1))

tokyo=> \d railroad3
Table "public.railroad3"
Column | Type | Modifiers
----------+-----------------------+---------------------------------------------------------
gid | integer | not null default nextval('railroad3_gid_seq'::regclass)
rac | character varying(2) |
int | character varying(1) |
lin | character varying(33) |
opc | character varying(28) |
stn | character varying(29) |
the_geom | geometry |
Indexes:
"railroad3_pkey" PRIMARY KEY, btree (gid)
Check constraints:
"enforce_dims_the_geom" CHECK (ndims(the_geom) = 2)
"enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTILINESTRING'::text OR the_geom IS NULL)
"enforce_srid_the_geom" CHECK (srid(the_geom) = (-1))


rac: 「鉄道区分コード」(鉄道、11~17のコード、軌道、21~25のコード)
コード 対応する内容
11 普通鉄道JR
12 普通鉄道
13 鋼索鉄道
14 懸垂式鉄道
15 跨座式鉄道
16 案内軌上式鉄道
17 無軌上式鉄道
21 軌道
22 懸垂式モノレール
23 跨座式モノレール
24 案内軌上式
25 浮上式

int: 「事業者種別コード」
コード 対応する内容
1 新幹線
2 JR 在来線
3 公営鉄道
4 民営鉄道
5 第三セクター

lin: 路線名
鉄道路線の名称。

opt: 運営会社
鉄道路線を運営する会社。

stn: 駅名
駅の名称。

2009年12月15日火曜日

OpenLayers 40h WMC - OpenLayers で Map Context を試す5 HTML の全体のコード

HTML の全体のコードは次のようになります。

openlayers40_wmc.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers40 WMC</title>
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- Map Context ドキュメントの出力欄のスタイル -->
<style type="text/css">
#wmc {
width: 90%;
height: 300px;
}
</style>

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

<!-- WMC のコード -->

<script type="text/javascript">
// no pink please
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
var map, options; // 修正

function init() {
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

// ここまで
// 東京都のレイヤの追加

layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
});
layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'kukaku',
transparent: true,
format: 'image/png'
});
layer3 = new OpenLayers.Layer.WMS( "Tokyo Gyoseikai mlit WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
layers: 'gyoseikai',
transparent: true,
format: 'image/png'
});
map.addLayers([layer1, layer2, layer3]);
// ここまで
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
// map.setCenter(new OpenLayers.LonLat(-95, 34.5), 1);
map.zoomToMaxExtent();
} End of functin init()

// WMC Read

function readWMC(merge) {
var text = document.getElementById("wmc").value;

if(merge) {
try {
map = format.read(text, {map: map});
} catch(err) {
document.getElementById("wmc").value = err;
}
} else {
map.destroy();
try {
// map = format.read(text, {map: "map"});
map = format.read(text, {map: new OpenLayers.Map("map", options)});
map.addControl(new OpenLayers.Control.LayerSwitcher());
} catch(err) {
document.getElementById("wmc").value = err;
}
}
}

// WMC Write

function writeWMC(merge) {
try {
var text = format.write(map);
document.getElementById("wmc").value = text;
} catch(err) {
document.getElementById("wmc").value = err;
}
}

</script>
</head>

<!-- body 部分 -->

<body onload="init()">
<h1 id="title">WMC Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Shows parsing of Web Map Context documents.
</p>
<div id="map" class="smallmap"></div>
<button onclick="writeWMC();">write</button>
<button onclick="readWMC();">read as new map</button>
<button onclick="readWMC(true);">read and merge</button>
<textarea id="wmc">paste WMC doc here</textarea>
<div id="docs">
This is an example of parsing WMC documents. <br />
The format class has a layerOptions property, which can be used
to control the default options of the layer when it is created
by the parser.
</div>
</body>
</html>

2009年12月14日月曜日

OpenLayers 40g WMC - OpenLayers で Map Context を試す4 地図の表示のテスト2 New Map

wmc.html の「read and merge」のボタンをクリックしたとき、次のコードが実行されます。

map = format.read(wmc_doc, {map: "map"});

これの動作は、id が map の <div> に新しい地図が挿入されるため、元の地図が表示されたままで、その下に表示されます。



元の地図を削除するためのコードを含んだ function loadSuccess のコードは次のようになります。

function loadSuccess(request){
var wmc_doc = request.responseText;
map.destroy();
map = format.read(wmc_doc, {map: "map"});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); // 追加
map.addControl(new OpenLayers.Control.ScaleLine()); // 追加
map.zoomToMaxExtent();
}

マップコントロールの表示は、地図がどのように表示されているかを理解するために有効です。
レイヤは設定されていますが、スケールの単位はメータでマウスポジションの単位もメータです。
地図の範囲は、拡大されていますが、表示できる範囲です。
マップのオプションがほとんど設定されていないようです。

OpenLayers.Formt.WMC の Class Documentation の Function -> Parameter -> options に次のように記述されていました。

options {Object} The options object must contain a map property. If the map property is a string, it must be the id of a dom element where the new map will be placed. If the map property is an OpenLayers.Map, the layers from the context document will be added to the map.

訳してみると、

options {Object}
options オブジェクトは、map プロパティを含んでいなければなりません。map プロパティが文字列なら、新しい map が設置される DOM エレメントの id でなければなりません。map プロパティが OpenLayers.Map なら、context ドキュメントから作成されたレイヤは map に追加されます。

とあります。そこで、次のようにコードを修正したら地図が表示されました。

map = format.read(wmc_doc, {map: new OpenLayers.Map("map", options)});

2009年12月13日日曜日

OpenLayers 40f WMC - OpenLayers で Map Context を試す3 地図の表示のテスト1 Merge

wmc.html のコードを単純にして、地図を表示するためにいろいろ試してみました。
HTMLファイル全体のコードを次のようにしました。

openlayers40_wmc2.html

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

<!-- WMC のコード -->

<script type="text/javascript">
// no pink please
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
var map, options; // 修正

function init() {
// 東京都用 map の設定
options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

// ここまで

// 出力した Map Context にマップファイルのディレクトリを追加して保存
var url = "./tokyo_map_context_ol.xml";
// tokyo_map_context_ol.xml をファイルを読み込み
OpenLayers.loadURL(url, null, null, loadSuccess);

} End of functin init()

// 読み込みが成功したときの処理
function loadSuccess(request){
var wmc_doc = request.responseText;
// map.destroy();
// map = format.read(wmc_doc, {map: new OpenLayers.Map("map", options)});
map = format.read(wmc_doc, {map: map});
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">OpenLayers Tokyo Map Context</h1>
<div id="map" class="smallmap"></div>
</body>
</html>

wmc.html の「read and merge」のボタンをクリックしたとき、次のコードが実行されます。

map = format.read(wmc_doc, {map: map});

動作は、元の地図上に Map Context で設定された地図が合併(merge)されます。
この単純なコードの openlayers40_wmc2.html ファイルでも Map Context に設定された地図(だけ)表示されます。



次回は、New Map の動作

2009年12月12日土曜日

OpenLayers 40e WMC - OpenLayers で Map Context を試す2 地図の表示

「read as new map」ボタンをクリックするとタイルの区切りだけ表示されます。
(次のコードで画像が表示されないときのタイルは透明になります。
OpenLayers.Util.onImageLoadErrorColor = "transparent";)
レイヤ自体は設定できているようです。



再読み込みして「write」ボタン、「read and merge」ボタンの順にクリックします。
元の地図の上にタイルの区切りだけ表示されます。
レイヤ自体は設定できているようです。



MapServer と OpenLayers の Map Context を比較すると、OpenLayers の方の <OnlineResource> の xlink:href のリンクにマップファイルのディレクトリの指定がないので次のように修正しました。

height、kukaku レイヤ

<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map"/>

gyoseikai レイヤ

<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map"/>


再び、「read as new map」ボタンをクリックすると地図が表示されます。
しかし、拡大された地図が表示されます。



再読み込みして「write」ボタン、「read and merge」ボタンの順にクリックします。
地図が表示されます。

2009年12月10日木曜日

OpenLayers 40d WMC - OpenLayers で Map Context を試す1 Map Cntext ドキュメントの出力

OpenLayers.Format.WMC は、WMC ドキュメントの読み書きに使用します。

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

map と layer 部分を次のように修正して、「write」ボタンをクリックすると WMC ドキュメントを表示します。

---
function init() {
var options = {
projection: new OpenLayers.Projection("EPSG:2456"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 183.593750,
units: 'meters',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
};
map = new OpenLayers.Map("map", options);

layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
layers: 'height',
format: 'image/png'
});
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'
});
layer3 = new OpenLayers.Layer.WMS( "Tokyo Gyoseikai mlit WMS",
"http://192.168.1.6/cgi-bin/mapserv?",
{
map: '/home/user/mapfile/tokyo_pf_pgis.map',
layers: 'gyoseikai',
transparent: true,
format: 'image/png'
});
map.addLayers([layer1, layer2, layer3]);
---

出力した WMC ドキュメント

<ViewContext xmlns="http://www.opengis.net/context" version="1.1.0" id="OpenLayers_Context_188" xsi:schemaLocation="http://www.opengis.net/context http://schemas.opengis.net/context/1.1.0/context.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<General>
<Window width="512" height="256"/>
<BoundingBox minx="-279000.0000" miny="1055500.000" maxx="-185000.0000" maxy="1102500.000" SRS="EPSG:2456"/>
<Title/>
<Extension>
<ol:maxExtent xmlns:ol="http://openlayers.org/context" minx="-279000.0000" miny="1054000.000" maxx="-185000.0000" maxy="1104000.000"/>
</Extension>
</General>
<LayerList>
<Layer queryable="0" hidden="0">
<Server service="OGC:WMS" version="1.1.1">
<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?"/>
</Server>
<Name>height</Name>
<Title>Tokyo Height WMS</Title>
<FormatList>
<Format current="1">image/png</Format>
</FormatList>
<StyleList>
<Style current="1">
<Name/>
<Title>Default</Title>
</Style>
</StyleList>
<Extension>
<ol:maxExtent xmlns:ol="http://openlayers.org/context" minx="-279000.0000" miny="1054000.000" maxx="-185000.0000" maxy="1104000.000"/>
<ol:numZoomLevels xmlns:ol="http://openlayers.org/context">16</ol:numZoomLevels>
<ol:units xmlns:ol="http://openlayers.org/context">m</ol:units>
<ol:isBaseLayer xmlns:ol="http://openlayers.org/context">true</ol:isBaseLayer>
<ol:displayInLayerSwitcher xmlns:ol="http://openlayers.org/context">true</ol:displayInLayerSwitcher>
<ol:singleTile xmlns:ol="http://openlayers.org/context">false</ol:singleTile>
</Extension>
</Layer>


<Layer queryable="0" hidden="0">
<Server service="OGC:WMS" version="1.1.1">
<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?"/>
</Server>
<Name>kukaku</Name>
<Title>Tokyo Kukaku Sen WMS</Title>
<FormatList>
<Format current="1">image/png</Format>
</FormatList>
<StyleList>
<Style current="1">
<Name/>
<Title>Default</Title>
</Style>
</StyleList>
<Extension>
<ol:maxExtent xmlns:ol="http://openlayers.org/context" minx="-279000.0000" miny="1054000.000" maxx="-185000.0000" maxy="1104000.000"/>
<ol:transparent xmlns:ol="http://openlayers.org/context">true</ol:transparent>
<ol:numZoomLevels xmlns:ol="http://openlayers.org/context">16</ol:numZoomLevels>
<ol:units xmlns:ol="http://openlayers.org/context">m</ol:units>
<ol:isBaseLayer xmlns:ol="http://openlayers.org/context">false</ol:isBaseLayer>
<ol:displayInLayerSwitcher xmlns:ol="http://openlayers.org/context">true</ol:displayInLayerSwitcher>
<ol:singleTile xmlns:ol="http://openlayers.org/context">false</ol:singleTile>
</Extension>
</Layer>


<Layer queryable="0" hidden="0">
<Server service="OGC:WMS" version="1.1.1">
<OnlineResource xlink:type="simple" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.1.6/cgi-bin/mapserv?"/>
</Server>
<Name>gyoseikai</Name>
<Title>Tokyo Gyoseikai mlit WMS</Title>
<FormatList>
<Format current="1">image/png</Format>
</FormatList>
<StyleList>
<Style current="1">
<Name/>
<Title>Default</Title>
</Style>
</StyleList>
<Extension>
<ol:maxExtent xmlns:ol="http://openlayers.org/context" minx="-279000.0000" miny="1054000.000" maxx="-185000.0000" maxy="1104000.000"/>
<ol:transparent xmlns:ol="http://openlayers.org/context">true</ol:transparent>
<ol:numZoomLevels xmlns:ol="http://openlayers.org/context">16</ol:numZoomLevels>
<ol:units xmlns:ol="http://openlayers.org/context">m</ol:units>
<ol:isBaseLayer xmlns:ol="http://openlayers.org/context">false</ol:isBaseLayer>
<ol:displayInLayerSwitcher xmlns:ol="http://openlayers.org/context">true</ol:displayInLayerSwitcher>
<ol:singleTile xmlns:ol="http://openlayers.org/context">false</ol:singleTile>
</Extension>
</Layer>
</LayerList>
</ViewContext>

2009年12月9日水曜日

OpenLayers 40c WMC - MapServer で Map Context を試す3 デフォルトマップファイルと地図の表示

MapServer CGI で地図を表示するために、デフォルトのマップファイルを作成します。

tokyo_context_default.map

MAP
NAME tokyo_context_default_map
STATUS ON
SIZE 600 300
EXTENT -279000 1054000 -185000 1104000
UNITS METERS
IMAGECOLOR 255 255 255
IMAGETYPE png
#
# Start of web interface definition
#
WEB
# MINSCALE 2000000
# MAXSCALE 50000000
#
# On Windows systems, /tmp and /tmp/ms_tmp/ should be created at the root
# of the drive where the .MAP file resides.
#
IMAGEPATH "/home/user/ka-map/htdocs/tmp/ms_tmp/"
IMAGEURL "/ms_tmp/"
END
END # Map File


ウェッブブラウザのアドレス欄に次のように入力しました。

http://localhost/cgi-bin/mapserv?MODE=map&MAP=/home/user/mapfile/tokyo_context_default.map&CONTEXT=/home/user/mapfile/tokyo_map_context.xml&LAYERS=kukaku

次のようにエラーが表示されたので

msBuildWMSLayerURLBase(): WMS connection error. At least wms_format or wms_formatlist is required for layer kukaku. Please either provide a valid CONNECTION URL, or provide those values in the layer's metadata.

tokyo_bmi_pgis_img.map の該当レイヤと tokyo_wms.map の各レイヤの Metadata に "wms_format" "image/png" を追加しました。
再びウェッブブラウザのアドレス欄に次のように入力して、結果をtokyo_map_context.xml に保存します。

http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_wms.map&service=WMS&request=GetContext&version=1.1.0

Map Context ドキュメントを使って地図を表示します。
ウェッブブラウザのアドレス欄に次のように入力しました。

http://localhost/cgi-bin/mapserv?MODE=map&MAP=/home/user/mapfile/tokyo_context_default.map&CONTEXT=/home/user/mapfile/tokyo_map_context.xml&LAYERS=kukaku

画像が表示されたので次のように3つのレイヤを表示しました。

http://localhost/cgi-bin/mapserv?MODE=map&MAP=/home/user/mapfile/tokyo_context_default.map&CONTEXT=/home/user/mapfile/tokyo_map_context.xml&LAYERS=height kukaku gyoseikai

2009年12月8日火曜日

OpenLayers 40b WMC - MapServer で Map Context を試す2 Map Context ドキュメント

OpenLayers 40b WMC - MapServer で Map Context を試す2 Map Context ドキュメント

ブラウザには次のように表示されるので、tokyo_map_context.xml というファイル名で保存します。

<ViewContext version="1.1.0" id="tokyo_wms_map" xsi:schemaLocation="http://www.opengis.net/context http://schemas.opengis.net/context/1.1.0/context.xsd">
<General>
<Window width="600" height="300"/>
<!--
Bounding box corners and spatial reference system
-->
<BoundingBox SRS="EPSG:2456" minx="-279000.000000" miny="1054000.000000" maxx="-185000.000000" maxy="1104000.000000"/>
<!-- Title of Context -->
<Title>Tokyo WMS</Title>
<ContactInformation>
</ContactInformation>
</General>
<LayerList>
<Layer queryable="0" hidden="0">
<Server service="OGC:WMS" version="1.1.1" title="Context Hight">
<OnlineResource xlink:type="simple" xlink:href="http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map"/>
</Server>
<Name>height</Name>
<Title>Context Hight</Title>
</Layer>
<Layer queryable="0" hidden="0">
<Server service="OGC:WMS" version="1.1.1" title="Context Kukaku">
<OnlineResource xlink:type="simple" xlink:href="http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map"/>
</Server>
<Name>kukaku</Name>
<Title>Context Kukaku</Title>
</Layer>
<Layer queryable="0" hidden="0">
<Server service="OGC:WMS" version="1.1.1" title="Context Gyoseikai">
<OnlineResource xlink:type="simple" xlink:href="http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map"/>
</Server>
<Name>gyoseikai</Name>
<Title>Context Gyoseikai</Title>
</Layer>
</LayerList>
</ViewContext>

2009年12月7日月曜日

OpenLayers 40a WMC - MapServer で Map Context を試す1 マップファイル

WMC Example(wmc.html)を参考に Web Map Context を試してみます。

MapServer ホームページの

Map Context サイト
http://mapserver.org/ogc/mapcontext.html

を参考にマップサーバで試してみます。
Map Context は、WMS の情報が保存されている XML フォーマットのファイルです。

最初に、Map Context のデータを取得するためのマップファイルを作成します。
Required (必須)の Metadata を設定して、ウェッブブラウザのアドレス欄に次のように入力しました。

http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_wms.map&service=WMS&request=GetContext&version=1.1.0

次の警告が表示されたので、マップファイルを下記のように設定しました。


1. WARNING: Mandatory data 'projection' was missing in this context.
2. WARNING: Mandatory metadata 'wms_server_version' was missing in this context.
3. WARNING: Mandatory metadata 'wms_name' was missing in this context.

tokyo_wms.map


MAP
NAME tokyo_wms_map
STATUS ON
SIZE 600 300
EXTENT -279000 1054000 -185000 1104000
UNITS meters
IMAGECOLOR 255 255 255
IMAGETYPE png
FONTSET "fonts.txt"

PROJECTION # 1
"init=epsg:2456" #
END #


WEB
METADATA
"wms_title" "Tokyo WMS"
"wms_getcontext_enabled" "1" # WMS を経由して Map Context を取得するため追加
END
END


LAYER
NAME height
TYPE RASTER
STATUS ON
CONNECTIONTYPE WMS
CONNECTION "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map"
METADATA
"wms_name" "height" #3
"wms_server_version" "1.1.1" #2
"wms_title" "Context Hight" # Required
"wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map" # Required
END
END # Layer


LAYER
NAME kukaku
TYPE LINE
STATUS ON
CONNECTIONTYPE WMS
CONNECTION "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map"
METADATA
"wms_name" "kukaku" #3
"wms_server_version" "1.1.1" #2
"wms_title" "Context Kukaku" # Required
"wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_bmi_pgis_img.map" # Required
END
END # Layer


LAYER
NAME gyoseikai
TYPE LINE
STATUS ON
CONNECTIONTYPE WMS
CONNECTION "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map"
METADATA
"wms_name" "gyoseikai" #3
"wms_server_version" "1.1.1" #2
"wms_title" "Context Gyoseikai" # Required
"wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map" # Required
END
END # Layer

END # Map