wiki:OSGeo4W_jp/OpenLayers

Version 5 (modified by yukatohhana, 15 years ago) ( diff )

--

OpenLayers

OpenLayers 2.8 の紹介

OpenLayers は即座に作成することや、高度なウェブマッピングアプリケーションを可能にする、開発者にやさしいJavascript ライブラリです。単純かつ明確な API を使えば、ローカルデータソースあるいはリモートデータソースから多種のローカルデータあるいはリモートデータを統合することが可能になります。OpenLayers はMapServer からWMSデータレイヤーを表示するjavascriptライブラリの一つです。

トレーニング用の実用的なリンク：

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インストールから他のベトナムレイヤーを呼び出すために、同じ手順を行ってください。

Note: See TracWiki for help on using the wiki.