Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

Open Source rendszerek a térinformatikai gyakorlatban – Interaktív webtérképek készítése OpenLayers és MapServer használatával / Az OpenLayers alapjai. Egyszerű térképes weboldalak létrehozása

Tanulási útmutató

Összefoglalás

Általános ismeretek az OpenLayersről; a térkép beágyazása weboldalba, vetület és egyéb paraméterek beállítása, több réteg alkalmazása egy térképen.

Követelmény

A tanuló ismerje meg az OpenLayers térképek weboldalba illesztésének módját.

Önállóan megoldható feladatok

Készítsen olyan térképes weboldalt, mely az OpenStreetMap segítségével lakóhelye (vagy munkahelye, egyéb érdekes hely) szűkebb (1-2 km-es) környezetét.

Az OpenLayers alapjai. Egyszerű térképes weboldalak létrehozása

Mi az az OpenLayers?

Az OpenLayers egy nyílt forráskódú kliens oldali JavaScript függvénykönyvtár, melynek segítségével különféle forrásokból származó térképi adatok jeleníthetők meg interaktív térképként weboldalakon. Az OpenLayers első változatát a MetaCarta nevű amerikai cég fejlesztette ki 2006-ban. 2007 novemberétől a projektet átvette az Open Source Geospatial Foundation (OSGeo).

Fontos megjegyezni, hogy az OpenLayers csak az adatok megjelenítését végzi, ezért önmagában nem sokat ér: mindenképpen szükség van a háttérben valamilyen adatforrásra. Ez utóbbi rendkívül sokféle lehet: egy egyszerű raszteres képtől kezdve az OpenStreetMap térképén és a különféle WMS, TMS szervereken keresztül különféle vektoros adatszolgáltatókig rengeteg lehetőség akad.

Vissza a tartalomjegyzékhez

Dokumentáció, letöltések

Az OpenLayers weboldala, dokumentációval, és letölthető anyagokkal

Az OpenLayers kódjait kétféleképpen használhatjuk: vagy letöltjük a szükséges fájlokat szerverünkre, vagy csak linkeljük az openlayers.org-on található script fájlt. Ez utóbbinak előnye, hogy mindig a legfrissebb változattal fogunk dolgozni, hátránya viszont, hogy az oldalaink lassabban töltődnek be, illetve, hogy a térképünk teljesen használhatatlan lesz, ha valami miatt az openlayers.org szervere nem elérhető.

Vissza a tartalomjegyzékhez

Az OpenLayers térképek felépítése

Az OpenLayers térképek különféle, egymáshoz kapcsolódó JavaScript objektumokból állnak. A legfontosabb ezek közül maga a térkép objektum (OpenLayers.Map), mely magát a térképet reprezentálja. Minden térkép tartalmaz egy vagy több réteget (OpenLayers.Layer.*), amelyek típusuktól függően egyszerre vagy külön-külön megjeleníthetők a térképen. Több réteg egyidejű megjelenítését úgy kell elképzelni, mintha átlátszó fóliákra nyomtatott rajzokat helyeznénk egymásra: a magasabban lévő rétegeken található elemek kifedik az alsóbb rétegek képét.

A térképen és a rétegeken kívül a legfontosabb objektum család az úgynevezett vezérlőké (OpenLayers.Control.*), melyekkel különféle kezelőszerveket adhatunk a térképünkhöz. Ezen kívül természetesen még számtalan objektum-típus fordul elő a kódokban, melyek általában különféle adatszerkezeteket vagy programozási mechanizmusokat valósítanak meg.

Vissza a tartalomjegyzékhez

A legegyszerűbb példa

Hozzunk létre egy HTML fájlt a következő tartalommal:

Forráskód
<!DOCTYPE html>
<html>
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>OpenLayers térkép</title>
  <script src="http://openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript">
   function init() // az oldal betöltésekor végrehajtandó függvény
   {
     // létrehozzuk a térképet a 'terkep_helye' azonosítójú div elemben
     var map = new OpenLayers.Map('terkep_helye', );
     // létrehozunk egy OSM réteget és hozzáadjuk a térképhez    
     map.addLayer(new OpenLayers.Layer.OSM());
     // kb. Magyarországra nagyítunk
     map.zoomToExtent(new OpenLayers.Bounds(1790000,5730000,2560000,6210000));
   }
  </script>  
 </head>
 <body onload="init()">
   <h1>OpenLayers térkép</h1>
   <div style="width:650px; height:400px" id="terkep_helye"></div>
 </body>
