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/remote-features-tutorial.html @ 76

Revision 76, 16.0 KB checked in by djay, 10 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>Vector Data 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="Core Concepts" href="../primers/index.html" />
26    <link rel="prev" title="Map Tool Tutorial" href="control-button-tutorial.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="#">Vector Data 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="#">Vector Data Tutorial</a><ul>
69<li><a class="reference external" href="#reading-kml">Reading KML</a></li>
70</ul>
71</li>
72</ul>
73
74            <h4>Previous topic</h4>
75            <p class="topless"><a href="control-button-tutorial.html"
76                                  title="previous chapter">Map Tool Tutorial</a></p>
77            <h4>Next topic</h4>
78            <p class="topless"><a href="../primers/index.html"
79                                  title="next chapter">Core Concepts</a></p>
80        </div>
81      </div>
82
83
84    <div class="document">
85      <div class="documentwrapper">
86        <div class="bodywrapper">
87          <div class="body">
88           
89  <div class="section" id="vector-data-tutorial">
90<h1>Vector Data Tutorial<a class="headerlink" href="#vector-data-tutorial" title="Permalink to this headline">¶</a></h1>
91<p>Base layers such as OpenStreetMap and Google Maps are generally distributed in
92pre-rendered tiles using file formats such as PNG or JPG. While these are great
93for <strong>displaying</strong> maps, they are not very useful for getting at the data behind
94a map. They don&#8217;t allow you to provide functionality such as informational
95popups, selection and highlighting of individual features, and editing of data.
96For these, you need to use <strong>vector data</strong>, provided through file formats such
97as KML, GeoJSON, or GML which provide information about each feature on the map,
98rather than just the pixels to put on the screen.</p>
99<div class="admonition note">
100<p class="first admonition-title">Note</p>
101<p class="last">Web browsers impose a same origin policy on JavaScript code to protect
102users from cross-site scripting attacks. This means that if your GeoExt
103application is hosted on a different host or port from your vector data, you
104will need to configure a proxy service.</p>
105</div>
106<div class="section" id="reading-kml">
107<h2>Reading KML<a class="headerlink" href="#reading-kml" title="Permalink to this headline">¶</a></h2>
108<p>As an introduction to using vector data in GeoExt, let&#8217;s create a simple map
109that displays data from a KML. Copy <a href="../_downloads/sundials.kml"><strong class="xref">this sample KML file</strong></a> to the same directory with your GeoExt and Ext libraries. Then
110we can load it with some JavaScript:</p>
111<div class="highlight-javascript"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
112 2
113 3
114 4
115 5
116 6
117 7
118 8
119 9
12010
12111
12212
12313
12414
12515
12616
12717
12818
12919
13020
13121
13222
13323
13424
13525
13626
13727
13828
13929
14030
14131
14232</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>
143<span class="kd">var</span> <span class="nx">bluemarble</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>
144    <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
145    <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
146    <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
147<span class="p">);</span>
148<span class="kd">var</span> <span class="nx">sundials</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">Vector</span><span class="p">(</span><span class="s2">&quot;Sundials&quot;</span><span class="p">);</span>
149<span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">bluemarble</span><span class="p">);</span>
150<span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">sundials</span><span class="p">);</span>
151
152<span class="kd">var</span> <span class="nx">store</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">FeatureStore</span><span class="p">({</span>
153    <span class="nx">layer</span><span class="o">:</span> <span class="nx">sundials</span><span class="p">,</span>
154    <span class="nx">proxy</span><span class="o">:</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">ProtocolProxy</span><span class="p">({</span>
155        <span class="nx">protocol</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Protocol</span><span class="p">.</span><span class="nx">HTTP</span><span class="p">({</span>
156            <span class="nx">url</span><span class="o">:</span> <span class="s2">&quot;sundials.kml&quot;</span><span class="p">,</span>
157            <span class="nx">format</span><span class="o">:</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Format</span><span class="p">.</span><span class="nx">KML</span><span class="p">()</span>
158        <span class="p">})</span>
159    <span class="p">}),</span>
160    <span class="nx">fields</span><span class="o">:</span> <span class="p">[</span>
161        <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;title&#39;</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;string&#39;</span><span class="p">},</span>
162        <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;string&#39;</span><span class="p">}</span>
163    <span class="p">],</span>
164    <span class="nx">autoLoad</span><span class="o">:</span> <span class="kc">true</span>
165<span class="p">});</span>
166
167<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>
168    <span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;Sundials&quot;</span><span class="p">,</span>
169    <span class="nx">map</span><span class="o">:</span> <span class="nx">map</span><span class="p">,</span>
170    <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;mapPanel&#39;</span><span class="p">,</span>
171    <span class="nx">height</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
172    <span class="nx">width</span><span class="o">:</span> <span class="mi">600</span>
173<span class="p">});</span>
174</pre></div>
175</td></tr></table></div>
176<p>Here, we set up a map with two layers. <tt class="docutils literal"><span class="pre">bluemarble</span></tt> is a WMS layer, which you
177should have seen before in other tutorials. <tt class="docutils literal"><span class="pre">sundials</span></tt> is a vector layer,
178which handles client-side rendering of vector data.</p>
179<p>In <strong>line 10</strong> we initialize a <a title="GeoExt.data.FeatureStore" class="reference external" href="../lib/GeoExt/data/FeatureStore.html#GeoExt.data.FeatureStore"><tt class="xref docutils literal"><span class="pre">GeoExt.data.FeatureStore</span></tt></a>. This class
180functions as a normal <tt class="docutils literal"><span class="pre">Ext.data.Store</span></tt> to interoperate with ExtJS classes, as
181well as providing the ability to <strong>bind</strong> to an <tt class="docutils literal"><span class="pre">OpenLayers.Layer.Vector</span></tt> in
182order to display features on a map. In this example, we set up the store
183completely through constructor parameters:</p>
184<blockquote>
185<dl class="docutils">
186<dt><tt class="docutils literal"><span class="pre">layer:</span> <span class="pre">sundials</span></tt></dt>
187<dd>tells the store to render features using the <tt class="docutils literal"><span class="pre">sundials</span></tt> layer. This is
188equivalent to calling <tt class="docutils literal"><span class="pre">store.bind(sundials)</span></tt> after initializing the
189store.</dd>
190<dt><tt class="docutils literal"><span class="pre">proxy:</span> <span class="pre">new</span> <span class="pre">GeoExt.data.ProtocolProxy(</span></tt></dt>
191<dd>tells the store to use a <tt class="docutils literal"><span class="pre">ProtocolProxy</span></tt> for fetching features.
192<tt class="docutils literal"><span class="pre">ProtocolProxy</span></tt> wraps OpenLayers Protocol objects. Here we use an
193<tt class="docutils literal"><span class="pre">OpenLayers.Protocol.HTTP</span></tt> to fetch data over the web. The <tt class="docutils literal"><span class="pre">HTTP</span></tt>
194protocol works with a variety of <tt class="docutils literal"><span class="pre">OpenLayers.Format</span></tt> types; here we
195use <tt class="docutils literal"><span class="pre">KML</span></tt> to match our dataset. You can see all the available
196<tt class="docutils literal"><span class="pre">Protocol</span></tt>s and <tt class="docutils literal"><span class="pre">Format</span></tt>s in the <a class="reference external" href="http://openlayers.org">OpenLayers API documentation</a>.</dd>
197<dt><tt class="docutils literal"><span class="pre">fields:</span> <span class="pre">[...]</span></tt></dt>
198<dd>tells the store which extra properties (aside from just the geometry) to
199look for. Here, we know that KML includes a <tt class="docutils literal"><span class="pre">title</span></tt> and a
200<tt class="docutils literal"><span class="pre">description</span></tt> for each point, and that both are string values.</dd>
201<dt><tt class="docutils literal"><span class="pre">autoLoad:</span> <span class="pre">true</span></tt></dt>
202<dd>tells the store to go ahead and fetch the feature data as soon as the
203constructor finishes. This is equivalent to calling <tt class="docutils literal"><span class="pre">store.load()</span></tt>
204after the store is initialized.</dd>
205</dl>
206</blockquote>
207<p>Now we have a map with a background and some data hosted on our server. It looks
208like any other map; we can pan and zoom normally to navigate around.</p>
209<p>However, since GeoExt has access to the data <em>behind</em> the map, we now have some
210options that weren&#8217;t available to us before. For example, we can add a control
211that allows us to view the features in a tabular format:</p>
212<div class="highlight-javascript"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2132
2143
2154
2165
2176
2187
2198
2209</pre></div></td><td class="code"><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>
221    <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Sundials&#39;</span><span class="p">,</span>
222    <span class="nx">store</span><span class="o">:</span> <span class="nx">store</span>
223    <span class="nx">columns</span><span class="o">:</span> <span class="p">[{</span><span class="nx">heading</span><span class="o">:</span> <span class="s1">&#39;Title&#39;</span><span class="p">,</span> <span class="nx">dataIndex</span><span class="o">:</span> <span class="s1">&#39;title&#39;</span><span class="p">},</span>
224              <span class="p">{</span><span class="nx">heading</span><span class="o">:</span> <span class="s1">&#39;Description&#39;</span><span class="p">,</span> <span class="nx">dataIndex</span><span class="o">:</span> <span class="s1">&#39;description&#39;</span><span class="p">}],</span>
225    <span class="nx">renderTo</span><span class="o">:</span> <span class="s2">&quot;grid&quot;</span><span class="p">,</span>
226    <span class="nx">width</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span>
227    <span class="nx">height</span><span class="o">:</span> <span class="mi">600</span>
228<span class="p">});</span>
229</pre></div>
230</td></tr></table></div>
231</div>
232</div>
233
234
235          </div>
236        </div>
237      </div>
238      <div class="clearer"></div>
239    </div>
240    <div class="related">
241      <h3>Navigation</h3>
242      <ul>
243            <li class="right" style="margin-right: 10px">
244              <a href="../genindex.html" title="General Index"
245                 accesskey="I">index</a></li>
246            <li class="right" >
247              <a href="../modindex.html" title="Global Module Index"
248                 accesskey="M">modules</a> |</li>
249            <li class="right" >
250              <a href="../primers/index.html" title="Core Concepts"
251                 accesskey="N">next</a> |</li>
252            <li class="right" >
253              <a href="control-button-tutorial.html" title="Map Tool Tutorial"
254                 accesskey="P">previous</a> |</li>
255        <li><a href="../index.html">GeoExt</a> &raquo;</li>
256          <li><a href="index.html" >Tutorials</a> &raquo;</li>
257        <li><a href="#">Vector Data Tutorial</a></li>
258      </ul>
259    </div>
260
261    <div class="footer">
262      &copy; Copyright 2009-2010, GeoExt Community.
263    </div>
264  </body>
265</html>
Note: See TracBrowser for help on using the repository browser.