OpenLayersのControlのPanelsについて[Chapter 23]

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

OpenLayersのControl Subclassについて-3[Capter 22] に引き続き、OpenLayersのControl Panelについての基本を学んでおきます。

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

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

Panels

これまでのところ、最も一般的なcontrolを取り上げました。
まだ説明controlで、別のタイプのpanel controlがあります。
これは、コンテナというか、webbrowserに表示されているmapの外側にcontrol追加して、group化プにすることができるcontrolです。
PanPanelZoomPanel controlは、実際に他のcontrolを含んでいるpanelです。

Control typs

Panelでは、各controlは、icon(スタイルを設定することができます)で表される。
iconがclickされたときに、そのcontrolのactivateControl methodが呼び出される。
activateControlを呼び出すためことは非常に重要であり、controlが自分自身でアクティブになりません。いままでのcontrolのいくつかは、panel内に配置することができます。

  • OpenLayers.Control.TYPE_BUTTON: これは、ボタンときにクリックされた、いくつかのイベントが実行されるようなbutton controlです。例えば、ZoomInとZoomOutがこのタイプのbuttonです。ZoomPanel controlで発生しました。
  • OpenLayers.Control.TYPE_TOGGLE: このようなcontrolは、clickによってアクティブ化され、別のClickでoffになっています。これらのcontrolのいずれかをonにすると、他のコントロールにはonできません。同じpanelで、できるだけ多くのtoggle controlを持つことができます。
  • OpenLayers.Control.TYPE_TOOL: このタイプのcontrolは、上記のtoggle controlのようですが、toolタイプのcontrolは、一括でアクティブ化にすることができます。例えば、ZoomBox controlは、このタイプのcontrolです。

では、panelを作成して、controlを追加する方法を見てみましょう。

Using Panels example code

Panelを使ったexample codeは、以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter6¥にしておきます。
ファイル名は、chapter6_ex5_panel.htmlで保存します。

