OpenLayersのMap eventについて[Chapter 33]

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

OpenLayersのMap functionsについて[Chapter 32] に引き続き、OpenLayersのMap eventについての基本を学んでおきます。

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

OpenLayers Mapについての詳細は、OpenLayers.Map を参考にしてください。

Browserのeventに関しては、Mozilla Developer Networkが参考になります。

Map event types

Eventのtypeについては以下のeventがあります。

  1. addlayer: This event is triggered after a layer is added. Event object: Includes a layer property that references the added layer.
  2. changebaselayer: Triggered after the base layer changes.
  3. changelayer: This event gets triggered after a layer's properties are changed. Specifically, it gets triggered whenever its name, order, opacity, parameters, or visibility is changed. Event object: Includes a layer property which refers to the changed layer, and a property property which refers to the type of property that was changed (order, opacity, etc.).
  4. mousemove: The event is triggered whenever the mouse is moved inside the map.
  5. mouseout: This event is triggered on mouseout; whenever your mouse leaves the map div.
  6. mouseover: This gets triggered whenever the map gets a mouseover event; whenever your mouse first enters the map div.
  7. movestart: Whenever the start of a drag, pan, or zoom occurs, this event is triggered. This event refers to the movement of the map itself, not just the mouse.
  8. moveend: Triggered after a drag, pan, or zoom is finished. This event refers to the movement of the map itself, not just the mouse.
  9. move: This event is triggered on any drag, pan, or zoom of the map.
  10. preaddlayer: This is triggered before a layer is added. Event object: Includes a layer property that references the layer to be added.
  11. removelayer: When a layer has been removed from the map, this event is triggered. Event object: Includes a layer property that references the layer that was removed.
  12. zoomend: This event is triggered after a map zoom completes.

Map eventを使う

Map eventを使うには

  1. map objectを作成する際に、eventListenersを使う方法
  2. map.events.register(type, obj, lisenter)を使う方法

の2通りの方法があります。

eventListenersを使う方法

まずは、eventListenersを使う方法をexample codeを参考にみてみましょう。

eventListeners example code

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

			function init() {

				//Define a function to call for the event
				function alert_on_zoom(event) {
					alert('Map zoomed');
				}

				//Add event listener to map
				map = new OpenLayers.Map('map_element', {
					eventListeners : {
						'zoomend' : alert_on_zoom
					}
				});

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

				map.addLayers([wms_layer_all]);

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

			}

		</script>
	</head>

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

codeでまずは、functionを定義します。
ここでは、

//Define a function to call for the event
function alert_on_zoom(event) {
	alert('Map zoomed');
}

alert_on_zoomが呼ばれると、alert('Map zoomed')でdialogが表示される簡単なfunctionです。

これを、呼び出すために、map objectに

//Add event listener to map
map = new OpenLayers.Map('map_element', {
	eventListeners : {
		'zoomend' : alert_on_zoom
	}
});

eventListenersを定義します。
ここでは、zoomend eventが発生した場合に、alert_on_zoom functionが呼び出されることになります。

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

ようにalert dialogが表示されます。
このようにeventListenersを使ってmap eventを捕まえることができます。

map.events.registerを使う方法

map.events.registerを使う方法のfunctionの呼び出しは、

map.events.register(type, object, listener);

の引数のように呼び出すことになります。

functionとそのcallは、

//function
function alert_on_zoom(event){ alert('Map zoomed'); }
//event call
map.events.register('zoomend', map, alert_on_zoom);

のように定義します。

Event example code

Map eventに関して、もう少しだけ踏み込んでexample codeをみてみましょう。

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

			function init() {
				//Create a listener function
				function zoomend_event(event) {
					alert('Done zooming');
				}

				function update_opacity(event) {
					map.layers[0].setOpacity(Math.random());
				}

				//Create a map with an empty array of controls
				map = new OpenLayers.Map('map_element', {
					eventListeners : {
						'zoomend' : zoomend_event,
						'moveend' : update_opacity
					}
				});

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

				function show_layer_info(event) {
					alert('Layer changed: ' 
						+ event.layer.name 
						+ ' | Property Changed: ' 
						+ event.property);
				}


				map.events.register('changelayer', map, show_layer_info);

				map.addLayer(wms_layer_all);

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

			}

		</script>
	</head>

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

codeでまずは、eventListenerのfunctionを2つ定義します。
ここでは、

//Create a listener function
function zoomend_event(event) {
	alert('Done zooming');
}
 
function update_opacity(event) {
	map.layers[0].setOpacity(Math.random());
}

zoomend_eventが呼ばれると、alert('Map zooming')でdialogが表示される簡単なfunctionです。
update_opacityが呼ばれると、mapの表示透過率をランダムに変更するfunctionです。

これを、呼び出すために、map objectに

//Create a map with an empty array of controls
map = new OpenLayers.Map('map_element', {
	eventListeners : {
		'zoomend' : zoomend_event,
		'moveend' : update_opacity
	}
});

eventListenersを定義します。
ここでは、zoomend eventが発生した場合に、zoomend_event functionが呼び出されることになります。そして、moveend eventが発生した場合に、update_opacity functionが呼び出されることになります。

Eventを呼び出す方法として、map.events.registerを使ってfunctionとして

function show_layer_info(event) {
	alert('Layer changed: '
		+ event.layer.name
		+ ' | Property Changed: '
		+ event.property);
}

のようにfunctionを作成します。これは、Layer changedされたときにalert dialogを表示するものです。

そして、このshow_layer_infoを

map.events.register('changelayer', map, show_layer_info);

でeventを登録することで、eventを捕まえます。

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

ようにlayer changeのalert dialogが表示されます。

blog.godo-tys.jp_wp-content_gallery_openlayers_33_image03.jpg

ようにlayer changeのalert dialogが表示されます。

blog.godo-tys.jp_wp-content_gallery_openlayers_33_image04.jpg

ようにzoomingのalert dialogが表示されます。
このようにeventListenersmap.events.registerを使ってmap eventを捕まえることができます。

今回のまとめ

OpenLayersのMap eventの基本について概要を学びました。Map eventを使うことで、userの操作時のeventを捕まえる事ができます。
次回は、Map 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.