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/_sources/tutorials/quickstart.txt @ 81

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

Ajout du répertoire web
  • Property svn:executable set to *
Line 
1===================
2 GeoExt QuickStart
3===================
4
5Welcome to GeoExt!  This document is intended to help you get started
6with GeoExt.  With GeoExt, you can start from nothing and have a rich
7mapping application in seconds.
8
9
10Getting GeoExt
11==============
12
13GeoExt is built on top of the robust OpenLayers JavaScript mapping
14library and the rich graphical components of ExtJS.  For licensing
15reasons, ExtJS cannot be included in the GeoExt download, so preparing
16GeoExt for use on your own web pages is a multi-step process:
17
18#.  Download GeoExt from the :doc:`downloads page </downloads>`. For the purposes
19    of this quickstart, the development version will be fine.
20
21#.  Download OpenLayers 2.10 or later from http://openlayers.org/.
22
23#.  Download ExtJS 3.2 from `the ExtJS website <http://www.sencha.com/products/js/download.php>`_.
24
25#.  Place both unpacked libraries in a directory that is published by your web
26    server. For this tutorial, I will assume that this is the root of your web
27    server, so that GeoExt.js is at http://localhost/GeoExt/lib/GeoExt.js and
28    ext-all.js is at http://localhost/ext-3.2.1/ext-all.js
29
30#.  Now you're ready to use GeoExt in your application!
31
32.. note:: For production environments, the GeoExt team recommends that
33    you use compressed and minified builds of GeoExt and ExtJS to
34    optimize the download size of your page.  A generic minified build
35    containing all of GeoExt is available from the
36    :doc:`downloads page </downloads>`, but advanced users can build their
37    own.
38
39
40
41Basic Example
42=============
43
44Let's build a simple web page that just embeds a map with interactive
45navigation.
46
47#.  Include the ExtJS libraries in your web page.
48
49    .. code-block:: html
50   
51        <script src="ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
52        <script src="ext-3.2.1/ext-all.js"  type="text/javascript"></script>
53        <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/ext-all.css"></link>
54        <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
55        <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
56        <link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link>
57
58#.  Create a ``<div>`` element in your web page with its ``id``
59    attribute set to ``gxmap``.  We will use the ``id`` to attach a
60    GeoExt component to the ``div``.
61
62#.  Attach a ``MapPanel`` object to the ``div`` with some JavaScript code:
63
64    .. code-block:: html
65   
66        <script type="text/javascript">
67            Ext.onReady(function() {
68                var map = new OpenLayers.Map();
69                var layer = new OpenLayers.Layer.WMS(
70                    "Global Imagery",
71                    "http://maps.opengeo.org/geowebcache/service/wms",
72                    {layers: "bluemarble"}
73                );
74                map.addLayer(layer);
75   
76                new GeoExt.MapPanel({
77                    renderTo: 'gxmap',
78                    height: 400,
79                    width: 600,
80                    map: map,
81                    title: 'A Simple GeoExt Map'
82                });
83            });
84        </script>
85
86The entire source of your page should look something like:
87
88.. code-block:: html
89
90    <html>
91    <head>
92
93    <title> A Basic GeoExt Page </title>
94    <script src="ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
95    <script src="ext-3.2.1/ext-all.js"  type="text/javascript"></script>
96    <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/ext-all.css"></link>
97    <script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
98    <script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
99    <link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link>
100
101    <script type="text/javascript">
102        Ext.onReady(function() {
103            var map = new OpenLayers.Map();
104            var layer = new OpenLayers.Layer.WMS(
105                "Global Imagery",
106                "http://maps.opengeo.org/geowebcache/service/wms",
107                {layers: "bluemarble"}
108            );
109            map.addLayer(layer);
110
111            new GeoExt.MapPanel({
112                renderTo: 'gxmap',
113                height: 400,
114                width: 600,
115                map: map,
116                title: 'A Simple GeoExt Map'
117            });
118        });
119    </script>
120    </head>
121    <body>
122    <div id="gxmap"></div>
123    </body>
124    </html>
125
126And that's it! You now have all of GeoExt, ready to bring your geospatial data
127to life. Go forth and prosper!
128
129Going Further
130=============
131
132From here, there are a wide variety of options available for making
133customized, highly interactive mapping applications with GeoExt.  To
134learn more take a look at :doc:`index`, :ref:`examples <examples>` and
135:doc:`/lib/index`.
136
137We also recommend reading :doc:`../primers/ext-primer` and
138:doc:`../primers/openlayers-primer` to become acquainted with the libraries that
139form the foundation of GeoExt.
140
Note: See TracBrowser for help on using the repository browser.