|
|
| 1. sor: |
1. sor: |
| | | | |
| − | Az OpenLayers egy olyan JavaScipt programcsomag, mely lehetővé teszi geo adatok 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 engedéllyel rendelkezik.
| |
| − |
| |
| − | == Bevezetés ==
| |
| − | === 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>
| |
| − |
| |
| − | ====Define lehetőségei====
| |
| − |
| |
| − | A konfigurációs állományban a define használata a Clusre-hoz kötődik, mely engedi olyan konstansok definiálását, melyek fordítási időben beállíthatóak. A fentebbi példa négy goog tulajdonságot állít be a Closure library számára. Az OpenLayers 3 kód rendelkezik definiált értékekkel is, melyek beállíthatóak.
| |
| − | Néhányat ezek közül hamisra (false) állítva azt érjük el, hogy azok a kódrészletek melyek ezekhez a beállításokhoz kötődnek „halottak” lesznek, vagyis sosem lesznek végrehajtva. Mivel a Closure fordító előrehaladottabb módja eltávolítja a halott kódokat, az előrehaladottabb fordítóval létrehozott kód jóval kisebb méretű lesz.
| |
| − | Észrevehető, hogy az előbbi folyamat során készült build állomány látványosan kisebb, mint a teljes build, de még ennél kisebbre is szorítható. Ez azért van, mert alapból mindhárom interpreter és minden réteg típus bele van vonva. Mivel csak egy interpreterre volt szükségünk, és csak a csempe rétegre, a többit ki is zárhatjuk a tulajdonság listában hamisra állítva őket. A következő kóddal kell kiegészíteni a konfigurációs állomány define részét, és újra kell futtatni a build szkriptet – majd újra láthatjuk, hogy kisebb lett a build mérete.
| |
| − |
| |
| − | <code>
| |
| − | "ol.ENABLE_DOM=false",
| |
| − | "ol.ENABLE_WEBGL=false",
| |
| − | "ol.ENABLE_PROJ4JS=false",
| |
| − | "ol.ENABLE_IMAGE=false",
| |
| − | "ol.ENABLE_VECTOR=false",
| |
| − | </code>
| |
| − |
| |
| − | ====Externs lehetőségei====
| |
| − |
| |
| − | Az externs alatt olyan külsős dolgok nevei szerepelnek, melyek használva vannak a fordított kódban. A fordító include-olja az externs mappába mindazokat a külsős állományokat, melyeket a könyvtár valamely részében használni fog. Például, ha használjuk a Bing Maps-et, akkor be kell include-olni az konfigurációs állomány externs részénél.
| |
| − | Az oli.js és az olx.js külső állományok az OpenLayers 3 API-hoz. Pédául az olx.js külső definíciókat tartalmaz az OpenLayers 3 konstruktor lehetőségeihez. Ezt a két állományt mindig használni érdemes extern-ként testre-szabott build esetén.
| |
| − |
| |
| − | ====Egyéb lehetőségek====
| |
| − |
| |
| − | Vannak egyébb fordítási lehetőségek a konfigurációs állományban. Például a manage_closure_dependencies mindig használandó. Minden más fordítási opció is beállítható itt, a closure-util-ban látható az összes, listázott formában.
| |
| − | Több információ a build szkriptekről, és a tulajdonságokról, melyeket a konfigurációs állományokban állítani lehet [https://github.com/openlayers/ol3/blob/master/tasks/readme.md itt] található.
| |
| − |
| |
| − | ===Kód karbantartás===
| |
| − |
| |
| − | A kód karbantartása érdekében, ha a Node csomag által telepítjük az OpenLayer-st, akkor az npm használható a legújabb verzióra frissítéshez. Ha a Github repo volt klónozva, nem biztos, hogy elég a pull a legújabb verzióra, mert néhány használt csomag, mint például a fordító, lehet, hogy kíván upgrade-et is. Ezt érdemes npm install paranccsal kiváltani, nem pedig npm update-tel.
| |
| − |
| |
| − | == Saját kód és OL3 kód együttes fordítása ==
| |
| − |
| |
| − | Egy alternatíva testre-szabott build-ek készítésére a saját kód OpenLayers 3-mal együtt történő fordítása a Closure fordító segítségével. Ennek a módszernek előnye az, hogy a Closure fordító kiszűri azokat a kódokat, melyeket az alkalmazás nem használ, és ehhez nem szükséges egy „exports” lista írása és karbantartása. Ugyanakkor lehetővé teszi olyan OpenLayers 3 függvények és objektumok használatát, melyek nem részei az OpenLayers 3 API-nak. Ez kissé kockázatos is lehet, de szerencsére a fordító szól, ha olyan függvényeket és objektumokat használnánk, melyek már nem az OpenLayers 3 API részei. (A módszerről részletesebben: [http://openlayers.org/en/v3.15.1/doc/tutorials/closure.html itt] olvasható.)
| |
| − |
| |
| − | == Eltérő koordináta rendszerek esete ==
| |
| − |
| |
| − | Az OpenLayers 3 képes megjeleníteni raszteres adatot WMS, WMTS, statikus kép típusú és sok más forrásból a szervertől kapott koordináta rendszertől eltérően. A koordináták transzformálása a web böngészőben történik. A nézet minden Proj4js támogató koordináta referencia rendszerben lehetséges, és előzetesen inkompatibilis rétegek ma már kombinálhatóak. Az alábbi példa során látható, hogy a forrás és a nézet koordináta rendszere eltérő, az átszámítás megtörténik viszont automatikusan.
| |
| − |
| |
| − | <code>
| |
| − | var map = new ol.Map({
| |
| − | target: 'map',
| |
| − | view: new ol.View({
| |
| − | projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
| |
| − | center: [0, 0],
| |
| − | zoom: 2
| |
| − | }),
| |
| − | layers: [
| |
| − | new ol.layer.Tile({
| |
| − | source: new ol.source.TileWMS({
| |
| − | projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
| |
| − | url: 'http://demo.boundlessgeo.com/geoserver/wms',
| |
| − | params: {
| |
| − | 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
| |
| − | }
| |
| − | })
| |
| − | })
| |
| − | ]
| |
| − | });
| |
| − | </code>
| |
| − |
| |
| − | == Érdekes és látványos példák ==
| |
| − |
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/animation.html Animációk térképen (View Animation)]
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/box-selection.html Ország, országok kijelölése (Box Selection) ]
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/earthquake-clusters.html Földrengések és mértékének megjelenítése (Eartquake Clusters)]
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/export-pdf.html Exportálás pdf-be]
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/flight-animation.html Repülő animáció (Flight Animation)]
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/kml-timezones.html Időzónák KML-lel (Timezones in KML)]
| |
| − | * [http://openlayers.org/en/v3.15.1/examples/measure.html Terület felmérés (Measure)]
| |
| − |
| |
| − | == Források ==
| |
| − | * Open Layers 3 hivatalos oldala: http://openlayers.org/
| |
| − | * FOSSGIS Konferencia - 2015 Münster- Andreas Hocevar, Bart van den Eijnden, Marc Jansen előadása – OpenLayers 3 : https://www.youtube.com/watch?v=U3ByMIIsA_Y
| |
