OpenLayersのVector Layer classについて-4[Chapter 45]

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

OpenLayersのControl.SelectFeature classについて[Chapter 44] に引き続き、OpenLayersのVector Layer classについて基本を学んでいきます。

この章以降は、

  • どのようにvector layerを描いているか?
  • Vector Classとは?
  • GeometryとFeature classについて
  • Strategy,Protocol,Format classの使い方 → 今回はここ

について順番に学んでいきます。

OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。

Format, protocol, and strategy classes

これまでのところ、geometryとfeature classを使用しました。しかし、Vector layerが作成された後、より有用なvector classに注目しましょう。

Vector layerを使う場合、Format、protoclおよびstrategy classを利用する必要があります。
これらの3つのクラスを使用すると、さらにVector layerの振る舞いをコントロールすることができます。
例えば、
‹ – 外部ソースからのdataの読み込み(KML files, GeoJSON files, WFS services, など)

  1. 作成したKMLや他のfile format dataの保存
  2. Cluster strategyを使ったpointのグループ化
  3. よりinteractiveなweb-mapping applicationsの作成

のような事が可能となります。

Brief overview of the three classes

Format、 protocol、strategy classのVector layer classでの振る舞いについて概要をまとめておきます。

Protocol class

Protocl classは、vector layerがdataのsourceとどのように通信するかcontrolします。
Geometry classのように、protrol classのsubclassを使用します。
使用される2つの共通のsubclassはProtocol.HTTPとProtocol.WFSです。
HTTP protcol classは、vector datatp直接通信することを可能にします。また、WFS protcol classは、WFSサービスと通信を行います。

Format class

Format classは、ファイル(KMLファイルのような)を使用させ、そのファイル中のデータを実際のfeature objectとして地図上に展開します。
さらに、既存のfeature objectを、KML、GeoJSONなどのファイル形式に変換することができます。

より技術的に、format classは、連続的なfeature dataおよび不連続なfeature dataを扱います。
連続的なfeature dataは、codeからobjectを抽出し、それらをファイルのようなものに変えることが基本であり、人間の判読可能なstringです。したがって、それらのobjaectはcodeの外部でアクセスすることができます。
不連続なfeature dataは連続的なfeature dataとは逆で、fileかStringから、codeで使用することができるobjectに変えます。

Format classを使用すると、KML、GeoJSON、GeoRSS、ArcXMLなどファイル形式のように異なるfeature dataを連続および不連続で取り扱うことができます。

Strategy class

Strategy classは、serverへのリクエストがどのようにセット・アップされるかcontrolするために使用されます。次に、データをどうするべきものはサーバーから返りました。
Starategy classの基底クラスのsubclassと通信を行います。
Strategy.BBOXとStrategy.Clusterのように、使用することができる多数のsubclassがあります。
ProtcolとFormatのclassと異なり、subclassのうち1つを使用することで、strategy calssで、多くのsterategyを使用することができます。

明確にするために、Strategy.BBOX classが何を行うか見ましょう。
Strategy classはリクエストをセット・アップするために使用され、その応答で何を行うか決めます。
Strategy.BBOXクラスは1つのsubclassです。
例えば、WFSサーバーを使用すると、私たちは、リクエストを見える地図範囲内のデータのみを求めることをサーバーに送信しますが、その際にStrategy.BBOX classを使用することができます。
BBOXクラスが、リクエストをセット・アップする方法を決定します。

Strategy classがする別のことは何がサーバーから返されたデータをcontrolすることです。
Layerが、それがdataのグループ化する場合に、Strategy.Clusterのようにclasを使用するなどです。
そして、サーバーに対する反応の結果に何が起こるかなどをcontrolするために支援します。

どのように3つのclassと通信するか

さて、これらのクラスがどのように対話するかということが考えられなす。
Protocl classは、dataがクライアント間で通信されることを決めます。
Dataは、Format classによって連続し不連続のformatにあります。
最後に、Strategy classは、vector layerどのようににサーバーへのリクエストをセット・アップするように命じます。

3つのclassをすべて使用して、どのようにvector layerを作成することができるかを見ましょう。
下記はGeoJSONファイルからのfeature dataを読み込むcodeです。
異なるサーバー上にある場合、ファイルは同じに置かれるに違いありません。あるいは、外部URLを指摘したければ、proxy hostを必要とするでしょう。

