|
|
| (6 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>
| |
| − |
| |
| − |
| |
| − | == Testre-szabott build-ek készítése ==
| |
| − |
| |
| − | Az OpenLayers 3 fordítói eszközök használják a Node-ot és a Java-t, tehát ezek fel kell legyenek telepítve a fejlesztő gépén. A node –version, java –version parancsok segítségével ellenőrizhető, hogy a Java és a Node fel van-e telepítve, a fejlesztői útmutató (developer guide) a minimum verziót is rögzíti.
| |
| − | Következő lépésként le kell tölteni az OpenLayers 3-at, hiszen a testre-szabott build-hez szükség van a forrás állományokra és sajátos build szkriptekre. Ezek beszerzése több módon lehetséges: az ol3 repository klónozásával, vagy valamelyik OL3 közzététel archiv csomagjának letöltésével. Letölthető az openLayres Node csomagja is az NPM (Node Package Manager) segítségével. A következőkben ezt a módszert mutatjuk be:
| |
| − |
| |
| − | * 1. Létrehozunk egy új mappát:
| |
| − | <code>
| |
| − | $ mkdir openlayers
| |
| − | </code>
| |
| − |
| |
| − | * 2. Letöltünk egy OpenLayers 3 disztribúciót az NPM használatával:
| |
| − | <code>
| |
| − | $ npm install openlayers
| |
| − | </code>
| |
| − |
| |
| − | Ez mindig az OpenLayers 3 legfrissebb stabil verzióját tölti le, és a node_modules alá telepíti. Ezt követően ellenőrizhető az „openlayers” mappa jelenléte a node_modules listázásával. A node_modules/openlayers/node_modules
| |
| − | mappának például tartalmaznia kell a closure-utilt is, hiszen az OL3 rá épül.
| |
| − |
| |
| − | Ezen műveleteket követően mindenünk biztosítva van a testre-szabott build elkészítéséhez.
| |
| − |
| |
| − | === Konfigurációs állomány készítése ===
| |
| − |
| |
| − | A következő lépés egy build konfigurációs állomány létrehozása. Ennek formátuma JSON kell legyen. Egy példa build konfigurációs állományra:
| |
| − |
| |
| − | <code>
| |
| − | {
| |
| − | "exports": [
| |
| − | "ol.Map",
| |
| − | "ol.View",
| |
| − | "ol.control.defaults",
| |
| − | "ol.layer.Tile",
| |
| − | "ol.source.OSM"
| |
| − | ],
| |
| − | "compile": {
| |
| − | "externs": [
| |
| − | "externs/bingmaps.js",
| |
| − | "externs/closure-compiler.js",
| |
| − | "externs/geojson.js",
| |
| − | "externs/oli.js",
| |
| − | "externs/olx.js",
| |
| − | "externs/proj4js.js",
| |
| − | "externs/tilejson.js",
| |
| − | "externs/topojson.js"
| |
| − | ],
| |
| − | "define": [
| |
| − | "goog.DEBUG=false"
| |
| − | ],
| |
| − | "extra_annotation_name": [
| |
| − | "api", "observable"
| |
| − | ],
| |
| − | "compilation_level": "ADVANCED",
| |
| − | "manage_closure_dependencies": true
| |
| − | }
| |
| − | }
| |
| − | </code>
| |
| − |
| |
| − |
| |
| − | Például egy ilyen tartalommal rendelkező állományt ol-custom.json névvel le lehet menteni a node_modulse/openlayers/build mappába.
| |
| − |
| |
| − |
| |
| − | ====Exports lehetőségei====
| |
| − |
| |
| − | A legszámottevőbb része ennek a konfigurációs állománynak az „exports” tömb. Ez a tömb deklarálja azokat a függvényeket/konstruktorokat, melyeket a JavaScript kódban használni lehet majd. Például az előbbi konfigurációs állomány alkalmas az előző fejezetben bemutatott javascript esetén. (Alap komponensek/Összefoglaló példa)
| |
| − | Most már minden elő van készítve a OpenLayers 3 build –hez. A következő parancsok következnek.
| |
| − |
| |
| − | <code>
| |
| − | $ cd node_modules/openlayers
| |
| − | $ node tasks/build.js build/ol-custom.json build/ol-custom.js
| |
| − | </code>
| |
| − |
| |
| − | A build felvehet egy kis időt, de végül a console-on a következő jelenik meg:
| |
| − | <code>
| |
| − | info ol Parsing dependencies
| |
| − | info ol Compiling 364 sources
| |
| − | </code>
| |
| − |
| |
| − | Ennek a parancsnak a nyomán létre kellett jöjjön az ol-custom.js állomány a node_module/openlayers/build mappában. Ellenőrizhető és megnyitható. Tesztként használhatjuk a következő HTML állományt, hogy lássuk, a testre-szabott build-ünk az elvártaknak megfelelően működik.
| |
| − |
| |
| − | <code>
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta charset="utf-8" />
| |
| − | <title>OpenLayers 3 example</title>
| |
| − | <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
| |
| − | <style>
| |
| − | #map {
| |
| − | width: 600px;
| |
| − | height: 400px;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div id="map"></div>
| |
| − | <script src="node_modules/openlayers/build/ol-custom.js"></script>
| |
| − | <script>
| |
| − | var map = new ol.Map({
| |
| − | target: 'map',
| |
| − | layers: [
| |
| − | new ol.layer.Tile({
| |
| − | source: new ol.source.OSM()
| |
| − | })
| |
| − | ],
| |
| − | view: new ol.View({
| |
| − | center: [0, 0],
| |
| − | zoom: 4
| |
| − | })
| |
| − | });
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta charset="utf-8" />
| |
| − | <title>OpenLayers 3 example</title>
| |
| − | <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
| |
| − | <style>
| |
| − | #map {
| |
| − | width: 600px;
| |
| − | height: 400px;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div id="map"></div>
| |
| − | <script src="node_modules/openlayers/build/ol-custom.js"></script>
| |
| − | <script>
| |
| − | var map = new ol.Map({
| |
| − | target: 'map',
| |
| − | layers: [
| |
| − | new ol.layer.Tile({
| |
| − | source: new ol.source.OSM()
| |
| − | })
| |
| − | ],
| |
| − | view: new ol.View({
| |
| − | center: [0, 0],
| |
| − | zoom: 4
| |
| − | })
| |
| − | });
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | </code>
| |
