| 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 — 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 …" tabindex="3" onblur="if(this.value=='') this.value='Search …';" onfocus="if(this.value=='Search …') 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> »</li> |
|---|
| 59 | <li><a href="index.html" accesskey="U">Tutorials</a> »</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 |
|---|
| 92 | pre-rendered tiles using file formats such as PNG or JPG. While these are great |
|---|
| 93 | for <strong>displaying</strong> maps, they are not very useful for getting at the data behind |
|---|
| 94 | a map. They don’t allow you to provide functionality such as informational |
|---|
| 95 | popups, selection and highlighting of individual features, and editing of data. |
|---|
| 96 | For these, you need to use <strong>vector data</strong>, provided through file formats such |
|---|
| 97 | as KML, GeoJSON, or GML which provide information about each feature on the map, |
|---|
| 98 | rather 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 |
|---|
| 102 | users from cross-site scripting attacks. This means that if your GeoExt |
|---|
| 103 | application is hosted on a different host or port from your vector data, you |
|---|
| 104 | will 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’s create a simple map |
|---|
| 109 | that 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 |
|---|
| 110 | we 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 |
|---|
| 120 | 10 |
|---|
| 121 | 11 |
|---|
| 122 | 12 |
|---|
| 123 | 13 |
|---|
| 124 | 14 |
|---|
| 125 | 15 |
|---|
| 126 | 16 |
|---|
| 127 | 17 |
|---|
| 128 | 18 |
|---|
| 129 | 19 |
|---|
| 130 | 20 |
|---|
| 131 | 21 |
|---|
| 132 | 22 |
|---|
| 133 | 23 |
|---|
| 134 | 24 |
|---|
| 135 | 25 |
|---|
| 136 | 26 |
|---|
| 137 | 27 |
|---|
| 138 | 28 |
|---|
| 139 | 29 |
|---|
| 140 | 30 |
|---|
| 141 | 31 |
|---|
| 142 | 32</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">"Global Imagery"</span><span class="p">,</span> |
|---|
| 145 | <span class="s2">"http://maps.opengeo.org/geowebcache/service/wms"</span><span class="p">,</span> |
|---|
| 146 | <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">"bluemarble"</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">"Sundials"</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">"sundials.kml"</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">'title'</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">},</span> |
|---|
| 162 | <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">'description'</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'string'</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">"Sundials"</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">'mapPanel'</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 |
|---|
| 177 | should have seen before in other tutorials. <tt class="docutils literal"><span class="pre">sundials</span></tt> is a vector layer, |
|---|
| 178 | which 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 |
|---|
| 180 | functions as a normal <tt class="docutils literal"><span class="pre">Ext.data.Store</span></tt> to interoperate with ExtJS classes, as |
|---|
| 181 | well as providing the ability to <strong>bind</strong> to an <tt class="docutils literal"><span class="pre">OpenLayers.Layer.Vector</span></tt> in |
|---|
| 182 | order to display features on a map. In this example, we set up the store |
|---|
| 183 | completely 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 |
|---|
| 188 | equivalent to calling <tt class="docutils literal"><span class="pre">store.bind(sundials)</span></tt> after initializing the |
|---|
| 189 | store.</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> |
|---|
| 194 | protocol works with a variety of <tt class="docutils literal"><span class="pre">OpenLayers.Format</span></tt> types; here we |
|---|
| 195 | use <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 |
|---|
| 199 | look 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 |
|---|
| 203 | constructor finishes. This is equivalent to calling <tt class="docutils literal"><span class="pre">store.load()</span></tt> |
|---|
| 204 | after 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 |
|---|
| 208 | like 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 |
|---|
| 210 | options that weren’t available to us before. For example, we can add a control |
|---|
| 211 | that 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 |
|---|
| 213 | 2 |
|---|
| 214 | 3 |
|---|
| 215 | 4 |
|---|
| 216 | 5 |
|---|
| 217 | 6 |
|---|
| 218 | 7 |
|---|
| 219 | 8 |
|---|
| 220 | 9</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">'Sundials'</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">'Title'</span><span class="p">,</span> <span class="nx">dataIndex</span><span class="o">:</span> <span class="s1">'title'</span><span class="p">},</span> |
|---|
| 224 | <span class="p">{</span><span class="nx">heading</span><span class="o">:</span> <span class="s1">'Description'</span><span class="p">,</span> <span class="nx">dataIndex</span><span class="o">:</span> <span class="s1">'description'</span><span class="p">}],</span> |
|---|
| 225 | <span class="nx">renderTo</span><span class="o">:</span> <span class="s2">"grid"</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> »</li> |
|---|
| 256 | <li><a href="index.html" >Tutorials</a> »</li> |
|---|
| 257 | <li><a href="#">Vector Data Tutorial</a></li> |
|---|
| 258 | </ul> |
|---|
| 259 | </div> |
|---|
| 260 | |
|---|
| 261 | <div class="footer"> |
|---|
| 262 | © Copyright 2009-2010, GeoExt Community. |
|---|
| 263 | </div> |
|---|
| 264 | </body> |
|---|
| 265 | </html> |
|---|