</html>

Magyarázatok a fenti kódhoz:

Magyarázat

A térképet a weboldalon egy <div> elem fogja tartalmazni. Ezt definiálnunk kell a HTML dokumentumban. Fontos megadnunk a térkép méretét (a style tulajdonságban) és az elem azonosítóját (id), ami jelen esetben "terkep_helye".

A térképes weboldal lelke a térképet megjelenítő JavaScript kód lesz, ami két részből áll:

  • egyrészt az OpenLayers függvénykönyvtárból, amit ebben a példában az http://openlayers.org/api/OpenLayers.js címről linkelünk be;
  • másrészt a térképet létrehozó kódsorokból, amiket az init() nevű függvényben helyezünk el, amely függvényt a weboldal betöltésekor automatikusan végrehajt a böngésző, a <body> tagben elhelyezett onload="init()" eseménykezelő miatt.

Az init() függvényben először létrehozunk egy OpenLayers.Map objektumot; ez lesz maga a térkép. Az objektumkonstruktor két paramétert vár: a térképet tartalmazó <div> elem id-jét, valamint egy objektumot, amelyben különféle kulcs:érték párokkal a térkép működését befolyásoló további paramétereket lehet megadni. (Ebben a példában ez az objektum üres.)

A térképhez ezután hozzáadjuk az OpenLayers.Layer.OSM objektum egy példányát, ami egy OpenStreetMap (a továbbiakban OSM) térképi réteget eredményez. Ebben a példában ez az egyetlen rétege a térképnek.

Végül beállítjuk a térkép kezdeti kivágatát az ábrázolandó terület határoló koordinátáinak megadásával. Ezek a koordináták mindig a térkép vetületi koordináta-rendszerében értendők, ami jelen esetben az úgynevezett gömbi Mercator-vetület (Spherical Mercator). A legtöbb népszerű internetes térképszolgáltatás térképe ebben a vetületben van, többek között a Google Maps, és a példában használt OSM is. Fontos megjegyezni, hogy a térkép kivágata nem minden esetben fog pontosan megegyezni a megadott határokkal, lehet azoknál bővebb is. Ennek két oka van. Egyrészt előfordulhat, hogy a megjelenő térkép szélességének és magasságának aránya (ami a tartalmazó <div> elem méretéből adódik) nem felel meg a kívánt kivágat arányainak. A másik ok pedig, hogy bizonyos rétegtípusoknál (és ilyen az OSM is) előre meghatározott nagyítási fokozatok vannak.

Az animáció bemutatja az alapvető műveleteket egy OpenLayers térképen: a kivágat elhúzása, nagyítás és kicsinyítés.

Flash lejátszó letöltése

Navigálás egy OpenLayers térképen

Vissza a tartalomjegyzékhez

A megjelenített térkép vetületének beállítása

Ha a térképszolgáltató szerver ezt lehetővé teszi, a térképünk vetületét is meghatározhatjuk. A következő példában a térképet MapServer (lásd később) adja, vektoros alapanyagból dolgozva. Így semmi akadálya annak, hogy a legkülönfélébb vetületekben készüljön az általa küldött raszteres kép, például akár EOV-ban (Egységes Országos Vetületben).

Cseréljük ki az előző példa init() függvényét a következőre:

