Changes between Version 3 and Version 4 of OSGeo4W_jp/OpenLayers


Ignore:
Timestamp:
03/29/10 18:54:27 (15 years ago)
Author:
yukatohhana
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • OSGeo4W_jp/OpenLayers

    v3 v4  
    156156
    157157WMS プロトコルについて前に述べたように、WFS プロトコルを使用している MapServer と相互利用できます。
     158
     159= OpenLayers =
     160== OpenLayers 2.8 の紹介 ==
     161
     162OpenLayers は即座に作成することや、高度なウェブマッピングアプリケーションを可能にする、開発者にやさしいJavascript ライブラリです。単純かつ明確な API を使えば、ローカルデータソースあるいはリモートデータソースから多種のローカルデータあるいはリモートデータを統合することが可能になります。OpenLayers はMapServer からWMSデータレイヤーを表示するjavascriptライブラリの一つです。
     163
     164トレーニング用の実用的なリンク：
     165 * OpenLayers公式ウェブサイト：http://openlayers.org
     166 * OpenLayersのドキュメント：http://dev.openlayers.org/apidocs
     167 * OpenLayersの例：http://openlayers.org/dev/examples
     168
     169== OpenLayers 2.8 UML 構造 ==
     170
     171URL：http://trac.openlayers.org/attachment/wiki/UML/ClassDiagram_OL2.7RC2-20080916.pdf
     172
     173== 簡単なHTMLファイルを作成する ==
     174
     175任意のテキストエディターで次のHTMLを作成します。
     176
     177{{{
     178<html xmlns="http://www.w3.org/1999/xhtml">
     179  <head>
     180    <title>OpenLayers Vietnam Layers Example</title>
     181    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     182    <link rel="stylesheet" href="style.css" type="text/css" />
     183    <script src="OpenLayers-2.8/lib/OpenLayers.js"></script>
     184  </head>
     185  <body onload="init()">
     186    <h1 id="title">Vietnam Layers Example</h1>
     187    <div id="map"></div>
     188  </body>
     189</html>
     190}}}
     191
     192== 簡単なOpenLayers マップを入手する基本のjavascript を作成する ==
     193
     194<head></head> セクションに次のJavascriptを作成します。
     195
     196{{{
     197<script type="text/javascript">
     198
     199  function init(){
     200    map = new OpenLayers.Map( 'map' );
     201    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
     202      "http://labs.metacarta.com/wms/vmap0",
     203      {layers: 'basic'} );
     204
     205    map.addLayers([wms]);
     206}
     207
     208</script>
     209}}}
     210
     211HTMLファイルを《vietnam.html》と名前を付けて保存し、ウェブブラウザーでそれを開いてください。作動するMataCarta WMSレイヤーで簡単なOpenLayers マップが表示されます。
     212
     213== OpenLayers マップをカスタマイズする ==
     214
     215init() 関数の前に次のJavascriptを追加してください。
     216
     217{{{
     218var lon = 15.7;
     219var lat = 107.7;
     220var zoom = 5;
     221}}}
     222
     223init() 関数に次のJavascriptを追加してください。
     224
     225{{{
     226map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
     227}}}
     228
     229HTMLファイルを上書き保存し、ウェブブラウザで開いてください。
     230
     231Vietnamを中心とするOpenLayersマップが表示されます。
     232
     233自分がいる位置にズームする経度、緯度、拡大変数を修正できます。
     234
     235== MapServer WMSレイヤーを呼び出す ==
     236
     237init() 関数に次のJavascriptを追加してください。
     238
     239{{{
     240var admin_layer = new OpenLayers.Layer.WMS("WMS Admin",
     241  "http://localhost/cgi-bin/mapserv?map=C:/OSGeo4W/maps/mapfile.map",
     242  {layers: 'administrative'},
     243  {isBaseLayer: false, transitionEffect:'resize'}
     244);
     245
     246map.addLayers([admin_layer]);
     247}}}
     248
     249HTMLファイルを上書き保存し、ウェブブラウザで開いてください。
     250
     251LayerSwitcherに追加された行政ベトナムレイヤーが表示されます。
     252
     253そして、2つのWMSレイヤーをよりきれいに重ね合わせるために、以下を追加してください。
     254
     255{{{
     256{layers: 'administrative', transparent: "true", format: "image/png" } );
     257}}}
     258
     259MapServerインストールから他のベトナムレイヤーを呼び出すために、同じ手順を行ってください。
     260
     261== MapServer WFSレイヤーを呼び出す ==
     262
     263init() 関数に次のJavascriptを追加してください。
     264
     265{{{
     266var admin_layer = new OpenLayers.Layer.WFS(
     267"Admin WFS", "http://localhost/cgi-bin/mapserv?map=C:/OSGeo4W/maps/mapfile.map&",
     268  {typename: 'vietnam'},
     269  { extractAttributes: true}
     270);
     271
     272map.addLayers([admin_layer]);
     273}}}
     274
     275HTMLファイルを上書き保存し、ウェブブラウザで開いてください。
     276
     277LayerSwitherに追加された行政WFSベトナムレイヤーが表示されます。
     278
     279MapServerインストールから他のベトナムレイヤーを呼び出すために、同じ手順を行ってください。