http://openlayers.org/
上部のナビゲーションバーの「Documentation」をクリックします。
Documentation
http://trac.osgeo.org/openlayers/wiki/Documentation
の「Documentation」の「Documentation」リンクをクリックします。
What is OpenLayers?
http://docs.openlayers.org/
の「OpenLayers Documentation」の「Getting Started」リンクをクリックします。
Getting Started
http://docs.openlayers.org/library/introduction.html
にしたがって地図を表示してみます。
「Creating Your First Map」には、OpenLayers の基本について書かれています。
地図を構築するのに必要な 'Map' と 'Layer' の２つの OpenLayers API で構成されています。（OpenLayers などのコード上は、「Map、map、マップ」と表記し、画像などを「地図」と表記します。）コードには、"projection"（座標系）、"extents"（範囲）、"units"（単位）、の初期値などを記述します。'Layer' は OpenLayers がどのようにデータをリクエスト（要求）して表示するかという情報、すなわち、データソースになります。
OpenLayers ビューワを構築するには、ビューワがみられるように HTML を記述することが必要です。OpenLayers は、どのブロックレベルエレメント（要素）内でも１つの地図を置くことをサポートしています。これは、ホームページ上の HTML エレメントのほとんどのところに地図を置くのに使えることを意味します。
（"<要素名>...</要素名>" のようにタグで囲まれたところをブロックと呼んでいるようです。次に記述されていることから、script タグ "<script>...</script>" のことのようです。）
一つのブロックレベル要素に加えて、OpenLayers ライブラリをページに挿入するスクリプトタグを挿入する必要があります。
mapsite ディレクトリに次の内容で getting_started.html ファイルを作成します。
user@debian7-vmw:~$ cd mapsite/
user@debian7-vmw:~/mapsite$ vim getting_started.html
<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> :wq
例1: HTML ファイルの作成
「Creating the Map Viewer」
ビューワを作成するために、最初に（OpenLayers 上の）マップを作成します。OpenLayers.Map コンストラクタは、引数をひとつ必要とします。すなわち、この引数は HTML エレメントか HTML エレメントの ID でなければなりません。これはマップが置かれるエレメントです。
var map = new OpenLayers.Map('map');
例2: Map コンストラクタ
ビューワを作成する次のステップは、'Map' にレイヤを追加することです。OpenLayers は、WMS から Yahoo! Maps、WorldWind まで、多くの種類データソースをサポートしています。この例では WMS レイヤが使われています。WMS レイヤは MetaCarta によって提供されています。
>var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{'layers':'basic'} );
map.addLayer(wms);
例3: Layer コンストラクタ
このコンストラクタの最初のパラメータは、レイヤの名前で、表示目的に使われます。第２引数は、WMS サーバのURL です。第３引数は、WMS リクエストに付加されたパラメータを含むオブジェクトです。
最後に、地図を表示するために、中心とズームレベルを設定しなければなりません。ウィンドウに地図を収めるズームには、zoomToMaxExtnt 関数を使います、これはウィンドウ内に収めるまで最大範囲をできるだけ近づけるようにズームします。
「Putting it All Together」
次のコードブロックは、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://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
例4: 簡単な WMS ブラウザのための全 HTML と JavaScript
「Adding an Overlay WMS」
wms レイヤは、同じ座標系の他の wms レイヤの上に重ねられる機能があります。ベースレイヤよりもオーバーレイとしてレイヤをマークするいくつかの方法があります。WMS で、これをする最良の方法は、"transparent" パラメータを "true" に設定することです。ここの例は、透過（teansparent）WMS オーバレイを提示するために行政界 WMS を使っています。
var dm_wms = new OpenLayers.Layer.WMS(
"Canadian Data",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true",
format: "image/png"
},
{isBaseLayer: false}
);
map.addLayer(dm_wms);
例5: 地図に透過 WMS オーバレイを追加する方法。
tranparent: 'true' パラメータを使うことで２つのフラッグが自動的に設定されます。
format パラメータ
Web ブラウザが透過（transparent）PNG 画像をサポートしているなら、WMS レイヤの format オプションは、image/png が設定されます。（これは、インターネットエクスプローラ 6 を除いたすべての Web ブラウザです。）インターネットエクスプローラ 6 では、image/gif が替りに設定されます。
isBaselayer オプション
isBaselayer オプションは、そのレイヤが他のレイヤと同時に表示することができるかを制御します。このオプションは、WMS レイヤに対して false（偽）に規定されます。しかし、transparent を true（真）に設定すると規定により true（真）にかえます。
このコードを前出の例に置くと、次のようになります。
<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://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
var dm_wms = new OpenLayers.Layer.WMS(
"Canadian Data",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true",
format: "image/png"
},
{isBaseLayer: false}
);
map.addLayers([wms, dm_wms]);
map.zoomToMaxExtent();
</script>
</body>
</html>
例6: 地図に透過 WMS オーバレイを追加する方法。
ここで一つ注意することは、 map オブジェクトの addLayer を、同時に２つのレイヤを追加することに使っていることです。
「Adding a Vector Marker to the Map」
この地図の、ある座標（緯度経度）に１つのマーカーを追加するための overlay を追加するために、 Vector Layer を使うことができます。
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-71, 42),
{some:'data'},
{externalGraphic: 'img/marker.png', graphicHeight: 21, graphicWidth: 16});
vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);
これは簡単なデモです。Styling と Overlays ドキュメントを通して対話方法や制御、スタイル（装飾）方法など、overlay に多くの情報が利用できます。
［トロントの付近にマーカがあります。）
0 件のコメント:
コメントを投稿