Bienvenue sur

Bienvenue sur , 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/remote-features-tutorial.txt @ 76

Revision 76, 4.5 KB checked in by djay, 7 years ago (diff)

Ajout du répertoire web

  • Property svn:executable set to *
1.. highlight:: javascript
2   :linenothreshold: 4
5Vector Data Tutorial
8Base layers such as OpenStreetMap and Google Maps are generally distributed in
9pre-rendered tiles using file formats such as PNG or JPG. While these are great
10for **displaying** maps, they are not very useful for getting at the data behind
11a map. They don't allow you to provide functionality such as informational
12popups, selection and highlighting of individual features, and editing of data.
13For these, you need to use **vector data**, provided through file formats such
14as KML, GeoJSON, or GML which provide information about each feature on the map,
15rather than just the pixels to put on the screen.
17.. note:: Web browsers impose a same origin policy on JavaScript code to protect
18    users from cross-site scripting attacks. This means that if your GeoExt
19    application is hosted on a different host or port from your vector data, you
20    will need to configure a proxy service.
22Reading KML
25As an introduction to using vector data in GeoExt, let's create a simple map
26that displays data from a KML. Copy :download:`this sample KML file
27<sundials.kml>` to the same directory with your GeoExt and Ext libraries. Then
28we can load it with some JavaScript::
30    var map = new Openlayers.Map();
31    var bluemarble = new OpenLayers.Layer.WMS(
32        "Global Imagery",
33        "",
34        {layers: "bluemarble"}
35    );
36    var sundials = new OpenLayers.Layer.Vector("Sundials");
37    map.addLayer(bluemarble);
38    map.addLayer(sundials);
40    var store = new{
41        layer: sundials,
42        proxy: new{
43            protocol: new OpenLayers.Protocol.HTTP({
44                url: "sundials.kml",
45                format: new OpenLayers.Format.KML()
46            })
47        }),
48        fields: [
49            {name: 'title', type: 'string'},
50            {name: 'description', type: 'string'}
51        ],
52        autoLoad: true
53    });
55    var mapPanel = new GeoExt.MapPanel({
56        title: "Sundials",
57        map: map,
58        renderTo: 'mapPanel',
59        height: 400,
60        width: 600
61    });
63Here, we set up a map with two layers. ``bluemarble`` is a WMS layer, which you
64should have seen before in other tutorials. ``sundials`` is a vector layer,
65which handles client-side rendering of vector data.
67In **line 10** we initialize a :class:``\ . This class
68functions as a normal ```` to interoperate with ExtJS classes, as
69well as providing the ability to **bind** to an ``OpenLayers.Layer.Vector`` in
70order to display features on a map. In this example, we set up the store
71completely through constructor parameters:
73    ``layer: sundials``
74        tells the store to render features using the ``sundials`` layer. This is
75        equivalent to calling ``store.bind(sundials)`` after initializing the
76        store.
78    ``proxy: new``
79        tells the store to use a ``ProtocolProxy`` for fetching features.
80        ``ProtocolProxy`` wraps OpenLayers Protocol objects. Here we use an
81        ``OpenLayers.Protocol.HTTP`` to fetch data over the web. The ``HTTP``
82        protocol works with a variety of ``OpenLayers.Format`` types; here we
83        use ``KML`` to match our dataset. You can see all the available
84        ``Protocol``\ s and ``Format``\ s in the `OpenLayers API documentation
85        <>`_.
87    ``fields: [...]``
88        tells the store which extra properties (aside from just the geometry) to
89        look for. Here, we know that KML includes a ``title`` and a
90        ``description`` for each point, and that both are string values.
92    ``autoLoad: true``
93        tells the store to go ahead and fetch the feature data as soon as the
94        constructor finishes. This is equivalent to calling ``store.load()``
95        after the store is initialized.
97Now we have a map with a background and some data hosted on our server. It looks
98like any other map; we can pan and zoom normally to navigate around.
100However, since GeoExt has access to the data *behind* the map, we now have some
101options that weren't available to us before. For example, we can add a control
102that allows us to view the features in a tabular format::
104    new Ext.grid.GridPanel({
105        title: 'Sundials',
106        store: store
107        columns: [{heading: 'Title', dataIndex: 'title'},
108                  {heading: 'Description', dataIndex: 'description'}],
109        renderTo: "grid",
110        width: 200,
111        height: 600
112    });
Note: See TracBrowser for help on using the repository browser.