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の定義をしているためです。
処理としては、
-
表示するmapの作成
-
layerの作成
-
mapPanelの作成
-
treePanelの定義
-
gx_treenodeactionsの作成
-
gx_layercontainerの作成
-
esatPanel作成
-
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;*/ }
な感じ、browser画面全体に表示されます。
tree panel上にiconにmouse overすると、
な感じで、tooltipsが表示され、layerの順番を変更することができます。
今回のまとめ
GeoExtのexampleのtreeActionの操作を追加しました。
tree Actionのサンプルを置いておきます。試してみてください。
次回は、このtreeActionの操作に自前のMapServerからwmsを利用してみます。
最近のコメント