Daily Archives: 06/01/2013

OpenLayersのLayer Subclassについて_1[Chapter 7]

OpenLayersを使ってみる。[Chapter 7]

OpenLayersのLayer Classについて[Chapter 6] に引き続き、OpenLayersのLayer Subclassについて学んでみます。
OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。

本Blog中のsource code等に関しては、あくまでも参考としてください。なにがあっても責任とれませんので。
そこんところ、ヨロシク~~!!

Layer.Grid

まずは、重要なLayer.Gridについてですが、これは、WMSのような他の多くのLayerが継承するbase class(基底クラス)です。直接使うことありません。しかし、それが存在することを知ることは重要です。
Layer.Gridは、Gridを構築しGridの内部でtiles(地図イメージ)を置くことにより、基本的に作動します。
Layer.Gridは、地図を作成するための必要なtilesを得ることと、地図サーバーと通信するためにHTTPRequestクラスを使用します。

Layer.Gridについては、Layer.Gridを参照してください。

Layer.Image

Layer.Imageは、map layerとしてイメージ画像を使用することを可能にします。
厳密にクライアント/サーバー・モデルではなく、単純なひとつの画像となります。
一旦イメージの定義がなされれば、OpenLayersを使って画像として表示することができますが、他のraster(nonベクトル) layerのように、tilesはありません。

これらのイメージ画像は目的(また最良の用途の1つ)は、イメージをOverview controlに使用することです。
その他使い方は多岐に渡ります。

Layer.Image example

では、ちょっとサンプルを追加して表示してみましょう。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter3¥にしておきます。
ファイル名は、chapter3_ex4_image_layer.htmlで保存します。
使用するイメージ画像は何でも構いませんが、ここでは、デザイン世界地図のフリー画像を使いました。

[html]
<!DOCTYPE html>
<html lang=’ja’>
<head>
<meta http-equiv=’content-type’ content=’text/html;charset=UTF-8′ />
<script type=’text/javascript’ src=’http://localhost/openlayers/OpenLayers.js’></script>
<script type=’text/javascript’>

var map;

function init() {
// Setup our map object
map = new OpenLayers.Map(‘map_element’, {});

// Add an Image Layer
var image_layer = new OpenLayers.Layer.Image(
‘Wallpaper’,
‘./miller-1023×610.jpg’,
new OpenLayers.Bounds(-180,-90,180,90),
new OpenLayers.Size(1023,610),
{numZoomLevels:7, maxResolution:.625}
);

// Add another Image Layer
var image_layer_2 = new OpenLayers.Layer.Image(
‘Wallpaper 2′,
‘./miller-round-s.jpg’,
new OpenLayers.Bounds(-180,-90,180,90),
new OpenLayers.Size(1023,610),
{numZoomLevels:7, maxResolution:.625, isBaseLayer:false, opacity:0.2}
);

// Add the layers
map.addLayers([image_layer, image_layer_2]);

// Add a layer switcher control
map.addControl(new OpenLayers.Control.LayerSwitcher({}));

// Zoom the map to the max extent
map.zoomToMaxExtent();
}

</script>
</head>

<body onload=’init();’>
<div id=’map_element’ style=’width: 500px; height: 500px;’></div>
</body>
</html>
[/html]

このcodeでimage layerは2つあります。
まず、

// Add an Image Layer
var image_layer = new OpenLayers.Layer.Image(
	'Wallpaper',
	'./miller-1023x610.jpg',
	new OpenLayers.Bounds(-180,-90,180,90),
	new OpenLayers.Size(1023,610),
	{numZoomLevels:7, maxResolution:.625}
);
  • ./miller-1023×610.jpgを読み込む
  • jpgの表示の最大・最小をboundsで設定
  • sizeでjpegの大きさを設定

となります。WMSと同様に扱う事ができます。

また、もうひとつのimageは、

// Add another Image Layer
var image_layer_2 = new OpenLayers.Layer.Image(
	'Wallpaper 2',
	'./miller-round-s.jpg',
	new OpenLayers.Bounds(-180,-90,180,90),
	new OpenLayers.Size(1023,610),
	{numZoomLevels:7, maxResolution:.625, isBaseLayer:false, opacity:0.2}
);

optionでisBaseLayer:false, opacity:0.2を設定しています。

FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter3/chapter3_ex4_image_layer.htmlと入力すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_06_image03.jpg

な感じで表示されます。

今回のまとめ

OpenLayersによるLayer Class Subclass GridとImageの基本を学びました。
次回は、今回に引き続いてLayer Subclassについて、いつくかのexampleを学んでいきます。

今回のcodeでWMSと同じようにoptionやpropertyの設定を変更して、確認してみてください。

また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!

OpenLayers Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.