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/docs/tutorials/control-button-tutorial.html @ 81

Revision 76, 17.4 KB checked in by djay, 12 years ago (diff)

Ajout du répertoire web
  • Property svn:executable set to *
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml">
5  <head>
6    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7   
8    <title>Map Tool Tutorial &mdash; GeoExt v1.0</title>
9    <link rel="stylesheet" href="../_static/geoext.css" type="text/css" />
10    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
11    <script type="text/javascript">
12      var DOCUMENTATION_OPTIONS = {
13        URL_ROOT:    '../',
14        VERSION:     '1.0',
15        COLLAPSE_MODINDEX: false,
16        FILE_SUFFIX: '.html',
17        HAS_SOURCE:  true
18      };
19    </script>
20    <script type="text/javascript" src="../_static/jquery.js"></script>
21    <script type="text/javascript" src="../_static/doctools.js"></script>
22    <link rel="shortcut icon" href="../_static/favicon.ico"/>
23    <link rel="top" title="GeoExt v1.0" href="../index.html" />
24    <link rel="up" title="Tutorials" href="index.html" />
25    <link rel="next" title="Vector Data Tutorial" href="remote-features-tutorial.html" />
26    <link rel="prev" title="Layer Tree Tutorial" href="layertree-tutorial.html" />
27   
28   
29   
30   
31   
32
33  </head>
34  <body>
35    <div class="header">
36        <div class="wrap">
37            <h1 id="logo"><a href="../index.html">GeoExt</a></h1>
38            <ul id="top-nav">
39                <li class="first"><a href="../docs.html">Documentation</a></li>
40                <li><a href="../examples.html">Examples</a></li>
41                <li><a href="../downloads.html">Download</a></li>
42                <li><a href="http://trac.geoext.org/">Development</a></li>
43            </ul>
44            <div id="searchbox">
45                <form class="search" action="../search.html" method="get">
46                    <input id="searchbox-query" type="text" name="q" size="25" value="Search &hellip;" tabindex="3" onblur="if(this.value=='') this.value='Search &hellip;';" onfocus="if(this.value=='Search &hellip;') this.value='';" />
47                    <input id="searchbox-submit" type="image" value="Search" src="../_static/img/search_icon_green.png" />
48                    <input type="hidden" name="check_keywords" value="yes" />
49                    <input type="hidden" name="area" value="default" />
50                </form>
51            </div>
52        </div>
53    </div>
54
55    <div class="related">
56      <h3>Navigation</h3>
57      <ul>
58        <li><a href="../index.html">GeoExt</a> &raquo;</li>
59          <li><a href="index.html" accesskey="U">Tutorials</a> &raquo;</li>
60        <li><a href="#">Map Tool Tutorial</a></li>
61      </ul>
62    </div>
63
64      <div class="sphinxsidebar">
65        <div class="sphinxsidebarwrapper">
66            <h3><a href="../index.html">Table Of Contents</a></h3>
67            <ul>
68<li><a class="reference external" href="#">Map Tool Tutorial</a><ul>
69<li><a class="reference external" href="#openlayers-controls">OpenLayers Controls</a></li>
70<li><a class="reference external" href="#extjs-buttons">ExtJS Buttons</a></li>
71<li><a class="reference external" href="#there-can-be-only-one">There Can Be Only One</a></li>
72</ul>
73</li>
74</ul>
75
76            <h4>Previous topic</h4>
77            <p class="topless"><a href="layertree-tutorial.html"
78                                  title="previous chapter">Layer Tree Tutorial</a></p>
79            <h4>Next topic</h4>
80            <p class="topless"><a href="remote-features-tutorial.html"
81                                  title="next chapter">Vector Data Tutorial</a></p>
82        </div>
83      </div>
84
85
86    <div class="document">
87      <div class="documentwrapper">
88        <div class="bodywrapper">
89          <div class="body">
90           
91  <div class="section" id="map-tool-tutorial">
92<h1>Map Tool Tutorial<a class="headerlink" href="#map-tool-tutorial" title="Permalink to this headline">¶</a></h1>
93<p>Okay, so now you know how to <a class="reference external" href="mappanel-tutorial.html"><em>add a map to a web page</em></a>
94and load some data into it. Your users can drag and zoom to their hearts&#8217;
95content. You even followed the <a class="reference external" href="layertree-tutorial.html"><em>Layer Tree Tutorial</em></a> so they could switch
96between different datasets. (You did follow that tutorial, right?) But now you
97want to do more than just view some pretty pictures. You want to let your users
98analyze data, or get more info about particular features on your map, or just
99draw things. Basically, you want to give them some <strong>tools</strong>.</p>
100<div class="admonition note">
101<p class="first admonition-title">Note</p>
102<p class="last">This tutorial makes heavy use of the OpenLayers mapping library.  If
103you&#8217;re not familiar with it, you might want to take a look at the
104<a class="reference external" href="../primers/openlayers-primer.html"><em>Primer: OpenLayers</em></a> before moving forward.</p>
105</div>
106<div class="section" id="openlayers-controls">
107<h2>OpenLayers Controls<a class="headerlink" href="#openlayers-controls" title="Permalink to this headline">¶</a></h2>
108<p>In <a class="reference external" href="http://openlayers.org/">OpenLayers</a>, these tools for interacting with a
109map are called <tt class="docutils literal"><span class="pre">Controls</span></tt>. For the purposes of this tutorial, we&#8217;ll just
110stick to the <tt class="docutils literal"><span class="pre">Measure</span></tt> control, a handy little tool that lets you draw a line
111on the map and tells you its length in real-world units.</p>
112<div class="admonition-see-also admonition seealso">
113<p class="first admonition-title">See also</p>
114<p class="last">The OpenLayer API documentation for a comprehensive listing of standard controls.</p>
115</div>
116</div>
117<div class="section" id="extjs-buttons">
118<h2>ExtJS Buttons<a class="headerlink" href="#extjs-buttons" title="Permalink to this headline">¶</a></h2>
119<p>While OpenLayers <tt class="docutils literal"><span class="pre">Control</span></tt>s provide a number of excellent ways of
120interacting with maps, they have only limited support for actually manipulating
121the controls; ie, choosing which tool to use and providing user feedback about
122which tool is active. ExtJS provides a richer array of options for managing
123tools. Here is the idiomatic way to create an <tt class="docutils literal"><span class="pre">Ext.Button</span></tt> which activates and
124deactivates an OpenLayers <tt class="docutils literal"><span class="pre">Control</span></tt>, and stays depressed while the control
125is active:</p>
126<div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">control</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Measure</span><span class="p">(</span><span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Path</span><span class="p">,</span> <span class="p">{</span>
127    <span class="nx">eventListeners</span><span class="o">:</span> <span class="p">{</span>
128        <span class="nx">measure</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
129            <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;The measurement was &quot;</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">measure</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">units</span><span class="p">);</span>
130        <span class="p">}</span>
131    <span class="p">}</span>
132<span class="p">});</span>
133
134<span class="nx">mapPanel</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">control</span><span class="p">);</span>
135<span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Button</span><span class="p">({</span>
136    <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Measure Things&#39;</span><span class="p">,</span>
137    <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
138    <span class="nx">handler</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">toggled</span><span class="p">){</span>
139        <span class="k">if</span> <span class="p">(</span><span class="nx">toggled</span><span class="p">)</span> <span class="p">{</span>
140            <span class="nx">control</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span>
141        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
142            <span class="nx">control</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span>
143        <span class="p">}</span>
144    <span class="p">}</span>
145<span class="p">});</span>
146</pre></div>
147</div>
148<p>The <tt class="docutils literal"><span class="pre">Button</span></tt> can be added to an ExtJS toolbar or to a panel, in whatever
149layout we choose. For example, you could add the button to a <tt class="docutils literal"><span class="pre">MapPanel</span></tt>&#8216;s
150top toolbar:</p>
151<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">mapPanel</span><span class="p">.</span><span class="nx">getTopToolbar</span><span class="p">().</span><span class="nx">addButton</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
152</pre></div>
153</div>
154</div>
155<div class="section" id="there-can-be-only-one">
156<h2>There Can Be Only One<a class="headerlink" href="#there-can-be-only-one" title="Permalink to this headline">¶</a></h2>
157<p>In general, when you have multiple tools associated with a map, you want to
158avoid having more than one tool active at the same time. It would be somewhat
159confusing if the user starts deleting data while he or she is trying to find the
160distance from one end of town to the other! Fortunately, ExtJS makes it very
161simple to ensure that only one toggle button from a group is toggled at a time,
162through the <tt class="docutils literal"><span class="pre">toggleGroup</span></tt> property of the <tt class="docutils literal"><span class="pre">Button</span></tt> object. This is a string
163identifying a group of buttons, only one of which can be pressed at a time.
164Let&#8217;s extend our example from before, this time adding the option to measure
165area instead of length:</p>
166<div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Measure</span><span class="p">(</span><span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Path</span><span class="p">,</span> <span class="p">{</span>
167    <span class="nx">eventListeners</span><span class="o">:</span> <span class="p">{</span>
168        <span class="nx">measure</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
169            <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;The length was &quot;</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">measure</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">units</span><span class="p">);</span>
170        <span class="p">}</span>
171    <span class="p">}</span>
172<span class="p">});</span>
173
174<span class="kd">var</span> <span class="nx">area</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Measure</span><span class="p">(</span><span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Polygon</span><span class="p">,</span> <span class="p">{</span>
175    <span class="nx">eventListeners</span><span class="o">:</span> <span class="p">{</span>
176        <span class="nx">measure</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
177            <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;The area was &quot;</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">measure</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">units</span><span class="p">);</span>
178        <span class="p">}</span>
179    <span class="p">}</span>
180<span class="p">});</span>
181
182<span class="nx">mapPanel</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">length</span><span class="p">);</span>
183<span class="nx">mapPanel</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">area</span><span class="p">);</span>
184
185<span class="kd">var</span> <span class="nx">toggleGroup</span> <span class="o">=</span> <span class="s2">&quot;measure controls&quot;</span><span class="p">;</span>
186
187<span class="kd">var</span> <span class="nx">lengthButton</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Button</span><span class="p">({</span>
188    <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Measure Length&#39;</span><span class="p">,</span>
189    <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
190    <span class="nx">toggleGroup</span><span class="o">:</span> <span class="nx">toggleGroup</span><span class="p">,</span>
191    <span class="nx">handler</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">toggled</span><span class="p">){</span>
192        <span class="k">if</span> <span class="p">(</span><span class="nx">toggled</span><span class="p">)</span> <span class="p">{</span>
193            <span class="nx">length</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span>
194        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
195            <span class="nx">length</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span>
196        <span class="p">}</span>
197    <span class="p">}</span>
198<span class="p">});</span>
199
200<span class="kd">var</span> <span class="nx">area</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Button</span><span class="p">({</span>
201    <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Measure Area&#39;</span><span class="p">,</span>
202    <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
203    <span class="nx">toggleGroup</span><span class="o">:</span> <span class="nx">toggleGroup</span><span class="p">,</span>
204    <span class="nx">handler</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">toggled</span><span class="p">){</span>
205        <span class="k">if</span> <span class="p">(</span><span class="nx">toggled</span><span class="p">)</span> <span class="p">{</span>
206            <span class="nx">area</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span>
207        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
208            <span class="nx">area</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span>
209        <span class="p">}</span>
210    <span class="p">}</span>
211<span class="p">});</span>
212</pre></div>
213</div>
214<p>All right, you&#8217;ve got all you need to add and activate tools to help users get
215the most out of your maps.</p>
216</div>
217</div>
218
219
220          </div>
221        </div>
222      </div>
223      <div class="clearer"></div>
224    </div>
225    <div class="related">
226      <h3>Navigation</h3>
227      <ul>
228            <li class="right" style="margin-right: 10px">
229              <a href="../genindex.html" title="General Index"
230                 accesskey="I">index</a></li>
231            <li class="right" >
232              <a href="../modindex.html" title="Global Module Index"
233                 accesskey="M">modules</a> |</li>
234            <li class="right" >
235              <a href="remote-features-tutorial.html" title="Vector Data Tutorial"
236                 accesskey="N">next</a> |</li>
237            <li class="right" >
238              <a href="layertree-tutorial.html" title="Layer Tree Tutorial"
239                 accesskey="P">previous</a> |</li>
240        <li><a href="../index.html">GeoExt</a> &raquo;</li>
241          <li><a href="index.html" >Tutorials</a> &raquo;</li>
242        <li><a href="#">Map Tool Tutorial</a></li>
243      </ul>
244    </div>
245
246    <div class="footer">
247      &copy; Copyright 2009-2010, GeoExt Community.
248    </div>
249  </body>
250</html>
Note: See TracBrowser for help on using the repository browser.