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

Revision 76, 17.2 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>GeoExt QuickStart &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="MapPanel Tutorial" href="mappanel-tutorial.html" />
26    <link rel="prev" title="Tutorials" href="index.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="#">GeoExt QuickStart</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="#">GeoExt QuickStart</a><ul>
69<li><a class="reference external" href="#getting-geoext">Getting GeoExt</a></li>
70<li><a class="reference external" href="#basic-example">Basic Example</a></li>
71<li><a class="reference external" href="#going-further">Going Further</a></li>
72</ul>
73</li>
74</ul>
75
76            <h4>Previous topic</h4>
77            <p class="topless"><a href="index.html"
78                                  title="previous chapter">Tutorials</a></p>
79            <h4>Next topic</h4>
80            <p class="topless"><a href="mappanel-tutorial.html"
81                                  title="next chapter"><tt class="docutils literal docutils literal docutils literal"><span class="pre">MapPanel</span></tt> 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="geoext-quickstart">
92<h1>GeoExt QuickStart<a class="headerlink" href="#geoext-quickstart" title="Permalink to this headline">¶</a></h1>
93<p>Welcome to GeoExt!  This document is intended to help you get started
94with GeoExt.  With GeoExt, you can start from nothing and have a rich
95mapping application in seconds.</p>
96<div class="section" id="getting-geoext">
97<h2>Getting GeoExt<a class="headerlink" href="#getting-geoext" title="Permalink to this headline">¶</a></h2>
98<p>GeoExt is built on top of the robust OpenLayers JavaScript mapping
99library and the rich graphical components of ExtJS.  For licensing
100reasons, ExtJS cannot be included in the GeoExt download, so preparing
101GeoExt for use on your own web pages is a multi-step process:</p>
102<ol class="arabic simple">
103<li>Download GeoExt from the <a class="reference external" href="../downloads.html"><em>downloads page</em></a>. For the purposes
104of this quickstart, the development version will be fine.</li>
105<li>Download OpenLayers 2.10 or later from <a class="reference external" href="http://openlayers.org/">http://openlayers.org/</a>.</li>
106<li>Download ExtJS 3.2 from <a class="reference external" href="http://www.sencha.com/products/js/download.php">the ExtJS website</a>.</li>
107<li>Place both unpacked libraries in a directory that is published by your web
108server. For this tutorial, I will assume that this is the root of your web
109server, so that GeoExt.js is at <a class="reference external" href="http://localhost/GeoExt/lib/GeoExt.js">http://localhost/GeoExt/lib/GeoExt.js</a> and
110ext-all.js is at <a class="reference external" href="http://localhost/ext-3.2.1/ext-all.js">http://localhost/ext-3.2.1/ext-all.js</a></li>
111<li>Now you&#8217;re ready to use GeoExt in your application!</li>
112</ol>
113<div class="admonition note">
114<p class="first admonition-title">Note</p>
115<p class="last">For production environments, the GeoExt team recommends that
116you use compressed and minified builds of GeoExt and ExtJS to
117optimize the download size of your page.  A generic minified build
118containing all of GeoExt is available from the
119<a class="reference external" href="../downloads.html"><em>downloads page</em></a>, but advanced users can build their
120own.</p>
121</div>
122</div>
123<div class="section" id="basic-example">
124<h2>Basic Example<a class="headerlink" href="#basic-example" title="Permalink to this headline">¶</a></h2>
125<p>Let&#8217;s build a simple web page that just embeds a map with interactive
126navigation.</p>
127<ol class="arabic">
128<li><p class="first">Include the ExtJS libraries in your web page.</p>
129<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.2.1/adapter/ext/ext-base.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
130<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.2.1/ext-all.js&quot;</span>  <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
131<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;ext-3.2.1/resources/ext-all.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
132<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;OpenLayers/OpenLayers.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
133<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;GeoExt/lib/GeoExt.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
134<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;GeoExt/resources/geoext-all-debug.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
135</pre></div>
136</div>
137</li>
138<li><p class="first">Create a <tt class="docutils literal"><span class="pre">&lt;div&gt;</span></tt> element in your web page with its <tt class="docutils literal"><span class="pre">id</span></tt>
139attribute set to <tt class="docutils literal"><span class="pre">gxmap</span></tt>.  We will use the <tt class="docutils literal"><span class="pre">id</span></tt> to attach a
140GeoExt component to the <tt class="docutils literal"><span class="pre">div</span></tt>.</p>
141</li>
142<li><p class="first">Attach a <tt class="docutils literal"><span class="pre">MapPanel</span></tt> object to the <tt class="docutils literal"><span class="pre">div</span></tt> with some JavaScript code:</p>
143<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
144    <span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
145        <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>
146        <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>
147            <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
148            <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
149            <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
150        <span class="p">);</span>
151        <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>
152
153        <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
154            <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;gxmap&#39;</span><span class="p">,</span>
155            <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
156            <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
157            <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
158            <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;A Simple GeoExt Map&#39;</span>
159        <span class="p">});</span>
160    <span class="p">});</span>
161<span class="nt">&lt;/script&gt;</span>
162</pre></div>
163</div>
164</li>
165</ol>
166<p>The entire source of your page should look something like:</p>
167<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;html&gt;</span>
168<span class="nt">&lt;head&gt;</span>
169
170<span class="nt">&lt;title&gt;</span> A Basic GeoExt Page <span class="nt">&lt;/title&gt;</span>
171<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.2.1/adapter/ext/ext-base.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
172<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.2.1/ext-all.js&quot;</span>  <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
173<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;ext-3.2.1/resources/ext-all.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
174<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;OpenLayers/OpenLayers.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
175<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;GeoExt/lib/GeoExt.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
176<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;GeoExt/resources/geoext-all-debug.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
177
178<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;</span>
179    <span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
180        <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>
181        <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>
182            <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
183            <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
184            <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
185        <span class="p">);</span>
186        <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>
187
188        <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
189            <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;gxmap&#39;</span><span class="p">,</span>
190            <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
191            <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span><span class="p">,</span>
192            <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
193            <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;A Simple GeoExt Map&#39;</span>
194        <span class="p">});</span>
195    <span class="p">});</span>
196<span class="nt">&lt;/script&gt;</span>
197<span class="nt">&lt;/head&gt;</span>
198<span class="nt">&lt;body&gt;</span>
199<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;gxmap&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
200<span class="nt">&lt;/body&gt;</span>
201<span class="nt">&lt;/html&gt;</span>
202</pre></div>
203</div>
204<p>And that&#8217;s it! You now have all of GeoExt, ready to bring your geospatial data
205to life. Go forth and prosper!</p>
206</div>
207<div class="section" id="going-further">
208<h2>Going Further<a class="headerlink" href="#going-further" title="Permalink to this headline">¶</a></h2>
209<p>From here, there are a wide variety of options available for making
210customized, highly interactive mapping applications with GeoExt.  To
211learn more take a look at <a class="reference external" href="index.html"><em>Tutorials</em></a>, <a class="reference external" href="../examples.html#examples"><em>examples</em></a> and
212<a class="reference external" href="../lib/index.html"><em>API Reference</em></a>.</p>
213<p>We also recommend reading <a class="reference external" href="../primers/ext-primer.html"><em>Primer: Ext</em></a> and
214<a class="reference external" href="../primers/openlayers-primer.html"><em>Primer: OpenLayers</em></a> to become acquainted with the libraries that
215form the foundation of GeoExt.</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="mappanel-tutorial.html" title="MapPanel Tutorial"
236                 accesskey="N">next</a> |</li>
237            <li class="right" >
238              <a href="index.html" title="Tutorials"
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="#">GeoExt QuickStart</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.