Bienvenue sur

Bienvenue sur , 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/docs/_sources/tutorials/control-button-tutorial.txt @ 76

Revision 76, 4.5 KB checked in by djay, 10 years ago (diff)

Ajout du répertoire web

  • Property svn:executable set to *
1.. highlight:: javascript
4Map Tool Tutorial
7Okay, so now you know how to :doc:`add a map to a web page <mappanel-tutorial>`
8and load some data into it. Your users can drag and zoom to their hearts'
9content. You even followed the :doc:`layertree-tutorial` so they could switch
10between different datasets. (You did follow that tutorial, right?) But now you
11want to do more than just view some pretty pictures. You want to let your users
12analyze data, or get more info about particular features on your map, or just
13draw things. Basically, you want to give them some **tools**\ .
15.. note:: This tutorial makes heavy use of the OpenLayers mapping library.  If
16    you're not familiar with it, you might want to take a look at the
17    :doc:`/primers/openlayers-primer` before moving forward.
19OpenLayers Controls
22In `OpenLayers <>`_\ , these tools for interacting with a
23map are called ``Controls``\ . For the purposes of this tutorial, we'll just
24stick to the ``Measure`` control, a handy little tool that lets you draw a line
25on the map and tells you its length in real-world units.
27.. seealso:: The OpenLayer API documentation for a comprehensive listing of standard controls.
29ExtJS Buttons
32While OpenLayers ``Control``\ s provide a number of excellent ways of
33interacting with maps, they have only limited support for actually manipulating
34the controls; ie, choosing which tool to use and providing user feedback about
35which tool is active. ExtJS provides a richer array of options for managing
36tools. Here is the idiomatic way to create an ``Ext.Button`` which activates and
37deactivates an OpenLayers ``Control``\ , and stays depressed while the control
38is active::
40    var control = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
41        eventListeners: {
42            measure: function(evt) {
43                alert("The measurement was " + evt.measure + evt.units);
44            }
45        }
46    });
49    var button = new Ext.Button({
50        text: 'Measure Things',
51        enableToggle: true,
52        handler: function(toggled){
53            if (toggled) {
54                control.activate();
55            } else {
56                control.deactivate();
57            }
58        }
59    });
61The ``Button`` can be added to an ExtJS toolbar or to a panel, in whatever
62layout we choose. For example, you could add the button to a ``MapPanel``\ 's
63top toolbar::
65    mapPanel.getTopToolbar().addButton(button);
68There Can Be Only One
71In general, when you have multiple tools associated with a map, you want to
72avoid having more than one tool active at the same time. It would be somewhat
73confusing if the user starts deleting data while he or she is trying to find the
74distance from one end of town to the other! Fortunately, ExtJS makes it very
75simple to ensure that only one toggle button from a group is toggled at a time,
76through the ``toggleGroup`` property of the ``Button`` object. This is a string
77identifying a group of buttons, only one of which can be pressed at a time.
78Let's extend our example from before, this time adding the option to measure
79area instead of length::
81    var length = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
82        eventListeners: {
83            measure: function(evt) {
84                alert("The length was " + evt.measure + evt.units);
85            }
86        }
87    });
89    var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
90        eventListeners: {
91            measure: function(evt) {
92                alert("The area was " + evt.measure + evt.units);
93            }
94        }
95    });
100    var toggleGroup = "measure controls";
102    var lengthButton = new Ext.Button({
103        text: 'Measure Length',
104        enableToggle: true,
105        toggleGroup: toggleGroup,
106        handler: function(toggled){
107            if (toggled) {
108                length.activate();
109            } else {
110                length.deactivate();
111            }
112        }
113    });
115    var area = new Ext.Button({
116        text: 'Measure Area',
117        enableToggle: true,
118        toggleGroup: toggleGroup,
119        handler: function(toggled){
120            if (toggled) {
121                area.activate();
122            } else {
123                area.deactivate();
124            }
125        }
126    });
128All right, you've got all you need to add and activate tools to help users get
129the most out of your maps.
Note: See TracBrowser for help on using the repository browser.