OpenLayers

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()).

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  var map = new ol.Map({target: 'map'});
</script>

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.

map.setView(new ol.View({
    center: [0, 0],
    zoom: 2
  }));

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).

var osmSource = new ol.source.OSM();

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.

 var osmLayer = new ol.layer.Tile({source: osmSource});
 map.addLayer(osmLayer);

Összefoglaló példa

Összefoglalva a példa a következőképpen nézne ki:

<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>

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:

$ mkdir openlayers

• 2. Letöltünk egy OpenLayers 3 disztribúciót az NPM használatával:

$ npm install openlayers

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:

{
  "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
  }
}

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.

$ cd node_modules/openlayers
$ node tasks/build.js build/ol-custom.json build/ol-custom.js

A build felvehet egy kis időt, de végül a console-on a következő jelenik meg:

<info ol Parsing dependencies
<info ol Compiling 364 sources

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.

<!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>

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.

      "ol.ENABLE_DOM=false",
      "ol.ENABLE_WEBGL=false",
      "ol.ENABLE_PROJ4JS=false",
      "ol.ENABLE_IMAGE=false",
      "ol.ENABLE_VECTOR=false",

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 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: 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.

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'
        }
      })
    })
  ]
});

Érdekes és látványos példák

• Animációk térképen (View Animation)
• Ország, országok kijelölése (Box Selection)
• Földrengések és mértékének megjelenítése (Eartquake Clusters)
• Exportálás pdf-be
• Repülő animáció (Flight Animation)
• Időzónák KML-lel (Timezones in KML)
• 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