OpenLayersのControlについて[Chapter 18]

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

OpenLayersでThird Party APIsを使う。Spherical Mercator[Chapter 17] に引き続き、OpenLayersのControl Classについての基本を学んでおきます。

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

OpenLayer.Control

これまでのところ、mouseを使ってをdragするとmapが移動することを当たり前のように使ってきました。またはLayerSwitcherをclickすることでlayerの表示を変更したり、Zoomin、Zoomoutをmouseを使うことで制御してきました。
簡単に言えば、OpenLayersのControl Classは、mapをインタラクティブにする機能を持っています。
Controlは、多くの種類と多くの機能があります。また、簡単に独自のControlを作成する能力を持っています。

OpenLayerのContolについては、

  • どのようなコントロールがあるのか。
  • mapへのControlの追加。
  • Control ClassとそのSubclass。
  • Panelを使用したmap外にコントロールを追加。
  • カスタムコントロールの作成。

を[Chapter 18]~[Chapter 25]で学んでいきます。

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

Controlを使わない

まずは、OpenLayersのControlを使わないexampleを動かして見ます。
以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter6¥にしておきます。
ファイル名は、chapter6_ex1_no_controls.htmlで保存します。

[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 map with an empty array of controls
map = new OpenLayers.Map(‘map_element’, {
controls : []
});

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

map.addLayer(wms_layer);

// 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]

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

な感じでbrowser上にControl類が表示されず、mapが最初の表示の状態のままでControlが使えない状態となります。

このcodeで

//Create a map with an empty array of controls
map = new OpenLayers.Map('map_element', {
	controls : []
});

でmap objectを作成していますが、controls : []とすることでOpenLayers.Controlを使えないようにしています。

Contorolの追加

次に、mapにControlを追加してみます。

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

[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() {
var navigation_control = new OpenLayers.Control.Navigation({});
var controls_array = [
navigation_control,
new OpenLayers.Control.PanZoomBar({}),
new OpenLayers.Control.LayerSwitcher({}),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.MousePosition({})
];

//Create a map with the controls defined above
map = new OpenLayers.Map(‘map_element’, {
controls : controls_array
});

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

map.addLayer(wms);

//Add a control to the map
map.addControl(new OpenLayers.Control.ScaleLine());

//Create a overview map control
var overview_map = new OpenLayers.Control.OverviewMap();
//Add multiple controls to the map
map.addControls([
overview_map,
new OpenLayers.Control.KeyboardDefaults()
]);

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

</script>
</head>

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

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

な感じでControlが追加されたMapが表示されます。

LayerSwitcherをclickして表示させ、OverviewMapをclickして表示させると
blog.godo-tys.jp_wp-content_gallery_openlayers_18_image03.jpg

な感じでControlをactiveにすることができます。

このchapter6_ex2_multiple_controls.htmlは、OpenLayersのControlを追加する3つの方法を含んでいます。

Controlの追加方法1

まず、controls_array[]を定義して、mapに追加する方法です。
これは、

var navigation_control = new OpenLayers.Control.Navigation({});
var controls_array = [
	navigation_control,
	new OpenLayers.Control.PanZoomBar({}),
	new OpenLayers.Control.LayerSwitcher({}),
	new OpenLayers.Control.Permalink(),
	new OpenLayers.Control.MousePosition({})
];
 
//Create a map with the controls defined above
map = new OpenLayers.Map('map_element', {
	controls : controls_array
});

のcodeです。
ControlのSubclassについては、後の章で説明します。
New OpenLayers.Control.~でControlのobjectを作成しています。

Controlの追加方法2

まず、map.addControl(…)で、mapに追加する方法です。
これは、

//Add a control to the map
map.addControl(new OpenLayers.Control.ScaleLine());
});

のcodeです。
ControlのSubclassについては、後の章で説明します。
New OpenLayers.Control.~でControlのobjectを追加しています。

Controlの追加方法3

まず、map.addControls([…])で、mapに複数のControlを追加する方法です。
これは、

//Create a overview map control
var overview_map = new OpenLayers.Control.OverviewMap();
//Add multiple controls to the map
map.addControls([
	overview_map,
	new OpenLayers.Control.KeyboardDefaults()
]);

のcodeです。
ControlのSubclassについては、後の章で説明します。
New OpenLayers.Control.~でControlのobjectを作成しています。

Controlの削除

ここまでは、Controlの追加を学んできましたが、定義したControlを削除することもできます。
Controlを策する方法は、2通りあります
まずは、map.control[x]を使うやり方です。
map.removeControl(map.controls [X]);
でindex[x]を指定するやり方です。
もう一つの方法は、
map.removeControl(control_object);
でcontrol_objectを呼び出す方法です。

今回のまとめ

OpenLayersによるContorlの基本の基本について学びました。
次回は、OpenLayers Control Classの詳細について学んでいきます。

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

OpenLayers Tutorialの目次に戻る。

Comments are closed.

Social Widgets powered by AB-WebLog.com.