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 / Eseménykezelés; vektoros adatok megjelenítése

Tanulási útmutató

Összefoglalás

Az eseménykezelés alapjai. Marker és Vector layer. Saját vektoros adatok hozzáadása

Követelmény

  • A tanuló ismerje meg az eseménykezelés fogalmát.
  • Ismerje meg a Marker és Vector rétegek tulajdonságait, és az adatok hozzáadásának különböző megoldásait.

Önállóan megoldható feladatok

  • Készítsen egy KML fájlt legutóbbi utazásának nyomvonalából, és helyezze azt el egy OpenLayers térképen, a témához illeszkedő háttértérképpel.

Eseménykezelés; vektoros adatok megjelenítése

Eseménykezelés

A egyes OpenLayers objektumokhoz azok events.register() metódusával tudunk eseménykezelőt rendelni. Fontos megjegyezni, hogy amennyiben az eseményhez pozícióadat is tartozik (egér események), az mindig a térképet tartalmazó div elem koordináta-rendszerében értendő. Az egér helyét egyébként a map.events.getMousePosition függvény segítségével kaphatjuk meg, paraméterként átadva az eseményobjektumot. Ezt a térkép getLonLatFromPixel() metódusával számíthatjuk át a térkép aktuális vetületének rendszerébe. (A függvénynévben a „…LonLat…” részlet megtévesztő: csak akkor kapunk hosszúsági-szélességi adatokat, ha a térképünk négyzetes hengervetületben [WGS84 lat/lon] van. A megtévesztő név az OpenLayers kezdeti változataiból maradt fenn, amikor még nem volt lehetőség más vetületet választani)

A különböző vetületi és/vagy földrajzi koordináta-rendszerek közti átszámításhoz létre kell hoznunk egy-egy OpenLayers.Projection objektumpéldányt, a forrás és a cél rendszer beállításaival. Ha a Spherical Mercator (EPSG:3857) és WGS84 lat/lon (EPSG:4326) között számítunk át (ezeket ismeri az OpenLayers), másra nincs is szükség. Más vetületek esetén a proj4.js függvénykönyvtárt használhatjuk, vagy akár saját kezűleg is definiálhatjuk a transzformációs függvényeket.

A következő kódrészletet az init() függvénybe illesztve – feltételezve, hogy a map objektum egy gömbi Mercator-vetületű térképet tartalmaz – a térkép bármelyik pontjára kattintva megjelenik 3 koordinátapár: a kattintás helyének pixelkoordinátái a térképet tartalmazó <div> elemen belül, valamint a pont vetületi és földrajzi koordinátái.

Forráskód
...
   var wgs84=new OpenLayers.Projection('EPSG:4326');
   var merc=new OpenLayers.Projection('EPSG:3857');
...
     map.events.register("click", map, function(e) 
      {
        // a kattintás helye a térképet tartalmazó div-ben
        var pxPos=map.events.getMousePosition(e); 
        // átszámítva az aktuális vetületi rendszerbe
        var projPos=map.getLonLatFromPixel(pxPos);
        // átszámítva földrajzi koordinátákra
        var geoPos=projPos.clone().transform(merc,wgs84);
        alert("A kattintás helye\n - A dobozban: "+pxPos+"\n - Mercator-vetületben: "+projPos+"\n - WGS-84-ben: "+geoPos);
      });
...

Egy koordináta-páron (amit általában egy OpenLayers.LonLat vagy OpenLayers.Geometry.Point objektum tárol) vetület-transzformációt az objektum transform() metódusával hajthatunk végre. Mivel ilyenkor az adott objektum „saját magán” végzi el a transzformációt, a korábbi koordináták elvesznek. Ha ezekre is szükségünk van, akkor a fenti példában is látható módon készítsünk egy másolatot a clone() metódussal, ami minden OpenLayers objektumnál elérhető.

A különféle objektumok más és más eseményeket tudnak kiváltani. Ezek közül a leggyakrabban használtak a következők:

Egér események: ezek szinte minden, a képernyőn megjelenő elemhez hozzárendelhetők.

A különböző rétegekhez tartozó események:

Szerencsére viszonylag ritkán kell saját magunknak eseménykezelőt programoznunk, hiszen a sokféle control között általában találhatunk olyat, amely elvégzi a kívánt feladatot.

Vissza a tartalomjegyzékhez

Marker layer

A Marker layer az egyik legegyszerűbb rétegtípus: pontokat (pontosabban helyjelzőket [OpenLayers.Marker objektumok]) helyezhetünk el rajta, melyeket valamilyen ikon jelöl. A Marker layer konstruktorának első paramétere a réteg neve. Ezen kívül lehet még egy második paraméter is, ami egy objektum a kezdeti beállításokkal. A réteg addMarker() függvénye segítségével helyezhetjük el a pontokat. A következő példában minden egérkattintással lerakunk egy markert:

Forráskód
...
     // csinálunk egy marker layert
     var markers=new OpenLayers.Layer.Markers("pontok");
     map.addLayer(markers);
...
     map.events.register("click", map, function(e) 
      {
        // a kattintás helye a térképet tartalmazó div-ben
        var pxPos=map.events.getMousePosition(e); 
        // átszámítva az aktuális vetületi rendszerbe
        var projPos=map.getLonLatFromPixel(pxPos);
        // új marker
        var m=new OpenLayers.Marker(projPos);
        markers.addMarker(m);
      });
...

Az OpenLayers.Marker konstruktornak lehet egy második paramétere is: egy OpenLayers.Icon objektum, amellyel megadhatjuk, hogy milyen ikon jelölje a térképen az adott pontot. Az ikon létrehozásakor megadjuk annak URL-jét, a méretét (egy OpenLayers.Size objektumban vagy bármilyen más objektumban, ami tartalmaz w [szélesség] és h [magasság] tulajdonságokat), és az alkalmazandó eltolást, ha nem az ikon bal felső sarka jelöli a pontot (egy OpenLayers.Pixel objektum, vagy bármilyen más, ami tartalmaz x és y tulajdonságokat). Ezek az ikon objektumok egyszer használatosak, azaz minden ponthoz egy-egy újabb példányt kell létrehoznunk:

Forráskód
...
        // új marker
        var m=new OpenLayers.Marker(projPos, new OpenLayers.Icon(’icon.png’, {w:21,h:25}, {x:-10.5,y:-25}));
        markers.addMarker(m);
...

A Marker layer lehetőségei meglehetősen korlátozottak (nem jeleníthetünk meg neveket a jelzők mellett, stb.), emiatt a legtöbb esetben célszerűbb a Vector layer alkalmazása pontszerű elemekkel.

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.