Forráskód
...
   function init() // az oldal betöltésekor végrehajtandó függvény
   {
     // létrehozzuk a térképet a 'terkep_helye' azonosítójú div elemben
     var map = new OpenLayers.Map('terkep_helye', 
      {
        projection: "EPSG:23700", // Az EPSG:23700 az EOV kódja
        maxExtent: new OpenLayers.Bounds(400000,45000,950000,380000), // A térkép határai EOV koordinátákkal megadva
        maxResolution: 1000, // zoom=0 esetén 1 pixel 1000 méter legyen.
        units: "m"
      } );
     // létrehozunk egy WMS réteget
     var wms = new OpenLayers.Layer.WMS( "MapServer mintatérkép",
         'http://mercator.elte.hu/cgi-bin/mapserv?map=/home/oktatok/saman/public_html/hu/okt/mapserver/mo.map',
         {
           layers: ['kozig'],
           format: 'image/png'
         },
         { singleTile: true });
     // hozzáadjuk a réteget a térképhez    
     map.addLayer(wms);
     // kb. Magyarországra nagyítunk
     map.zoomToMaxExtent();
   }
...
Magyarázat

Ebben a példában sok újdonság található az előzőhöz képest. Először is, a Map objektum létrehozásakor megadtunk egy sor paramétert a konstruktorfüggvény második argumentumában:

  • a térkép vetületét (projection): az OpenLayersben a különféle térképvetületeket általában azok EPSG kódjával azonosítjuk. (Az EPSG [European Petrol Survey Group] egy nemzetközileg elfogadott adatbázis rengeteg különböző koordinátarendszer pontos definíciójával és a köztük használható átszámítások leírásával). Az EOV kódja a 23700.
  • Az ábrázolt terület határait (maxExtent): ennek megadása azt is jelenti, hogy a térképet nem húzhatjuk-nagyíthatjuk úgy, hogy teljes egészében ezen a határon kívüli területet mutasson. A térkép objektum ZoomToMaxExtent() függvényének meghívása is ezt a kivágatot fogja beállítani.
  • A legkisebb nagyítás méretarányát (maxResolution): ezzel azt határozzuk meg hogy a legkisebb nagyítási fokozaton (zoom=0) a vetületi koordinátarendszer mértékegységében számítva hány egységnek feleljen meg egy képi pixel.
  • A térképi koordináták mértékegységét (units): jelen esetben ez „m”, azaz méter.

A másik érdekesség az egyetlen térképi réteg típusa: az OpenLayers.Layer.WMS objektum segítségével olyan réteget hozunk létre, mely egy WMS szolgáltatástól kapja a raszteres térképet. Az objektum létrehozásakor 4 argumentumot kell megadni: a réteg nevét, a WMS szolgáltatás URL-jét, a WMS szolgáltatónak küldendő kiegészítő információkat (itt lehet megadni pl. a kért rétegek nevét, illetve a képformátumot), végül az esetleges kiegészítő információkat. Ez utóbbinál ebben az esetben csak a singleTile paramétert állítjuk true-ra, ami azt jelenti, hogy mindig egy darabban készül el az aktuális kivágatnak megfelelő térkép, nem mozaikdarabokból. Ez a beállítás akkor célszerű, ha a térkép neveket is tartalmaz: e nélkül a beállítás nélkül könnyen előfordulhat, hogy egy név két szomszédos mozaikdarabra is rákerül.

Megjegyzés

Megjegyzés: az OpenLayers önmagában jelenleg csak kétféle vetületet ismer: az úgynevezett négyzetes hengervetületet, amikor a WGS84 földrajzi koordinátákat derékszögű koordinátaként értelmezzük (EPSG: 4326) és a már említett gömbi Mercatort (EPSG: 3857 vagy néha 900913). Ettől függetlenül megjelenít akármilyen vetületű (pl. EOV) térképet is. Ilyenkor utasítja a WMS szervert, hogy ilyen vetületű térképet küldjön. Amennyiben csak egyféle vetületű alapanyaggal dolgozunk, ez nem is okoz problémát. Ha viszont valamilyen okból kifolyólag átszámításokat is kell végezni a különféle koordináta-rendszerek között, akkor azokat definiálnunk kell (lásd később).

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A Társadalominformatika: moduláris tananyagok, interdiszciplináris tartalom- és tudásmenedzsment rendszerek fejlesztése az Európai Unió támogatásával, az Európai Szociális Alap társfinanszírozásával, az ELTE TÁMOP 4.1.2.A/1-11/1-2011-0056 projekt keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.