wiki:OSGeo4W_jp/OpenLayers

Context Navigation

Version 4 (modified by yukatohhana, 14 years ago) ( diff )
--

MapServer

新しいマップサーバーのインストールのテストを行う

MapServer cgi スクリプトはコマンドから実行できます。Apacheウェブサーバーがサービスを行うに当たって適切にインストールされているかどうか確かめる必要があります。

《started》の状態に設定されている　Apache OSGEO4W Web Server という名前のサービスがあることを確認するためのサービスマネージャーへ行ってください。下のコマンドで容易に利用できます。80ポートが開いているかどうか確認してください。

#netstat -na |findstr LISTEN

Windows7 pro をご利用の場合、既定の 80 listen ポートではなく、IIS が既に使っている8080を利用するために、C: \OSGeo4W\apache\conf\httpd.conf メイン Apache 設定ファイルから Listen の修正をする必要があります。

前文の設定を行えば、次のような既定のインデックスページをロードすることができます。

最初のMapServer マップファイルを作成する

マップファイルは、地図をマップファイル上で確定し、地図中に表示されるべきレイヤー、各レイヤーを表示する方法、レイヤーの順、写真として地図に表示するために使われるアウトプットフォーマットの確定などが書き込まれているファイルです。

どのマップファイルも XML ファイル（ xml マップファイルは最近の MapServer バージョンによってサポートされていますが、ここでは、《 old / standard 》シンタックスに注目しています）として容易に表示できます。それぞれの XML ファイルにはオープニングタグとクロージングタグがあります。必要であれば、個別に閉じることができます。

どのレイヤーも持たない基本的なマップファイルは # から始まり、次のようになります。

MAP
# the name of your map
NAME 	≪ my vietnam demo map ≫
# the default size of your map
SIZE 	1024 	768
# the bounding box to display
EXTENT 	102.148611 8.633287 109.453599 23.377778
# the path where your vector data files are located
SHAPEPATH ≪ C: \OSGeo4W\Data\Shapes\ ≫
# the default output format (from a list which should follow)
IMAGETYPE png
END

これでマップファイルに IMAGETYPE 属性を設定しました。これは OUTPUTFORMAT ブロックの MAP ブロックに含まれている名前です（同じマップファイルに含まれています）。

マップファイルの書き込みを容易に理解するため、 INCLUDE ディレクティブを使用します。それでファイルの集合中の複雑なマップファイルを分割します。

C: \OSGeo4W\maps\outputs.map という名前のファイルを作成し、そこに以下を挿入してください。これで、どのように作成された画像が表示されるのかを定義します。

OUTPUTFORMAT
NAME 		"png" 	# the name referenced in the MAP block
MIMETYPE 	"image/png" # the mimeType of created file
DRIVER 	"AGG/PNG" # the driver used to generate the image (default is GD/PNG)
EXTENSION 	"png" 	# the filename will be ended by .png
IMAGEMODE 	"RGBA" 	# render in 32bit Red/Green/Blue/Alpha
TRANSPARENT 	TRUE
END
OUTPUTFORMAT
NAME 		"gtif"
MIMETYPE 	"image/gtif"
DRIVER 		"GDAL/GTIFF"
EXTENSION 	"gtif"
IMAGEMODE 	"PC256"
TRANSPARENT 	TRUE
END

次のコンテンツに従って、 C: \OSGeo4W\maps\mapfile.map ファイルを作成してください。

MAP
NAME "my demo vietnam map"
EXTENT 102.148611 8.633287 109.453599 23.377778
SYMBOLSET "C: \OSGeo4W\maps\symbols.sym"
FONTSET "C: \OSGeo4W\maps\fonts.txt"
SHAPEPATH "C: \OSGeo4W\Data\Shapes\"
SIZE 1024 768
IMAGETYPE png
INCLUDE "outputs.map"
# default projection of the map
PROJECTION
　　"init=epsg: 4326"
END
# WEB block
WEB
　　IMAGEPATH "C: \OSGeo4W\apache\htdoc s\Temp" # directory where produced imgs go
　　IMAGEURL "/TEMP" # relative path to download image from the web server
　　METADATA
　　　　"ows_title" "My Demo Vie tnam Map" #
　　END
　END
　INCLUDE "layers.map"
END

レイヤーブロックを作成する

layers.map ファイルを作成しなければなりません。それは次のコンテンツを含んでいなければなりません。

LAYER
　　NAME "Administrative"
　　DATA "vietnam_administrative "
　　TYPE LINE # data type , you can use the ogrinfo command previously presented
　　METADATA
　　　　"ows_title" "Administrative Boundaries" # title of WMS / WFS
　　END
　　CLASS
　　　　NAME "Vietnam Administrative Boundaries"
　　　　STYLE
　　　　　　#OUTLINECOLOR R G B color around the geometry
　　　　　　COLOR 255 200 100 # color inside the geometry
　　　　　　WIDTH 2
　　　　END
　　END
END

これで同じフォーマットの他のレイヤーに簡単に追加できます。シェープファイルは C: \OSGeo4W\Data\Shapes\ ディレクトリに含まれました。公式のマップファイル参照文書からレイヤーシンタックス、サポート、スタイル等について」、より多くの情報を得ることができます。

WMS サーバーとして MapServer を使用する

一度 layers.map ファイルを作成すれば、画像としてのマップを表示するためのブラウザーで見える前に mapserver.exe スクリプトを使用できます。WMS プロトコルの使用が可能なレイヤーについての情報を入手できます。

注意：ここではMapServerを使用しません。しかし、C: \OSGeo4W\maps\symbols.sym と C:\OSGeo4W\maps\fonts.txt　の2つの空ファイルを作成しなければならないことに注意してください。ここでは2つのファイルは使用しないので、これに関する情報は提供しません。しかし、この2つのファイルは、レイヤーのスタイルを定義するのに使われるシンボルの定義と、表示例などのフォントの定義に使用されることに注意してください。

表示された画質:既定のGD/PNGドライバーおよびAGG/PNGドライバーの使用の違いをチェックするため、マップファイルからINCLUDE 'outputs.map'パートへのコメントも歓迎します。下の画像からインストールの違いを比較することができます。

WFS サーバーとしてMapServerを使用する

WFSサーバーとしてMapServerを使用している全データソースコンテンツの入手方法について示します。MapServer に WFS 機能を追加するために、マップファイルにいくつかの METADATA ブロック属性を設定しなければなりません。

ウェブブロック内に以下を追加してください。

　METADATA
　"wfs_encoding" "UTF-8"
　"ows_title" 	"My Vietnam Demo Map"
"wfs_onlineresource " "http: //localhost/cgi-bin/mapserv.exe?map=C:/OSGeo4W/maps/mapfile.map"
　　END

サンプル《 Administrative 》LAYER ブロックのための DUMP 属性および METADATA ブロックは次のようになります。

DUMP TRUE
 METADATA
 "gml_featureid" "id"
 "wfs_title" "Administrative Boundaries"
"gml_include_items" "NAME,ADMIN_LEVEL"
END

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

Note: See TracWiki for help on using the wiki.

Download in other formats:

Plain Text