Monthly Archives: 5月 2013

OpenLayersのLayer Classについて[Chapter 6]

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

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

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

Layer Subclass

ここで、何度も出てきている、codeを見てみましょう。
var wms = OpenLayers.Layer.WMS(…)

LayerとWMSの間にあるピリオド'.'は重要です。
「LayerのSubclassとしてWMSを使いますよ」と言う意味になります。

では、Subclassとは何でしょうか?
[Chapter 1]でも書いていますが、Subclassは、基本的にあるbase class(基底クラス)から派生するClassです。
このbase class(基底クラス)はSubclassと呼ばれます。
Layer Classは、このようにすべてのSubclassのSuperclassです。
Subclassは、Superclassのpropertyをすべて継承します。
う~~ん、わかったようでわからない感じがしますね。

要するに、強引ですが、「Layer.以下でSubclassが使える。」と覚えておきましょう。 

また、WMS SubclassはLayer.Gridを継承したClassとなります。
詳細は、OpenLayers.Lsyer.WMSを参照してください。
そして、ここで初めてでてきたLayer.Gridについては、Layer.Gridを参照してください。

本当はClass構造図のようなものがあれば理解しやすいのですが。。。
どのClassを継承したSubclassなのかなど、きちんとまとまったものって存在しませんかね? 情報求む。

その他のLayerのtype

OpenLayersは多くの異なるLayer Classをサポートしています。
Layer.WMS ClassはWMS地図サーバーに接続するために使用されます。また、Layer.Google ClassはGoogle Map Serviceに接続するために使用されます。

OpenLayerはOpen Sourceであり、Versionによっては、Layer Subclassとして利用を推奨されないsubclassも存在します。

代表的なLayer Classについて見てみましょう。

Layer.ArcGIS93Rest

RESTインターフェース経由でArcGISサーバー9.3と対話することを可能にするクラスです。
Layer.GridからClassを継承するので、このClass object構造はLayer.WMSに似ています。

ArcGIS Layerについては、ArcGIS93Restを参照してください。

また、ArcGIS93RestのDocumentは、Esri ArcGIS93Restを参照してください。

Layer.ArcIMS

Layer.ArcIMSは、Layer.ArcGIS93Restに似ています。ArcIMS Mapping Serviceからデータを取得することができます。

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

また、ArcIMSのDocumentは、Esri ArcIMSを参照してください。

Layer.Google

やっとこさ、おなじみのGoogle Mapです。
Google Map APIを通してGoogle Mapを利用することができます。

では、ちょっとサンプルを追加して表示してみましょう。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter3¥にしておきます。
ファイル名は、chapter3_ex3_google_layer.htmlで保存します。

[html]
<!DOCTYPE html>
<html lang=’ja’>
<head>
<meta charset=’utf-8′ />
<script type=’text/javascript’ src=’http://localhost/openlayers/OpenLayers.js’></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type=’text/javascript’>

var map;

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

// Add a Google Maps Layer
var google_map_layer = new OpenLayers.Layer.Google(
‘Google Map Layer’,
{}
);

// Add the layer
map.addLayer(google_map_layer);

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

// Zoom the map to the max extent
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}

</script>
</head>

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

<script src=“http://maps.google.com/maps/api/js?sensor=false”></script>が、「Google Maps APIを使いますよ」の宣言になります。
これがないと、Google Mapsは使えません。

Goole Maps Layerの生成は、以下のcodeになります。

// Add a Google Maps Layer
var google_map_layer = new OpenLayers.Layer.Google(
	'Google Map Layer',
	{}
);

LayerのSubclassのGoogleを使っています。

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

な感じで表示されます。

今回のまとめ

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

今回のGoogle MapsはRoadを表示しましたが、SateliteやHydridなどを付け加えてみましょう。
‹ * google.maps.MapTypeId.ROADMAP (the default)

  • google.maps.MapTypeId.TERRAIN
  • google.maps.MapTypeId.HYBRID
  • google.maps.MapTypeId.SATELITE

でMapTypeIdを変更します。Let's try!

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

OpenLayers Tutorialの目次に戻る。

1 / 2512345...1020...最後 »

Social Widgets powered by AB-WebLog.com.