GeoExt1.1でTree Actionを使ってみる。[Chapter 9]

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

今回は、GeoExtのexampleのtreeActionの操作、tree action exampleを使ってtree actionを作成してみます。

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

Ext.namespaceについて

まずは、tree action exampleのtree-action.jsのsourceを見ておきます。

ここで、1行目に、

Ext.namespace("GeoExt.examples");

が定義されています。
これは、namespaceを使ったobjectの定義になります。
名前空間GeoExt.examplesを指定するというのが、コードを見てわかりやすくなっています。

次に、

GeoExt.examples.onAction = function(node, action, evt) {
	var layer = node.layer;
	switch (action) {
		case "down" :
			layer.map.raiseLayer(layer, -1);
			break;
		case "up" :
			layer.map.raiseLayer(layer, +1);
			break;
		case "delete" :
			layer.destroy();
			break;
	}
};

で、GeoExt.examplesにactionを定義します。
ここでは、layer treeがup,down,deleteされた時の処理を書いています。

次に、UIを定義します。

// custom layer node UI class
GeoExt.examples.LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI,
		new GeoExt.tree.TreeNodeUIEventMixin());

namespace等については、http://www.openspc2.org/reibun/ExtJS/index.html|ExtJS例文辞典]]やExt JSサンプル集や書籍等で確認しておいてください。

Tree Actionを追加する。

では、、Ext.onReadyでtree actionを追加します。今回は、GeoExtのexampleのwmsをそのまま使います。
長いですが、javascriptは、

Ext.onReady(function() {
Ext.QuickTips.init();
 
// mapの作成
var map = new OpenLayers.Map();
 
// Tasmania State Boundaries Layerの作成
// Base Layer
var TasmaniaLayer = new OpenLayers.Layer.WMS("Tasmania State Boundaries",
"http://demo.opengeo.org/geoserver/wms", {
layers : "topp:tasmania_state_boundaries"
}, {
buffer : 0,
// exclude this layer from layer container nodes
displayInLayerSwitcher : false
});
 
// Water Layerの作成
var WaterLayer = new OpenLayers.Layer.WMS("Water",
"http://demo.opengeo.org/geoserver/wms", {
layers : "topp:tasmania_water_bodies",
transparent : true,
format : "image/gif"
}, {
buffer : 0
});
 
// Cities Layerの作成
var CitiesLayer = new OpenLayers.Layer.WMS("Cities",
"http://demo.opengeo.org/geoserver/wms", {
layers : "topp:tasmania_cities",
transparent : true,
format : "image/gif"
}, {
buffer : 0
});
 
// Tasmania Roads Layerの作成
var RoadsLayer = new OpenLayers.Layer.WMS("Tasmania Roads",
"http://demo.opengeo.org/geoserver/wms", {
layers : "topp:tasmania_roads",
transparent : true,
format : "image/gif"
}, {
buffer : 0
});
 
// layerの追加
map.addLayers([TasmaniaLayer, WaterLayer, RoadsLayer, CitiesLayer]);
// map center
map.setCenter(new OpenLayers.LonLat(146.1569825, -41.6109735));
 
// controlの追加
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
 
// the map panel
// centerPanel
var mapPanel = new GeoExt.MapPanel({
title : 'Map Window',
border : true,
region : "center",
zoom : 7,
map : map
});
 
// the layer tree panel. In this tree the node actions are set using
// the loader's "baseAttrs" property.
// westPanel
var tree = new Ext.tree.TreePanel({
region : "west",
width : 250,
title : "Layer Tree",
loader : {
applyLoader : false,
uiProviders : {
"ui" : GeoExt.examples.LayerNodeUI
}
},
// apply the tree node actions plugin to layer nodes
plugins : [{
ptype : "gx_treenodeactions",
listeners : {
action : GeoExt.examples.onAction
}
}],
root : {
nodeType : "gx_layercontainer",
loader : {
baseAttrs : {
radioGroup : "radiogroup",
uiProvider : "ui",
actions : [{
action : "delete",
qtip : "delete"
}, {
action : "up",
qtip : "move up",
update : function(el) {
// "this" references the tree node
var layer = this.layer, map = layer.map;
if (map.getLayerIndex(layer) == map.layers.length
- 1) {
el.addClass('disabled');
} else {
el.removeClass('disabled');
}
}
}, {
action : "down",
qtip : "move down",
update : function(el) {
// "this" references the tree node
var layer = this.layer, map = layer.map;
if (map.getLayerIndex(layer) == 1) {
el.addClass('disabled');
} else {
el.removeClass('disabled');
}
}
}]
}
}
},
rootVisible : false,
lines : false
});
 
// eastPanel
var descPanel = {
title : 'Desciption',
region : "east",
contentEl : "desc",
width : 250
};
 
// the viewport
new Ext.Viewport({
layout : "fit",
hideBorders : true,
items : {
layout : "border",
deferredRender : false,
items : [mapPanel, tree, descPanel]
}
});
});

codeが長いですが、やっていることは、たくさんのActionの定義をしているためです。
処理としては、

  1. 表示するmapの作成
  2. layerの作成
  3. mapPanelの作成
  4. treePanelの定義
  5. gx_treenodeactionsの作成
  6. gx_layercontainerの作成
  7. esatPanel作成
  8. viewportの作成

の流れです。

htmlファイルはstyleを一部変更します。
pngファイルのリンク先は各自の環境に合わせてください。

.gx-tree-layer-actions .delete {
background: transparent url(../GeoExt/resources/images/default/delete.png);
}
.gx-tree-layer-actions .up {
background: transparent url(../GeoExt/resources/images/default/bullet_arrow_up.png);
}
.gx-tree-layer-actions .down {
background: transparent url(../GeoExt/resources/images/default/bullet_arrow_down.png);
}
.gx-tree-layer-actions .disabled {
opacity: 0.2;
}
.x-tree-node-el {
border-bottom: 1px solid #ddd;
}
.x-tree-no-lines .x-tree-elbow, .x-tree-no-lines .x-tree-elbow-end, .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .gx-tree-layer-icon {
width: 0px;	/*important;*/
}

FireFoxで実行すると、
blog.godo-tys.jp_wp-content_gallery_geoext_09_image01.jpg

な感じ、browser画面全体に表示されます。

tree panel上にiconにmouse overすると、
blog.godo-tys.jp_wp-content_gallery_geoext_09_image02.jpg

な感じで、tooltipsが表示され、layerの順番を変更することができます。

たとえば、waterとroadを入れ替えてみると
blog.godo-tys.jp_wp-content_gallery_geoext_09_image03.jpg blog.godo-tys.jp_wp-content_gallery_geoext_09_image04.jpg
にlayerが入れ替わっているのがわかりますね。

今回のまとめ

GeoExtのexampleのtreeActionの操作を追加しました。
tree Actionのサンプルを置いておきます。試してみてください。

次回は、このtreeActionの操作に自前のMapServerからwmsを利用してみます。

GeoExt1.1 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.