var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
   protocol: new OpenLayers.Protocol.HTTP({
      url: 'some_data.json',
      format: new OpenLayers.Format.GeoJSON({})
  }),
  strategies: [new OpenLayers.Strategy.Fixed()]
});

上記のcodeはHTTP protcol classを使用し、GeoJSON formatを使用します。
formatがどのように実際にprotcol objectの一部であるかに注目してください。
Fixed Strategy classも使用されます。

GeoJSONを使ったVector Layer example code

protocol classを使った簡単なexample codeを作成してみましょう。以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayer¥chapter9¥にしておきます。
ファイル名は、chapter9_ex6_geojson.htmlで保存します。

 
<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<script type='text/javascript' src='http://localhost/openlayers/OpenLayers.js'></script>
		<script type='text/javascript'>
			var map, vector_layer;

			function init() {
				//Create a map with an empty array of controls
				map = new OpenLayers.Map('map_element');

				//Create a base layer
				var wms_layer = new OpenLayers.Layer.WMS(
					'OpenLayers WMS', 
					'http://vmap0.tiles.osgeo.org/wms/vmap0', {
					layers : 'basic'
				}, {});

				map.addLayer(wms_layer);

				//Create a Format object
				var vector_format = new OpenLayers.Format.GeoJSON({});

				//Create a Protocol object using the format object just created
				var vector_protocol = new OpenLayers.Protocol.HTTP({
					url : 'ex5_data.json',
					format : vector_format
				});

				//Create an array of strategy objects
				var vector_strategies = [new OpenLayers.Strategy.Fixed()];

				//Create a vector layer that contains a Format, Protocol, and Strategy class
				var vector_layer = new OpenLayers.Layer.Vector(
					'More Advanced Vector Layer', {
					protocol : vector_protocol,
					strategies : vector_strategies
				});

				map.addLayer(vector_layer);

				if (!map.getCenter()) {
					map.zoomToMaxExtent();
				}

			}

		</script>
	</head>

	<body onload='init();'>
		<div id='map_element' style='width: 600px; height: 400px;'></div>
	</body>
</html>

codeでまずは、

//Create a Format object
var vector_format = new OpenLayers.Format.GeoJSON({});

のように Format objectを定義します。
GeoJSONを使うように宣言します。

次に、vector_protocolを

var vector_protocol = new OpenLayers.Protocol.HTTP({
    url: 'ex5_data.json',
    format: vector_format
});

で定義します。urlがGeoJSONのソースとなり、formatでvector_formatを使うようにして定義します。

そして、strategy objectsを

//Create an array of strategy objects
var vector_strategies = [new OpenLayers.Strategy.Fixed()];

のようにvector_strategiesを定義します。

そして、vector_layerに、

//Create a vector layer that contains a Format, Protocol, and Strategy class
vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
    protocol: vector_protocol,
    strategies: vector_strategies
});
 
map.addLayer(vector_layer);

Format, Protocol, and Strategy classからなるOpenLayers.Layer.Vectorを作成します。
最後に、map.addLayerでLayerを追加します。

ここで読み込むGeoJSONデータは、

{
    "type": "FeatureCollection",
    "features": [
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[-81, 42]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[-71, -7]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[-21, 63]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[19, -24]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[4, 42]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[-116, 61]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[-17, 40]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[32, 35]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[83, 38]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[133, -28]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[-53, -18]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[99, 3]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[137, 42]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[77, 21]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[83, 31]}},
        {"type":"Feature","properties":{}, "geometry":{"type":"Point", "coordinates":[24, 52]}}
    ]
}

として、保存先は、c:¥ms4w¥apache¥htdocs¥openlayer¥chapter9¥にしておきます。
ファイル名は、ex5_data.jsonとして、chapter9_ex6_geojson.htmlと同じfolderに保存します。

保存後、FireFoxを立ち上げて、http://localhost/openlayers/chapter9/chapter9_ex6_geojson.htmlと入力すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_45_image01.jpg

ようにvactor layerが追加されて、GeoJSON dataが読み込まれてmapに表示されます。

今回のまとめ

OpenLayersの簡単なVector Layer classのStrategy,Protocol,Format classについて学びました。(ちょい手抜きの部分もありますが。。。)
次回は、Format、protocolとstrategy classについて若干ですが、3つのclassを使った応用を学んでいきます。

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

OpenLayers Tutorialの目次に戻る。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.