Category Archives: ExtJS - Page 4

GeoExt1.1でClick Eventを追加してみる。[Chapter 7]

GeoExt1.1を使ってみる。[Chapter 7]

今回は、GeoExtのexampleのModified Popup Exampleを使ってmouse click時のeventを追加してみます。

セットアップと入手については、GeoExt1.1 [Chapter 1] を参考にしてください。

OpenLayers click eventについて

まずは、OpenLayers Click Event Exampleを動かしてみます。
これは、OpenLayersだけでclickのeventを書いたものです。
OpenLayers.Controlを継承して、OpenLayers.Control.Clickと言うclassを作成します。
click時動作の定義だけを抜き出すと、

 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },
 
                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    );
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.trigger
                        }, this.handlerOptions
                    );
                },
 
                trigger: function(e) {
                    var lonlat = map.getLonLatFromPixel(e.xy);
                    alert("You clicked near " + lonlat.lat + " N, " +
                                              + lonlat.lon + " E");
                }
 
            });

ここでは、以下の

  • defaultHandlerOptions
  • initialize
  • trigger

処理を定義しています。
trigerでclickしたときにwindowが開いて、緯度経度が表示されます。

そして、ここで定義したOpenLayers.Control.Click classは、function init()内で

 var click = new OpenLayers.Control.Click();
                map.addControl(click);
                click.activate();

としてclick objectとしてインスタンスを作成して、addControlで追加しなければなりません。

詳しくは、OpenStreetMap API 実験室OpenStreetMap API 実験室などを参考にしてください。

では、これを使って、GeoExtのpopup windowに表示してみます。

popup windowに表示

まずは、OpenLayers.Control.Click classの定義は、

// simple control to handle user clicks on the map
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
 
defaultHandlerOptions : {
single : true,
double : false,
pixelTolerance : 0,
stopSingle : true
},
 
initialize : function(options) {
 
this.handlerOptions = OpenLayers.Util.extend(options
&& options.handlerOptions || {},
this.defaultHandlerOptions);
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.handler = new OpenLayers.Handler.Click(this, {
click : this.trigger
}, this.handlerOptions);
}
});

とします。
triggerは、popup windowを表示するので、ここでは定義しません。

次に、変数の定義とExt.onReady(function()…);の部分は、

var mapPanel, popup, map;
 
// main script
Ext.onReady(function() {
 
function addToPopup(loc) {
 
// create the popup if it doesn't exist
if (!popup) {
popup = new GeoExt.Popup({
title : "Popup",
width : 200,
maximizable : true,
collapsible : true,
map : map,
//map : mapPanel.map,
anchored : true,
listeners : {
close : function() {
	// closing a popup destroys it, but our
	// reference is truthy
	popup = null;
}
}
});
}
 
// add some content to the popup (this can be any Ext component)
popup.add({
xtype : "box",
autoEl : {
html : "クリックの緯度経度 (" + loc.lon.toFixed(2)
	+ ", " + loc.lat.toFixed(2) + ")"
}
});
 
// reset the popup's location
popup.location = loc;
 
popup.doLayout();
 
// since the popup is anchored, calling show will move popup to
// this location
popup.show();
};
 
// mapの作成
map = new OpenLayers.Map();
// layerの作成
var wmsLayer = new OpenLayers.Layer.WMS("Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms", {
layers : "bluemarble"
});
map.addLayers([wmsLayer]);
 
// controlの作成
var control = new OpenLayers.Control.Click({
trigger : function(evt) {
var loc = map.getLonLatFromViewPortPx(evt.xy);
addToPopup(loc);
}
});
// controlの追加とアクティブ化
map.addControl(control);
control.activate();
 
// create Ext window including a map panel
var mapPanel = new GeoExt.MapPanel({
title : "Map",
renderTo : "container",
width : 600,
height : 480,
map : map,
layers : [wmsLayer],
center : [135, 35],
zoom : 4
});
 
});

ここで、function addToPopup(loc) {…};でmouse click時のpopup windowのfunctionを定義します。
codeは理解できるとかと思います。
簡単に書くと、「popup windowが開いてなければ、windowを作成して緯度経度を表示する。window closeがclickされれば、popup windowを破棄する。」となります。

後は、今までのtutorialでやってきた、mapを作成して、panelに入れていきます。

また、contorlの作成部分で未定義のtriggerを作成します。

// controlの作成
var control = new OpenLayers.Control.Click({
  trigger : function(evt) {
      var loc = map.getLonLatFromViewPortPx(evt.xy);
      addToPopup(loc);
    }
  }
);

でmouse click時の処理を追加しておきます。

htmlファイルは今までのものを参考にしてもらって、
FireFoxで実行すると、
blog.godo-tys.jp_wp-content_gallery_geoext_07_image01.jpg

な感じです。

mapPanel上でmouse clickすると、
blog.godo-tys.jp_wp-content_gallery_geoext_07_image02.jpg

な感じで、clickした場所の緯度経度がpopup windowにclick毎に順に追加されます。

今回のまとめ

GeoExt.PopupとOpenLayers.Classを使ってmouse click時のpopup windowの表示をしてみました。
これを応用して、mouse double clickやmoveなどのeventの追加ができるようになりますね。

今回のbasemapは、exampleの地図を使いましたが、OpenStreetMap電子国土を使うこともできますので、是非tryしてください。

次回は、GeoExt.Actionのevent操作にtryしてみます。

GeoExt1.1 Tutorialの目次に戻る。

Social Widgets powered by AB-WebLog.com.