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/mappanel-tutorial.txt @ 76

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

Ajout du répertoire web

  • Property svn:executable set to *
Line 
1.. highlight:: javascript
2
3============================
4``MapPanel`` Tutorial
5============================
6
7The :class:`GeoExt.MapPanel` is the heart of most GeoExt applications,
8displaying rendered data. Leveraging the OpenLayers JavaScript mapping library,
9it can display rendered tiles from OWS services, perform client-side rendering
10in the browser, and use tiles from popular mapping services such as Google Maps
11or Virtual Earth. In this tutorial, we explore ways that developers can
12customize the MapPanel.
13
14.. note::
15  It is recommended that you follow the :doc:`quickstart` tutorial
16  before moving on to this one. It really is quick; we'll wait for you.
17
18A Basic MapPanel
19================
20
21Taking a look at the example code from the quickstart tutorial, we can see a
22very basic map configuration:
23       
24.. code-block:: javascript
25    :linenos:
26
27    var map = new OpenLayers.Map();
28    var layer = new OpenLayers.Layer.WMS(
29        "Global Imagery",
30        "http://maps.opengeo.org/geowebcache/service/wms",
31        {layers: "bluemarble"}
32    );
33    map.addLayer(layer);
34     
35    var mapPanel = new GeoExt.MapPanel({
36        renderTo: 'gxmap',
37        height: 400,
38        width: 600,
39        map: map,
40        title: 'A Simple GeoExt Map'
41    });
42
43Looking at this code we can see a few things going on:
44
45In **line 1** we instantiate an :class:`OpenLayers.Map`. This isn't required by
46the MapPanel (it will create a Map for you if none is provided) but we want to
47customize our map a bit.
48
49In **lines 2-6** we create a new :class:`OpenLayers.Layer`. This particular
50layer is a WMS layer, which uses tiles from the Blue Marble layer at
51http://maps.opengeo.org/.
52
53In **line 7** we add our new layer to the map.
54
55In **lines 9-15** we create a new map panel with several options:
56
57    ``renderTo``
58       This works the same as ``renderTo`` in a normal :class:`Ext.Panel`; it
59       can be an id string, DOM node, or :class:`Ext.Element` telling the
60       MapPanel where on the page it should insert itself.
61
62    ``height``, ``width``
63       These tell the map panel how much large it should draw itself.
64
65    ``map``
66       This is an :class:`OpenLayers.Map` which will be used as the actual map
67       inside the panel.
68
69    ``title``
70       This is the normal ``title`` property for ExtJS components. It will be
71       rendered nicely across the top of the panel.
72
73Working with the MapPanel
74=========================
75While using ``OpenLayers.Map.addLayer()`` to add layers is a convenient way to
76customize the map, a hand-coded, static list of map layers is not always what we
77want. In order to make manipulating the layer list more accessible to ExtJS
78widgets, the MapPanel exposes a `layers` property which is an
79:class:`Ext.data.Store` that will automatically be updated when layers are
80added, removed, changed, or reordered, with all of the Ext events that go with
81it. We can use this to, for example, populate an :class:`Ext.grid.GridPanel`
82with a live list of layers in the map::
83   
84    new Ext.grid.GridPanel({
85        renderTo: 'layerlist',
86        height: 200, width: 200,
87        autoScroll: true,
88        store: mapPanel.layers,
89        columns: [{name: 'name', heading: 'Name'}]
90    });
91
92
93In the HTML, you'll need to add a ``div`` for the grid panel to render itself in:
94
95.. code-block:: html
96
97    <div id='layerlist'></div>
98
99More information on the :class:`Ext.grid.GridPanel` is available from the `ExtJS
100API documentation
101<http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel>`_.
102
103.. note::
104  This code is only meant as an example to demonstrate the map panel's
105  integration with Ext. An :class:`Ext.tree.TreePanel` with
106  :class:`GeoExt.tree.LayerNode`\ s is a a much nicer way to display the layers in
107  a map, with optional support for hiding/showing layers and reordering. The
108  TreePanel approach is discussed in the :doc:`layertree-tutorial`.
Note: See TracBrowser for help on using the repository browser.