OpenLayers ホームページ
http://openlayers.org/
の Support & Development の Users の Documentatin をクリックします。
Documentation ページの Getting Started をクリックします。
Getting Started ページにしたがって操作します。
最初の部分に、OpenLayersの特徴が述べられています。
OpenLayers API は、あなたが最初に作成する地図によって理解する重要な２つのコンセプト（特徴的な考え方）MapとLayerを持っています。
OpenLayers Mapは、地図のprojection（投影法）、extents（範囲）、units（単位）などの情報を蓄積し、データはLayer経由で表示されます。
Layerはデータソースで、どのようにしてOpenLayersがデータを要求してそれを表示するかについての情報です。
Creating Your First Map の Creating HTML にしたがって
/home/user/openlayers に次の内容で getting_started.html ファイルを作成します。
HTMLファイルの作成
OpenLayersビューワーを構築することは、あらかじめビューワーを含んだHTMLファイルを作成する必要があります。
OpenLayersはどのブロックレベルの要素の中にでも地図を置くことをサポートしています。
これは、ページのほとんどのHTML要素に地図を置いて使うことができるということです。
シングルブロック要素に加えて、OpenLayersライブラリを含んだスクリプトタグをページに記述する必要があります。
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
マップビューワーの作成
ビューワーの作成によって、最初に地図の作成をします。
OpenLayers.Mapコンストラクタは引数が一つ必要です。
この引数はHTML要素か、HTML要素のIDのどちらかです。
これは、置かれる地図の要素です。
var map = new OpenLayers.Map('map');
ビューワーを作成する次のステップは、地図にレイヤを追加することです。
OpenLayersは、多くの違うデータソース、WMSからYahoo!Maps、WorldWindまで、をサポートしています。
この例は、WMSレイヤを使っています。
このWMSレイヤは、MetaCartaによって提供されている例です。
var wms = new OpenLayers.Layer.WMS(
"http://labs.metacarta.com/wms/vmap0",
{'layers':'basic'});
map.addLayer(wms);
このコンストラクタの１番目のパラメータは、WMSサーバのURLです。
２番目の引数は、WMSリクエストを追加したパラメータを含んだオブジェクトです。
最後に、地図を表示するために、地図の中心とズームレベルを設定します。
地図をウィンドウに合わせるズームのために、zoomToMaxExtent関数を使います。
これは、開いたウィンドウの範囲に合わせて、可能な限り近づけて拡大縮小します。
すべてを記述する
次のコードブロックは、OpenLayersビューワを作成するためにすべての部品を記述したものです。
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{'layers':'basic'});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
オーバーレイを追加する
WMSレイヤは、同じ投影で他のWMSレイヤを上に重ねることができます。
baseレイヤ上にオーバレイとしてレイヤを表示するいくつかの方法があります。
WMSで、これを実行する最良の方法は、transparentパラメータをtrueに設定することです。
ここの例は、透過WMSを重ねるデモに国境WMSを使っています。
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{'layers':'basic'});
var twms = new OpenLayers.Layer.WMS("World Map",
"http://world.freemap.in/cgi-bin/mapserv?",
{map: '/www/freemap.in/world/map/factbooktrans.map',
transparent: 'true',
layers:'factbook',
format: 'png'});
map.addLayer(twms);
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
Google Mapなどは、IDをとらなくてはならないので省略しました。
0 件のコメント:
コメントを投稿