OpenLayersで複数のMapを使ってみる。[Chapter 34]

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

OpenLayersのMap eventについて[Chapter 33] に引き続き、OpenLayersの応用をやってみます。

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

今回で、8章のMap classが終わります。 Map classはOpenLayersのcoreな部分で重要です。

複数のMapを表示してみる。

まずは、2つmapを表示してみましょう。
カンの良い方は、単純に<div></div>をもう一つ追加すれば良いと思うはずです。

その通りで、

 <div id='map_1_element' style='height: 500px; float:left; width:400px;'></div>
 <div id='map_2_element' style='height: 500px; float:left; width:400px;'></div>
 <div style='clear:both;'></div>

として、div idを定義すればOKですね。

example codeは、以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter8¥にしておきます。
ファイル名は、chapter8_multiple_maps.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_1, map_2;

			function init() {
				//Create the first map object
				map_1 = new OpenLayers.Map('map_1_element', {});

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

				map_1.addLayer(wms_layer_all);

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

				//Create a second map
				map_2 = new OpenLayers.Map('map_2_element', {});

				//Clone the first map's layer
				var wms_layer_all_map_2 = wms_layer_all.clone();

				//Add the cloned layer to the second map object
				map_2.addLayer(wms_layer_all_map_2);

				//Zoom to some coordinate and zoom level on the second map
				map_2.setCenter(new OpenLayers.LonLat(-42, 42), 3);

			}

		</script>
	</head>

	<body onload='init();'>
		<div id='map_1_element' style='height: 500px; float:left; width:400px;'></div>
		<div id='map_2_element' style='height: 500px; float:left; width:400px;'></div>
		<div style='clear:both;'></div>
	</body>
</html>

ここでは、

var map_1, map_2;

でmap objectを2つ定義します。

そして、map_2の初期表示を

//Zoom to some coordinate and zoom level on the second map
map_2.setCenter(new OpenLayers.LonLat(-42, 42), 3);
});

として、setCenterで経度緯度(-42, 42)、zommlevel 3として表示させます。
ここで、setCenter(….)ですが、OpenLayers.Map.setCenterのように引数を持っていることがわかります。

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter8/chapter8_multiple_maps.htmlと入力すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_34_image01.jpg

ように2つのmapが表示されます。

このexampleでは、2つのmapをそれぞれ独立して動くだけですので、次に連動して動くように修正してみます。

複数のMapを連動してみる。

Mapの連動のexample codeは、以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter8¥にしておきます。
ファイル名は、chapter8_multiple_maps_final.htmlで保存します。

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

			function init() {
				//Create the first map object
				map_1 = new OpenLayers.Map('map_1_element', {
					controls : [
						new OpenLayers.Control.Navigation(), 
						new OpenLayers.Control.PanZoomBar()],
					maxResolution : 0.0054931640625,
					minResolution : 0.00034332275390625
				});

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

				map_1.addLayer(wms_layer_all);

				var map_center = new OpenLayers.LonLat(-120, 34);

				if (!map_1.getCenter()) {
					map_1.setCenter(map_center);
				}

				//Create a second map
				map_2 = new OpenLayers.Map('map_2_element', {
					controls : [
						new OpenLayers.Control.Navigation(), 
						new OpenLayers.Control.PanZoomBar()],
					maxResolution : 0.17578125,
					minResolution : 0.0439453125
				});

				//Clone the first map's layer
				var wms_layer_all_map_2 = wms_layer_all.clone();

				//Add the cloned layer to the second map object
				map_2.addLayer(wms_layer_all_map_2);

				//Zoom to some coordinate and zoom level on the second map
				map_2.setCenter(map_center);

				//Create event to update map centers
				function update_map_1(event) {
					map_2.setCenter(map_1.getCenter(), null, true);
				}

				function update_map_2(event) {
					map_1.setCenter(map_2.getCenter(), null, true);
				}

				//Register map events
				map_1.events.register('moveend', map_1, update_map_1);
				map_2.events.register('moveend', map_2, update_map_2);

			}

		</script>
	</head>

	<body onload='init();'>
		<div id='map_1_element' style='height: 500px; float:left; width:400px;'></div>
		<div id='map_2_element' style='height: 500px; float:left; width:400px;'></div>
		<div style='clear:both;'></div>
	</body>
</html>

codeでまずは、map_1のMap objectを作成します。

//Create the first map object
map_1 = new OpenLayers.Map('map_1_element', {
	controls : [
		new OpenLayers.Control.Navigation(),
		new OpenLayers.Control.PanZoomBar()],
	maxResolution : 0.0054931640625,
	minResolution : 0.00034332275390625
});
 
//Create a base layer
var wms_layer_all = new OpenLayers.Layer.WMS(
	'OpenLayers WMS',
	'http://vmap0.tiles.osgeo.org/wms/vmap0', {
	layers : 'basic'
}, {});
 
map_1.addLayer(wms_layer_all);
 
var map_center = new OpenLayers.LonLat(-120, 34);
 
if (!map_1.getCenter()) {
	map_1.setCenter(map_center);
}

maxResolutionとminResolutionで表示解像度を設定します。そしてmapCenterを経度緯度(-120, 34)に設定します。

次に、map_2のMap objectを作成します。

//Create a second map
map_2 = new OpenLayers.Map('map_2_element', {
	controls : [
		new OpenLayers.Control.Navigation(),
		new OpenLayers.Control.PanZoomBar()],
	maxResolution : 0.17578125,
	minResolution : 0.0439453125
});
 
//Clone the first map's layer
var wms_layer_all_map_2 = wms_layer_all.clone();
 
//Add the cloned layer to the second map object
map_2.addLayer(wms_layer_all_map_2);
 
//Zoom to some coordinate and zoom level on the second map
map_2.setCenter(map_center);

map_1のmaxResolutionとminResolutionとは違う表示解像度を設定します。
そして、var wms_layer_all_map_2 = wms_layer_all.clone();でmap_1のcloneを作成します。

次に、functionとevents,registerを定義します。

//Create event to update map centers
function update_map_1(event) {
	map_2.setCenter(map_1.getCenter(), null, true);
}
 
function update_map_2(event) {
	map_1.setCenter(map_2.getCenter(), null, true);
}
 
//Register map events
map_1.events.register('moveend', map_1, update_map_1);
map_2.events.register('moveend', map_2, update_map_2);

update_map_1は、map_2.setCenterのcenterをmap_1.getCenter()に移動させ、update_map_2は、map_1.setCenterのcenterをmap_2.getCenter()に移動させ、連動させます。map.events.registerでeventを定義して、eventを登録することで、eventを捕まえます。

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter8/chapter8_ex3_events.htmlと入力して、mapをzoomさせると、
blog.godo-tys.jp_wp-content_gallery_openlayers_34_image02.jpg

ように2つのmapが表示されます。

そして、zoomやpanのeventが発生すると、
blog.godo-tys.jp_wp-content_gallery_openlayers_34_image03.jpg

ように2つのmapは連動して動きます。
このようにeventListenersmap.events.registerを使ってmap eventを捕まえることができます。

jsfiddleにMulti Map exampleを参考に載せておきます。

今回のまとめ

OpenLayersのMapの応用について学びました。ここまでで、8章が終わりました。
次回は、いよいよvector layerについて基本を学んでいきます。

また、本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.