Bienvenue sur PostGIS.fr

Bienvenue sur PostGIS.fr , le site de la communauté des utilisateurs francophones de PostGIS.

PostGIS ajoute le support d'objets géographique à la base de données PostgreSQL. En effet, PostGIS "spatialise" le serverur PostgreSQL, ce qui permet de l'utiliser comme une base de données SIG.

Maintenu à jour, en fonction de nos disponibilités et des diverses sorties des outils que nous testons, nous vous proposons l'ensemble de nos travaux publiés en langue française.

source: trunk/workshop-routing-foss4g/web/GeoExt/examples/tree.js @ 81

Revision 76, 7.6 KB checked in by djay, 13 years ago (diff)

Ajout du répertoire web

  • Property svn:executable set to *
Line 
1/**
2 * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
3 *
4 * Published under the BSD license.
5 * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
6 * of the license.
7 */
8
9/** api: example[tree]
10 *  Tree Nodes
11 *  ----------
12 *  Create all kinds of tree nodes.
13 */
14
15var mapPanel, tree;
16Ext.onReady(function() {
17    // create a map panel with some layers that we will show in our layer tree
18    // below.
19    mapPanel = new GeoExt.MapPanel({
20        border: true,
21        region: "center",
22        // we do not want all overlays, to try the OverlayLayerContainer
23        map: new OpenLayers.Map({allOverlays: false}),
24        center: [146.1569825, -41.6109735],
25        zoom: 6,
26        layers: [
27            new OpenLayers.Layer.WMS("Global Imagery",
28                "http://maps.opengeo.org/geowebcache/service/wms", {
29                    layers: "bluemarble"
30                }, {
31                    buffer: 0,
32                    visibility: false
33                }
34            ),
35            new OpenLayers.Layer.WMS("Tasmania State Boundaries",
36                "http://demo.opengeo.org/geoserver/wms", {
37                    layers: "topp:tasmania_state_boundaries"
38                }, {
39                    buffer: 0
40                }
41            ),
42            new OpenLayers.Layer.WMS("Water",
43                "http://demo.opengeo.org/geoserver/wms", {
44                    layers: "topp:tasmania_water_bodies",
45                    transparent: true,
46                    format: "image/gif"
47                }, {
48                    isBaseLayer: false,
49                    buffer: 0
50                }
51            ),
52            new OpenLayers.Layer.WMS("Cities",
53                "http://demo.opengeo.org/geoserver/wms", {
54                    layers: "topp:tasmania_cities",
55                    transparent: true,
56                    format: "image/gif"
57                }, {
58                    isBaseLayer: false,
59                    buffer: 0
60                }
61            ),
62            new OpenLayers.Layer.WMS("Tasmania Roads",
63                "http://demo.opengeo.org/geoserver/wms", {
64                    layers: "topp:tasmania_roads",
65                    transparent: true,
66                    format: "image/gif"
67                }, {
68                    isBaseLayer: false,
69                    buffer: 0
70                }
71            ),
72            // create a group layer (with several layers in the "layers" param)
73            // to show how the LayerParamLoader works
74            new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
75                "http://demo.opengeo.org/geoserver/wms", {
76                    layers: [
77                        "topp:tasmania_state_boundaries",
78                        "topp:tasmania_water_bodies",
79                        "topp:tasmania_cities",
80                        "topp:tasmania_roads"
81                    ],
82                    transparent: true,
83                    format: "image/gif"
84                }, {
85                    isBaseLayer: false,
86                    buffer: 0,
87                    // exclude this layer from layer container nodes
88                    displayInLayerSwitcher: false,
89                    visibility: false
90                }
91            )
92        ]
93    });
94
95    // create our own layer node UI class, using the TreeNodeUIEventMixin
96    var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());
97       
98    // using OpenLayers.Format.JSON to create a nice formatted string of the
99    // configuration for editing it in the UI
100    var treeConfig = new OpenLayers.Format.JSON().write([{
101        nodeType: "gx_baselayercontainer"
102    }, {
103        nodeType: "gx_overlaylayercontainer",
104        expanded: true,
105        // render the nodes inside this container with a radio button,
106        // and assign them the group "foo".
107        loader: {
108            baseAttrs: {
109                radioGroup: "foo",
110                uiProvider: "layernodeui"
111            }
112        }
113    }, {
114        nodeType: "gx_layer",
115        layer: "Tasmania (Group Layer)",
116        isLeaf: false,
117        // create subnodes for the layers in the LAYERS param. If we assign
118        // a loader to a LayerNode and do not provide a loader class, a
119        // LayerParamLoader will be assumed.
120        loader: {
121            param: "LAYERS"
122        }
123    }], true);
124
125    // create the tree with the configuration from above
126    tree = new Ext.tree.TreePanel({
127        border: true,
128        region: "west",
129        title: "Layers",
130        width: 200,
131        split: true,
132        collapsible: true,
133        collapseMode: "mini",
134        autoScroll: true,
135        plugins: [
136            new GeoExt.plugins.TreeNodeRadioButton({
137                listeners: {
138                    "radiochange": function(node) {
139                        alert(node.text + " is now the active layer.");
140                    }
141                }
142            })
143        ],
144        loader: new Ext.tree.TreeLoader({
145            // applyLoader has to be set to false to not interfer with loaders
146            // of nodes further down the tree hierarchy
147            applyLoader: false,
148            uiProviders: {
149                "layernodeui": LayerNodeUI
150            }
151        }),
152        root: {
153            nodeType: "async",
154            // the children property of an Ext.tree.AsyncTreeNode is used to
155            // provide an initial set of layer nodes. We use the treeConfig
156            // from above, that we created with OpenLayers.Format.JSON.write.
157            children: Ext.decode(treeConfig)
158        },
159        listeners: {
160            "radiochange": function(node){
161                alert(node.layer.name + " is now the the active layer.");
162            }
163        },
164        rootVisible: false,
165        lines: false,
166        bbar: [{
167            text: "Show/Edit Tree Config",
168            handler: function() {
169                treeConfigWin.show();
170                Ext.getCmp("treeconfig").setValue(treeConfig);
171            }
172        }]
173    });
174
175    // dialog for editing the tree configuration
176    var treeConfigWin = new Ext.Window({
177        layout: "fit",
178        hideBorders: true,
179        closeAction: "hide",
180        width: 300,
181        height: 400,
182        title: "Tree Configuration",
183        items: [{
184            xtype: "form",
185            layout: "fit",
186            items: [{
187                id: "treeconfig",
188                xtype: "textarea"
189            }],
190            buttons: [{
191                text: "Save",
192                handler: function() {
193                    var value = Ext.getCmp("treeconfig").getValue()
194                    try {
195                        var root = tree.getRootNode();
196                        root.attributes.children = Ext.decode(value);
197                        tree.getLoader().load(root);
198                    } catch(e) {
199                        alert("Invalid JSON");
200                        return;
201                    }
202                    treeConfig = value;
203                    treeConfigWin.hide();
204                }
205            }, {
206                text: "Cancel",
207                handler: function() {
208                    treeConfigWin.hide();
209                }
210            }]
211        }]
212    });
213   
214    new Ext.Viewport({
215        layout: "fit",
216        hideBorders: true,
217        items: {
218            layout: "border",
219            deferredRender: false,
220            items: [mapPanel, tree, {
221                contentEl: "desc",
222                region: "east",
223                bodyStyle: {"padding": "5px"},
224                collapsible: true,
225                collapseMode: "mini",
226                split: true,
227                width: 200,
228                title: "Description"
229            }]
230        }
231    });
232});
Note: See TracBrowser for help on using the repository browser.