|
|
| (9 közbenső módosítás ugyanattól a szerkesztőtől nincs mutatva) |
| 1. sor: |
1. sor: |
| | | | |
| − | Az OpenLayers egy olyan JavaScipt programcsomag, mely lehetővé teszi geoadatok böngészőben történő megjelenítését. Maga a programcsomag is JavaScriptben íródott, és nyílt forráskódú, BSD2 licensszel rendelkezik.
| |
| − |
| |
| − | == Főbb funkcionalitások ==
| |
| − |
| |
| − | Az OpenLayers 3 (OL3) alapvetően az OpenLayers webes térkép megjelenítő, kezelő csomag újratervezése. A második verzióját is széles kőrben használták, de mivel az korábbi Javascript elemeken alapult, most már újra korszerűsítésre volt igény. Az OL3 alapoktól újra volt építve modern tervezési minták alkalmazásával.
| |
| − |
| |
| − | A harmadik kiadás arra irányult, hogy lehetővé tegye a második verzió által támogatott lehető legtöbb funkcionalitást, széles körben támogatva különböző kereskedelmi és ingyenes forrásokat, és a legismertebb vektor adat formátumokat. Ahogyan a második verzióban, az adat bármilyen vetületben lehet. Ugyanakkor a harmadik kiadás hozzáad néhány új funkcionalitást, mint például a könnyű forgathatóságot, valamint a térképek animálását.
| |
| − | A jelenlegi könyvtár 3 interpretert (renderer) foglal magába: Canvas, DOM, és WebGL. Mindhárom támogatja úgy a raszter adatokat csempe/kép szerverektől, illetve vektor adatokat; a WebGL csak pont vektorokat támogat (Point vectors), és nem támogat címkéket. Természetesen csak azon böngészők esetén támogatják a Canvast, melyekben van Canvas interpreter. A WebGL esetében is hasonlóan, csak azon eszközök és böngészők esetében használható, melyek támogatják a WebGL-t. Az Internet Explorer 9 előtt verziók egyáltalán nem kapnak támogatást.
| |
| − |
| |
| − | A könyvtár alkalmas desktop/laptop használat esetén, úgy mint mobil eszköz esetén is.
| |
| − | Úgy van megtervezve az alkalmazás, hogy a főbb új irányzatokkal bővíthető legyen a következő kiadást. (pl. 3D térképek megjelenítése, WebGL használata nagyméretű vektoradatok megjelenítéséhez.)
| |
| − |
| |
| − | == Felépítés ==
| |
| − |
| |
| − | Az OL3 nagy mértékben épül a Google Closure eszköztárára, nagy mértékben él a Closure könyvtár (Closure Library) nyújtotta segítséggel – például a DOM vagy az esemény kezelés résznél. Ez lehetővé teszi, hogy a fejlesztők a térképészeti funkciókra koncentrálhassanak, tudva, hogy az alá épült szoftver megbízható, jól tesztelt, böngésző szinten egyezményesített. A Closure Library sajátos tervezésének előnye, hogy a Closure fordító (Clusure Compiler) optimalizálni tudja, ráadásul olyan mértékben tömörítve, hogy az messzemenően meghaladja az jelenlegi kínálatokat. Az OL3-nak is nagy előnye származik ebből.
| |
| − | A Closure Compiler használata egyben azt is jelenti, hogy a tulajdonságok és a metódusok át vannak nevezve az előzőekhez képest. A hosszú, jelentést megnevező nevek többsége rövidebbre lett cserélve – ezért nem igazán hatékonyan használhatóak az alkalmazásokban, melyek a könyvtárat használják. A megoldást az a módszer nyújtja, hogy kell explicit módon exportálni őket. Ez azt jelenti, hogy az exportált nevek (vagyis azok, melyek nincsenek átnevezve), képezik tulajdonképpen a publikus API-ját a könyvtárnak. Ezek az exportálható tulajdonságok, metódusok vannak megjelölve a forrásban, és dokumentálva vannak az „API docs”-ban. Ez a nyilvánosan támogatott API-ja a könyvtárnak.
| |
| − |
| |
| − | '''Objektumok és névterek'''
| |
| − |
| |
| − | Az OL3 a Closure könyvtárhoz hasonló felépítésű. A legfelső szintet az ol névtér képezi (alapértelmezetten, var ol = {}). Alábbi szinteken a következők vannak:
| |
| − | * Alábbi névterek, mint az ol.layer; kisbetűvel kezdődik a nevük
| |
| − | * Egyszerű objektumok, melyek statikus tulajdonságokat és metódusokat használnak, mint pl. ol.animation; ezek is kisbetűvel kezdődnek.
| |
| − | * Típusok, melyek nagybetűvel kezdődnek. Ezek nagyjából „osztályok”, ami itt azt jelenti, hogy konstruktor függvény van prototípusos öröklődéssel, mint az ol.Map vagy ol.layer.Vector (Vector osztály a layer névtérben). Ugyanakkor vannak más, egyszerű típusok, mint pl. ol.Extent, amely egy tömb.
| |
| − |
| |
| − | Osztály névtereknek, mint pl. az ol.layer van egy alap (base) osztály típusuk, mint például ol.layer.Layer. Ezek nagyjából absztrakt osztályok, melyekből a más osztályok örökölnek.
| |
| − | A forrás állományok hasonlóan vannak rendezve, minden névtér számára egy külön mappa. Neveik kisbetűsek, és az alosztályok ismétlik a örökölt osztály nevét is, mint pl. ol.layer.vectorlayers.js.
| |
| − | Az OL3 azt a konvenciót követi, hogy a privát tulajdonságok és metódusok, vagyis amelyek nem részei az API-nak, alul-vonásban végződnek. Általában a példány típusú tulajdonságok privátok, és elérésük erre célzott függvényekkel lehetséges.
| |
| − |
| |
| − | == Teljes build, testre-szabott build ==
| |
| − |
| |
| − | Azt a fordítás, mely minden exportálható nevet tartalmaz, teljes build-nek (full build) nevezik. Egy befogadó verzió ebből elérhető, mely minden alkalmazás számára használható.
| |
| − | Closure fordítóval az exportálások fordítási időben meghatározhatóak, így saját fordítások (build-ek) könnyedén hozhatóak létre, melyek az adott weboldalhoz, alkalmazáshoz illőek. A testre-szabott build (custom build) csak azokat a tulajdonságokat, metódusokat exportálja, melyeket az adott weblap vagy alkalmazás valóban használni fog. Mivel a teljes build (full build) nagyon nagy méretű, és valószínűleg egyre nagyobb méretűvé fog válni amikor új lehetőségeket kerülnek az API-ba, nagyon ajánlott testre-szabott build-et létrehozni a weblapok számára.
| |
| − |
| |
| − | == Alap komponensek ==
| |
| − |
| |
| − | === Térkép ===
| |
| − |
| |
| − | Az OpenLayers3 fő komponense a térkép (ol.Map). Egy target típusú elem zárja körül (pl. egy div elem). A térkép minden tulajdonsága beállítható már létrehozása idején, de beállító metódusok is rendelkezésre állnak. (pl. setTarget()).
| |
| − |
| |
| − |
| |
| − | <code>
| |
| − | <div id="map" style="width: 100%, height: 400px"></div>
| |
| − | <script>
| |
| − | var map = new ol.Map({target: 'map'});
| |
| − | </script>
| |
| − | </code>
| |
| − |
| |
| − |
| |
| − | === Nézet ===
| |
| − |
| |
| − | Az ol.Map nem felelős a középpont(center), nagyítás(zoom) mértékének számontartásáért. Ezt a nézet (view) típusú elem tudja biztosítani.
| |
| − |
| |
| − | <code>
| |
| − |
| |
| − | map.setView(new ol.View({
| |
| − | center: [0, 0],
| |
| − | zoom: 2
| |
| − | }));
| |
| − |
| |
| − | </code>
| |
| − |
| |
| − | A nézet elem rendelkezik a vetületről (projection) is. Meghatározza a középpont koordináta rendszerét, és a lépték mértékét. Ha nincsen külön megadva, akkor az alapból beállított vetület a Spherical Mercator (EPSG:3857), és a lépték mértékegysége a méter.
| |
| − | A nagyítás mértéke szorosan összefügg a felbontás nagyságával. Három tulajdonság rögzíti a fontos paramétereket. A maxZoom a rendelkezésre álló nagyítási szintek számát jelöli, alapbeállításban 28. A maxResolution a legnagyobb felbontást jelenti, a 0. nagyítási szint esetén ennyi egység van pixelenként. A további nagyítási szintek úgy állnak elő, hogy az előző szint maxResolution értéke a zoomFactor értékkel lesz osztva. (Alapbeállítás a zoomFactor esetében a 2.)
| |
| − |
| |
| − |
| |
| − | === Forrás ===
| |
| − |
| |
| − | Hogy távoli adatot tudjunk biztosítani a térképrétegek számára, az OpenLayers 3 az ol.source.Source alosztályokat kínálja. Segítségükkel különböző ingyenes és kereskedelmi térképszolgáltatókat tudunk elérni, mint OpenStreetMap, Bing (térkép csempe szolgáltatások), WMS, WMTS (OBC források), GeoJSON, KML (vektoradatok).
| |
| − |
| |
| − | <code>
| |
| − | var osmSource = new ol.source.OSM();
| |
| − | </code>
| |
| − |
| |
| − | === Rétegek ===
| |
| − |
| |
| − | A réteg(Layer) egy source elem által biztosított adatok megjelenítéséért felelős. Az OpenLayers 3 három fő layer típust kínál: ol.layer.Tile, ol.layer.Image, ol.layer.Vector.
| |
| − | * ol.layer.Tile: olyan réteg forrásokhoz kell rendelni, melyek előre generáltak, rácsban lévő csempés képek, nagyítási mérték szerint rendezve a bizonyos felbontásnak megfelelően.
| |
| − | * ol.layer.Image: szerver által generalizát képekhez, melyek tetszőleges bővítésre, felbontásra nyitottak.
| |
| − | * ol.layer.Vector: olyan vektor adatokhoz, melyek kliens oldalon vannak generalizálva.
| |
| − |
| |
| − | <code>
| |
| − | var osmLayer = new ol.layer.Tile({source: osmSource});
| |
| − | map.addLayer(osmLayer);
| |
| − | </code>
| |
| − |
| |
| − | === Összefoglaló példa ===
| |
| − |
| |
| − | Összefoglalva a példa a következőképpen nézne ki:
| |
| − |
| |
| − | <code>
| |
| − | <div id="map" style="width: 100%, height: 400px"></div>
| |
| − | <script>
| |
| − | new ol.Map({
| |
| − | layers: [
| |
| − | new ol.layer.Tile({source: new ol.source.OSM()})
| |
| − | ],
| |
| − | view: new ol.View({
| |
| − | center: [0, 0],
| |
| − | zoom: 2
| |
| − | }),
| |
| − | target: 'map'
| |
| − | });
| |
| − | </script>
| |
| − | </code>
| |
