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/mappanel-tutorial.html @ 81

Revision 76, 13.7 KB checked in by djay, 13 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>MapPanel 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="Layer Tree Tutorial" href="layertree-tutorial.html" />
26    <link rel="prev" title="GeoExt QuickStart" href="quickstart.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="#"><tt class="docutils literal docutils literal"><span class="pre">MapPanel</span></tt> 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="#"><tt class="docutils literal"><span class="pre">MapPanel</span></tt> Tutorial</a><ul>
69<li><a class="reference external" href="#a-basic-mappanel">A Basic MapPanel</a></li>
70<li><a class="reference external" href="#working-with-the-mappanel">Working with the MapPanel</a></li>
71</ul>
72</li>
73</ul>
74
75            <h4>Previous topic</h4>
76            <p class="topless"><a href="quickstart.html"
77                                  title="previous chapter">GeoExt QuickStart</a></p>
78            <h4>Next topic</h4>
79            <p class="topless"><a href="layertree-tutorial.html"
80                                  title="next chapter">Layer Tree Tutorial</a></p>
81        </div>
82      </div>
83
84
85    <div class="document">
86      <div class="documentwrapper">
87        <div class="bodywrapper">
88          <div class="body">
89           
90  <div class="section" id="mappanel-tutorial">
91<h1><tt class="docutils literal"><span class="pre">MapPanel</span></tt> Tutorial<a class="headerlink" href="#mappanel-tutorial" title="Permalink to this headline">¶</a></h1>
92<p>The <a title="GeoExt.MapPanel" class="reference external" href="../lib/GeoExt/widgets/MapPanel.html#GeoExt.MapPanel"><tt class="xref docutils literal"><span class="pre">GeoExt.MapPanel</span></tt></a> is the heart of most GeoExt applications,
93displaying rendered data. Leveraging the OpenLayers JavaScript mapping library,
94it can display rendered tiles from OWS services, perform client-side rendering
95in the browser, and use tiles from popular mapping services such as Google Maps
96or Virtual Earth. In this tutorial, we explore ways that developers can
97customize the MapPanel.</p>
98<div class="admonition note">
99<p class="first admonition-title">Note</p>
100<p class="last">It is recommended that you follow the <a class="reference external" href="quickstart.html"><em>GeoExt QuickStart</em></a> tutorial
101before moving on to this one. It really is quick; we&#8217;ll wait for you.</p>
102</div>
103<div class="section" id="a-basic-mappanel">
104<h2>A Basic MapPanel<a class="headerlink" href="#a-basic-mappanel" title="Permalink to this headline">¶</a></h2>
105<p>Taking a look at the example code from the quickstart tutorial, we can see a
106very basic map configuration:</p>
107<div class="highlight-javascript"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
108 2
109 3
110 4
111 5
112 6
113 7
114 8
115 9
11610
11711
11812
11913
12014
12115</pre></div></td><td class="code"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Map</span><span class="p">();</span>
122<span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Layer</span><span class="p">.</span><span class="nx">WMS</span><span class="p">(</span>
123    <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
124    <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
125    <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
126<span class="p">);</span>
127<span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">layer</span><span class="p">);</span>
128
129<span class="kd">var</span> <span class="nx">mapPanel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
130    <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;gxmap&#39;</span><span class="p">,</span>
131    <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
132    <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
133    <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
134    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;A Simple GeoExt Map&#39;</span>
135<span class="p">});</span>
136</pre></div>
137</td></tr></table></div>
138<p>Looking at this code we can see a few things going on:</p>
139<p>In <strong>line 1</strong> we instantiate an <tt class="xref docutils literal"><span class="pre">OpenLayers.Map</span></tt>. This isn&#8217;t required by
140the MapPanel (it will create a Map for you if none is provided) but we want to
141customize our map a bit.</p>
142<p>In <strong>lines 2-6</strong> we create a new <tt class="xref docutils literal"><span class="pre">OpenLayers.Layer</span></tt>. This particular
143layer is a WMS layer, which uses tiles from the Blue Marble layer at
144<a class="reference external" href="http://maps.opengeo.org/">http://maps.opengeo.org/</a>.</p>
145<p>In <strong>line 7</strong> we add our new layer to the map.</p>
146<p>In <strong>lines 9-15</strong> we create a new map panel with several options:</p>
147<blockquote>
148<dl class="docutils">
149<dt><tt class="docutils literal"><span class="pre">renderTo</span></tt></dt>
150<dd>This works the same as <tt class="docutils literal"><span class="pre">renderTo</span></tt> in a normal <tt class="xref docutils literal"><span class="pre">Ext.Panel</span></tt>; it
151can be an id string, DOM node, or <tt class="xref docutils literal"><span class="pre">Ext.Element</span></tt> telling the
152MapPanel where on the page it should insert itself.</dd>
153<dt><tt class="docutils literal"><span class="pre">height</span></tt>, <tt class="docutils literal"><span class="pre">width</span></tt></dt>
154<dd>These tell the map panel how much large it should draw itself.</dd>
155<dt><tt class="docutils literal"><span class="pre">map</span></tt></dt>
156<dd>This is an <tt class="xref docutils literal"><span class="pre">OpenLayers.Map</span></tt> which will be used as the actual map
157inside the panel.</dd>
158<dt><tt class="docutils literal"><span class="pre">title</span></tt></dt>
159<dd>This is the normal <tt class="docutils literal"><span class="pre">title</span></tt> property for ExtJS components. It will be
160rendered nicely across the top of the panel.</dd>
161</dl>
162</blockquote>
163</div>
164<div class="section" id="working-with-the-mappanel">
165<h2>Working with the MapPanel<a class="headerlink" href="#working-with-the-mappanel" title="Permalink to this headline">¶</a></h2>
166<p>While using <tt class="docutils literal"><span class="pre">OpenLayers.Map.addLayer()</span></tt> to add layers is a convenient way to
167customize the map, a hand-coded, static list of map layers is not always what we
168want. In order to make manipulating the layer list more accessible to ExtJS
169widgets, the MapPanel exposes a <cite>layers</cite> property which is an
170<tt class="xref docutils literal"><span class="pre">Ext.data.Store</span></tt> that will automatically be updated when layers are
171added, removed, changed, or reordered, with all of the Ext events that go with
172it. We can use this to, for example, populate an <tt class="xref docutils literal"><span class="pre">Ext.grid.GridPanel</span></tt>
173with a live list of layers in the map:</p>
174<div class="highlight-javascript"><div class="highlight"><pre><span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">GridPanel</span><span class="p">({</span>
175    <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;layerlist&#39;</span><span class="p">,</span>
176    <span class="nx">height</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span> <span class="nx">width</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span>
177    <span class="nx">autoScroll</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
178    <span class="nx">store</span><span class="o">:</span> <span class="nx">mapPanel</span><span class="p">.</span><span class="nx">layers</span><span class="p">,</span>
179    <span class="nx">columns</span><span class="o">:</span> <span class="p">[{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;name&#39;</span><span class="p">,</span> <span class="nx">heading</span><span class="o">:</span> <span class="s1">&#39;Name&#39;</span><span class="p">}]</span>
180<span class="p">});</span>
181</pre></div>
182</div>
183<p>In the HTML, you&#8217;ll need to add a <tt class="docutils literal"><span class="pre">div</span></tt> for the grid panel to render itself in:</p>
184<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&#39;layerlist&#39;</span><span class="nt">&gt;&lt;/div&gt;</span>
185</pre></div>
186</div>
187<p>More information on the <tt class="xref docutils literal"><span class="pre">Ext.grid.GridPanel</span></tt> is available from the <a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel">ExtJS
188API documentation</a>.</p>
189<div class="admonition note">
190<p class="first admonition-title">Note</p>
191<p class="last">This code is only meant as an example to demonstrate the map panel&#8217;s
192integration with Ext. An <tt class="xref docutils literal"><span class="pre">Ext.tree.TreePanel</span></tt> with
193<a title="GeoExt.tree.LayerNode" class="reference external" href="../lib/GeoExt/widgets/tree/LayerNode.html#GeoExt.tree.LayerNode"><tt class="xref docutils literal"><span class="pre">GeoExt.tree.LayerNode</span></tt></a>s is a a much nicer way to display the layers in
194a map, with optional support for hiding/showing layers and reordering. The
195TreePanel approach is discussed in the <a class="reference external" href="layertree-tutorial.html"><em>Layer Tree Tutorial</em></a>.</p>
196</div>
197</div>
198</div>
199
200
201          </div>
202        </div>
203      </div>
204      <div class="clearer"></div>
205    </div>
206    <div class="related">
207      <h3>Navigation</h3>
208      <ul>
209            <li class="right" style="margin-right: 10px">
210              <a href="../genindex.html" title="General Index"
211                 accesskey="I">index</a></li>
212            <li class="right" >
213              <a href="../modindex.html" title="Global Module Index"
214                 accesskey="M">modules</a> |</li>
215            <li class="right" >
216              <a href="layertree-tutorial.html" title="Layer Tree Tutorial"
217                 accesskey="N">next</a> |</li>
218            <li class="right" >
219              <a href="quickstart.html" title="GeoExt QuickStart"
220                 accesskey="P">previous</a> |</li>
221        <li><a href="../index.html">GeoExt</a> &raquo;</li>
222          <li><a href="index.html" >Tutorials</a> &raquo;</li>
223        <li><a href="#"><tt class="docutils literal docutils literal"><span class="pre">MapPanel</span></tt> Tutorial</a></li>
224      </ul>
225    </div>
226
227    <div class="footer">
228      &copy; Copyright 2009-2010, GeoExt Community.
229    </div>
230  </body>
231</html>
Note: See TracBrowser for help on using the repository browser.