<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<script type='text/javascript' src='http://localhost/openlayers/OpenLayers.js'></script>
		<style type='text/css'>
			/*Navigation Control*/
			.olControlNavigationItemActive {
				background: #226699 url('http://localhost/openlayers/theme/default/img/pan_on.png');
				width: 22px;
				height: 22px;
			}
			.olControlNavigationItemInactive {
				background: #996622 url('http://localhost/openlayers/theme/default/img/pan_off.png');
				width: 22px;
				height: 22px;
			}

			/*Zoom Box Control*/
			.olControlZoomBoxItemInactive {
				width: 22px;
				height: 22px;
				background: #999933 url('http://localhost/openlayers/img/drag-rectangle-off.png');
			}
			.olControlZoomBoxItemActive {
				width: 22px;
				height: 22px;
				background: #999966 url('http://localhost/openlayers/img/drag-rectangle-on.png');
			}

			/*Zoom to Max Extent Control*/
			.olControlZoomToMaxExtentItemInactive {
				width: 18px;
				height: 18px;
				background: #333399 url('http://localhost/openlayers/img/zoom-world-mini.png');
			}
		</style>
		<script type='text/javascript'>
			var map;

			function init() {
				map = new OpenLayers.Map('map_element', {});

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

				map.addLayer(wms_base);

				var navigation_control = new OpenLayers.Control.Navigation();

				var control_panel = new OpenLayers.Control.Panel({
					div : document.getElementById('panel_div'),
					defaultControl : navigation_control
				});

				//Add some controls to it
				control_panel.addControls([
					navigation_control, 
					new OpenLayers.Control.ZoomBox(), 
					new OpenLayers.Control.ZoomToMaxExtent()
				])

				//Add the Panel to the map
				map.addControl(control_panel);

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

		</script>
	</head>

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

上記codeで、

<style type='text/css'>
	/*Navigation Control*/
	.olControlNavigationItemActive {
		background: #226699 url('http://localhost/openlayers/theme/default/img/pan_on.png');
		width: 22px;
		height: 22px;
	}
	.olControlNavigationItemInactive {
		background: #996622 url('http://localhost/openlayers/theme/default/img/pan_off.png');
		width: 22px;
		height: 22px;
	}
 
	/*Zoom Box Control*/
	.olControlZoomBoxItemInactive {
		width: 22px;
		height: 22px;
		background: #999933 url('http://localhost/openlayers/img/drag-rectangle-off.png');
	}
	.olControlZoomBoxItemActive {
		width: 22px;
		height: 22px;
		background: #999966 url('http://localhost/openlayers/img/drag-rectangle-on.png');
	}
 
	/*Zoom to Max Extent Control*/
	.olControlZoomToMaxExtentItemInactive {
		width: 18px;
		height: 18px;
		background: #333399 url('http://localhost/openlayers/img/zoom-world-mini.png');
	}
</style>

の部分でiconの設定をcssで定義します。

Panelは

<div id='panel_div'></div>

で定義した<div>に書き込まれます。

Navigation controlは

var navigation_control = new OpenLayers.Control.Navigation();
 
var control_panel = new OpenLayers.Control.Panel({
	div : document.getElementById('panel_div'),
	defaultControl : navigation_control
});

で定義して、OpenLayers.Control.Panelに追加します。

control_panelに

//Add some controls to it
control_panel.addControls([
	navigation_control,
	new OpenLayers.Control.ZoomBox(),
	new OpenLayers.Control.ZoomToMaxExtent()
])

3つのcontrolを追加します。

最終的に、

//Add the Panel to the map
map.addControl(control_panel);

でcontrolを追加します。

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter6/chapter6_ex5_panel.htmlと入力して、FireFoxを開くと
blog.godo-tys.jp_wp-content_gallery_openlayers_23_image01.jpg

な感じでbrowser上にmapと定義したpanelが表示されます。

panelには、
blog.godo-tys.jp_wp-content_gallery_openlayers_23_image03.jpg

の3つのiconが追加されます。
それぞれは、

  1. Pan(移動)
  2. ZoomIn(拡大)
  3. ZoomToMaxExtent(全体表示)

となります。
ZoomIn iconをclickすると、map上でZoomIn範囲をdragして
blog.godo-tys.jp_wp-content_gallery_openlayers_23_image02.jpg

のように設定することができます。

OpenLayers.Control.Panel

上記のcodeで見たように、panelを作成し、mapの外に<div>要素でpanelを配置することができることがわかりました。
<div>のpropertyを指定しない場合は、panelはmapに直接追加されます。
ここで作成したpanelは非常に単純でしたが、さらに高度なpanelを作成することはそれほど難しいものではありません。

高度なpanelを作成するために、panel classのpropertiesとmethodsを使うことになります。

Panel properties

Name Type Description Default Value
controls {Array{OpenLayers.Control}} Specifies an array of control objects that get added to the panel. As in the previous example, you can either instantiate objects in the call itself (via new OpenLayers.Control) or use a previously created object. When you create a panel, you need to either use this property to specify the controls the panel receives, or use the panel's addControls method. Example: controls: [new OpenLayers.Control.Navigation(),new OpenLayers.Control.ZoomBox()] []
autoActivate {Boolean} Determines if the panel should be activated when it is added to the map. If this is not set to true, you must call the panel's activate() method before you use the panel. true
defaultControl {OpenLayers.Control} Specifies the default control to be activated. This should point to a control that the panel will or does own. Like in the example above, you should pass in a control object that has already been instantiated. If you instantiate an object when specifying the value, instead of passing in an already created one, nothing will happen because the default control would be pointing to a different object than one owned by the panel. Example: defaultControl: my_control_object null
saveState {Boolean} If this property is true, then the active state of the controls inside the panel (i.e., their state) will be saved if the panel is deactivated, and restored if it is activated. It will also override the defaultControl property (if set) after the first activation, restoring whatever controls were active instead. false

Panel function

Panel classは2つの関数を持っています。

  • Asctivate(): この関数は、panel controlがアクティブになります。defaultでは、自動的にアクティブプロパティがtrueに設定され、この関数が自動的に呼び出されます。Panelは、defaultで有効いなっていない場合は、panelを使用するには、この関数を呼び出す必要があります。
  • ActivateControl(): この関数は、コントロールが渡された場合にアクティブになります。渡されたcontrolは、panelに属するcontrolである必要があります。これは、panel内部のcontrolがuserによってclickされたときに呼び出される関数です。手動でcontrolをアクティブにしたい場合は、この関数を呼び出します。

今回のまとめ

OpenLayersによるControl Subclass Panelの基本について学びました。
次回は、引き続きOpenLayers.Controlのcustum controlについて学んでいきます。

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