Context Navigation

Changes between Version 3 and Version 4 of OSGeo4W_jp/OpenLayers

Timestamp:: Mar 29, 2010, 6:54:27 PM (14 years ago)
Author:: yukatohhana
Comment:: --

Legend:

: Unmodified
: Added
: Removed
: Modified

OSGeo4W_jp/OpenLayers

-              v3
+              v4
 WMS プロトコルについて前に述べたように、WFS プロトコルを使用している MapServer と相互利用できます。
+= 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インストールから他のベトナムレイヤーを呼び出すために、同じ手順を行ってください。