OpenLayers
OpenLayers 2.8 の紹介
OpenLayers は即座に作成することや、高度なウェブマッピングアプリケーションを可能にする、開発者にやさしいJavascript ライブラリです。単純かつ明確な API を使えば、ローカルデータソースあるいはリモートデータソースから多種のローカルデータあるいはリモートデータを統合することが可能になります。OpenLayers はMapServer からWMSデータレイヤーを表示するjavascriptライブラリの一つです。
トレーニング用の実用的なリンク：
- OpenLayers公式ウェブサイト：http://openlayers.org
- OpenLayersのドキュメント：http://dev.openlayers.org/apidocs
- OpenLayersの例：http://openlayers.org/dev/examples
OpenLayers 2.8 UML 構造
URL：http://trac.openlayers.org/attachment/wiki/UML/ClassDiagram_OL2.7RC2-20080916.pdf
簡単なHTMLファイルを作成する
任意のテキストエディターで次のHTMLを作成します。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Vietnam Layers Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="OpenLayers-2.8/lib/OpenLayers.js"></script>
</head>
<body onload="init()">
<h1 id="title">Vietnam Layers Example</h1>
<div id="map"></div>
</body>
</html>
簡単なOpenLayers マップを入手する基本のjavascript を作成する
<head></head> セクションに次のJavascriptを作成します。
<script type="text/javascript">
function init(){
map = new OpenLayers.Map( 'map' );
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayers([wms]);
}
</script>
HTMLファイルを《vietnam.html》と名前を付けて保存し、ウェブブラウザーでそれを開いてください。作動するMataCarta WMSレイヤーで簡単なOpenLayers マップが表示されます。
OpenLayers マップをカスタマイズする
init() 関数の前に次のJavascriptを追加してください。
var lon = 15.7; var lat = 107.7; var zoom = 5;
init() 関数に次のJavascriptを追加してください。
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
HTMLファイルを上書き保存し、ウェブブラウザで開いてください。
Vietnamを中心とするOpenLayersマップが表示されます。
自分がいる位置にズームする経度、緯度、拡大変数を修正できます。
MapServer WMSレイヤーを呼び出す
init() 関数に次のJavascriptを追加してください。
var admin_layer = new OpenLayers.Layer.WMS("WMS Admin",
"http://localhost/cgi-bin/mapserv?map=C:/OSGeo4W/maps/mapfile.map",
{layers: 'administrative'},
{isBaseLayer: false, transitionEffect:'resize'}
);
map.addLayers([admin_layer]);
HTMLファイルを上書き保存し、ウェブブラウザで開いてください。
LayerSwitcherに追加された行政ベトナムレイヤーが表示されます。
そして、2つのWMSレイヤーをよりきれいに重ね合わせるために、以下を追加してください。
{layers: 'administrative', transparent: "true", format: "image/png" } );
MapServerインストールから他のベトナムレイヤーを呼び出すために、同じ手順を行ってください。
MapServer WFSレイヤーを呼び出す
init() 関数に次のJavascriptを追加してください。
var admin_layer = new OpenLayers.Layer.WFS(
"Admin WFS", "http://localhost/cgi-bin/mapserv?map=C:/OSGeo4W/maps/mapfile.map&",
{typename: 'vietnam'},
{ extractAttributes: true}
);
map.addLayers([admin_layer]);
HTMLファイルを上書き保存し、ウェブブラウザで開いてください。
LayerSwitherに追加された行政WFSベトナムレイヤーが表示されます。
MapServerインストールから他のベトナムレイヤーを呼び出すために、同じ手順を行ってください。
