Conceptul de webmapping/webgis s-a schimbat semnificativ o dată cu lansarea de către Google, în Februarie 2005, a serviciului de hărți Google Maps. Abordarea Google, total diferită de tot ce exista la acel moment, a fost un succes instantaneu. Rețeta succesului: AJAX, interfață grafică redusă la minim, servire eficientă a hărților sub formă de tile-uri pre-renderizate, navigare rapidă în cadrul hărții, posibilitatea de a construi aplicații customizate (mashups) folosind un API public. Ideea a fost repede preluată de companiile concurente Google (Yahoo, Microsoft, AOL) dar și de către comunitatea FOSS4G. Astfel s-a născut OpenLayers, o aplicație scrisă în JavaScript care permite construcția de aplicații de webmapping într-o manieră similară cu cea Google. Mai mult, OpenLayers conține zeci de funcționalități suplimentare, printre care se remarca suportul pentru formatele și protocoalele OGC (Open Geospatial Consortium): WMS, WFS, WMC, GML, KLM. În continuare, printr-o serie de exemple detaliat explicate, vom încerca să ilustrăm felul în care OpenLayers poate fi folosit pentru a crea hărți interactive ce pot fi incluse într-o pagină web. Pentru pune în aplicare ideile transmise prin intermediul acestui tutorial sînt necesare cunoștințe minime de HTML, CSS și JavaScript.
Cea mai simpla metodă de includere a unei hărți OpenLayers în pagina web este utilizarea serviciului oferit de site-ul oficial OpenLayers (MetaCarta Map Viewer Service). Pentru aceasta este suficient sa includeți următoarele linii de cod în pagina dumneavoastră:
<iframe src="http://openlayers.org/viewer/" width="450" height="300" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"> </iframe>
Rezultatul este ilustrat mai jos:
Puteți interacționa cu harta folosind controalele din partea stîngă sus sau acționînd direct cu mouse-ul pe hartă (click-stînga & drag pentru pan, dublu click pentru zoom in, Shift + click-stînga & drag pentru a face zoom în cadrul unei casete definite interactiv).
Diferitele aspecte legate de poziția hărții în cadrul paginii web, margini, dimensiuni, cadru pot fi controlate cu ajutorul marcajelor CSS. Una din cele mai evidente proprietăți se referă la dimensiunea hărții. Astfel, codul de mai jos:
<iframe src="http://openlayers.org/viewer/" width="250" height="170" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"> </iframe>
va produce următoarea hartă:
Se observă micșorarea dimensiunilor hărții la 250 pixeli pe axa X și 170 pixeli pe Y.
Serviciul web permite și el o serie de acțiuni de particularizare a hărții. Parametrii care permit această perticularizare se trimit prin metoda GET, anexați la URL-ul serviciului (http://openlayers.org/viewer/). De exemplu, codul de mai jos va produce o hartă centrată pe România:
<iframe src="http://openlayers.org/viewer/?center=46,25&zoom=5" width="450" height="300" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"> </iframe>
Cînd vine vorba de aplicații de webmapping, una din cele mai căutate funcții este cea care permite afișarea propriilor puncte de interes. Serviciul web OpenLayers permite afișarea punctelor de interes stocate într-un fișier de tip text (*.txt). Fișierul poate fi creat cu ajutorul unui simplu editor de text (Ex: Notepad, EditPlus) sau folosind aplicații de calcul tabelar (Ex: MS Office Excel, Open Office Calc). Acesta trebuie să conțină o serie de informații standard, structurate sub formă de coloane, delimitate prin tab-uri. Valorile posibile sînt:
Pentru exemplificare vom considera următorul fișier:
lat lon title description iconSize iconOffset icon 44.43333 26.1 Municipiul Bucuresti <a href="http://ro.wikipedia.org/wiki/Bucuresti">Bucuresti</a> este capitala Romaniei si, in acelasi timp, cel mai mare oras, centru industrial si comercial al tarii. Populatia de peste doua milioane de locuitori face ca Bucurestiul sa fie a sasea capitala dupa marime din Uniunea Europeana. 21,25 -10,-25 http://www.geo-spatial.org/vechi/images/marker.png 47.63333 26.25 Municipiul Suceava <a href="http://ro.wikipedia.org/wiki/Suceava">Suceava</a> este resedinta si totodata cel mai mare oras al judetului Suceava, situat in Bucovina, Romania. 21,25 -10,-25 http://www.geo-spatial.org/vechi/images/marker.png 47.65729 23.56808 Municipiul Baia Mare <a href="http://ro.wikipedia.org/wiki/Baia_Mare">Baia Mare</a> este resedinta judetului Maramures si un important centru urban din nord-vestul Romaniei, situat la poalele Carpatilor Orientali. 21,25 -10,-25 http://www.geo-spatial.org/vechi/images/marker.png
Afișarea hărții cu cele trei puncte de interes definite în fișier este asigurată de următorul cod:
<iframe src="http://openlayers.org/viewer/?center=46,25&zoom=5&data=http://www.geo-spatial.org/files/poi.txt" width="450" height="300" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"> </iframe>
Pentru mai multe detalii referitoare la serviciul online OpenLayers vă recomandăm să vizitați http://trac.openlayers.org/wiki/MapViewerService.
Serviciul web OpenLayers este ușor de folosit dar, în același timp, prezintă numeroase limitări. Pentru a beneficia de întreaga putere a librăriei OpenLayers va trebui să folosim API-ul JavaScript. Acesta permite controlul fin al hărții și includerea de date din surse externe.
Pentru a crea o primă hartă folosind API-ul OpenLayers este important să înțelegeți două concepte (clase) importante: Map și Layer. Obiectul Map conține toate proprietățile referitoare la hartă: extindere, proiecție, unități de măsură etc. În interiorul unei hărți, un set de date este afișate sub formă unui Layer (strat). Un strat este o poartă către sursa de date, el conținînd informații despre cum poate OpenLayers solicita și afișa acele date.
Codul pe care ne propunem sa-l scriem este redat, în întregime, mai jos:
<html> <head> <title>Exemplu harta OpenLayers</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> var harta; function initializareHarta() { harta = new OpenLayers.Map('containerHarta'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); harta.addLayer(wms); harta.zoomToMaxExtent(); } </script> </head> <body onload="initializareHarta()"> <div id="containerHarta" style="width: 500px; height: 300px"></div> </body> </html>
Rezultatul ar trebui să fie următorul:
Pasul 1: Includerea librăriei OpenLayers.js
Dacă pînă acum am folosit un container tip <iframe> pentru a insera o harta în pagina noastră web, în continuare va trebui să utilizăm ceva mai multe marcaje HTML pentru a realiza acest lucru. Primul pas îl reprezintă includerea librăriei OpenLayers în pagina noastră. Acest lucru se realizează în secțiunea <header> a paginii web după cum urmează:
<head> <title>Exemplu harta OpenLayers</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> </head>
Includerea librăriei OpenLayers se face în linia 3. După cum se poate observa, am preferat să includem aceasta librărie direct de pe serverul OpenLayers. În acest fel se economisește din banda serverului propriu și ne asigurăm ca întodeauna vom avea acces la ultima versiune a librăriei. Există și posibilitatea de a descărca librăria OpenLayers de pe site-ul oficial și de a o plasa pe serverul propriu. În acest caz, calea către OpenLayers.js trebuie adjustată pentru a reflecta locația corectă.
Pasul 2: Includerea hărții în structura paginii HTML
OpenLayers necesită definirea unui element HTML drept gazdă pentru hartă:
<div id="containerHarta" style="width: 500px; height: 300px"></div>
După cum se poate observa, am optat pentru folosirea elementul HTML de tip DIV. Dimensiunea hărții este determinată de dimensiunea acestui element. În exemplul de față am declarat aceste dimensiuni folosind marcaje CSS inline. Acest lucru poate fi realizat, la fel de bine, folosind marcajul <style> sau fișiere CSS externe.
Pasul 3: Instanțierea obiectului map
În continuare vom trece la scrierea codului JavaScript care va construi harta. Pentru aceasta vom utiliza constructorul OpenLayers.Map. Pentru acest constructor este obligatoriu un singur argument: containerul HTML în care va fi injectată harta (în cazul nostru elementul DIV cu ID-ul 'containerHarta'). Documentația completă pentru constructorul map poate fi consultată la Yahoo, http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.OpenLayers.Map. Codul necesar pentru crearea hărții este redat în continuare:
var harta = new OpenLayers.Map('containerHarta');
Rezultatul va fi un obiect nou, de tip map, atribuit variabilei cu numele harta. Am declarat variabila harta în afara functiei initializareHarta pentru a o putea folosi în context global (foarte util pentru debugging).
Pasul 4: Adăugarea unui strat de informație geospațială
var wms = new OpenLayers.Layer.WMS( "http://labs.metacarta.com/wms/vmap0", {'layers':'basic'} ); harta.addLayer(wms);
OpenLayers "știe" să citească și să afișeze date din surse multiple: WMS, WFS, GML, Yahoo, Google, Microsoft, OpenStreetMap, GeoRSS, KML etc. În exemplul de față am încărcat un strat de tip WMS folosind un serviciu pus la dispoziție de compania care produce OpenLayers: Metacarta.
Pasul 5: Poziționarea hărții
Vom folosi funcția zoomToMaxExtent() pentru a potrivi extinderea hărții la extinderea maximă a setului de date:
harta.zoomToMaxExtent();
Pentru exemplele următoare vom considera ca zonă de interes teritoriul României. De aceea vom centra și harta obținută anterior pentru a o încadra în extinderea zonei de interes. În acest sens vom adăuga la scriptul nostru trei variabile, reprezentînd latitudinea și longitudinea punctului central (lat, lon) și nivelul de zoom (zoom). Apoi vom înlocui linia ce stabilea extinderea la coordonate globale cu o alta ce va asigura centrarea pe teritoriul României. Scriptul modificat și rezultatul aplicării pot fi studiate mai jos:
<html> <head> <title>Exemplu harta OpenLayers</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> var harta; var lat = 46; var lon = 25; var zoom = 6; function initializareHarta() { harta = new OpenLayers.Map('containerHarta'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); harta.addLayer(wms); harta.setCenter (new OpenLayers.LonLat(lon, lat), zoom); } </script> </head> <body onload="initializareHarta()"> <div id="containerHarta" style="width: 500px; height: 300px"></div> </body> </html>
Pasul 6: Încărcarea hărții
Rularea scriptul JavaScript se face la declanșarea unui eveniment (Ex: click pe un buton). În cazul de față am ales să afișăm harta după ce tot conținutul fișierului HTMl a fost încărcat în browser:
<body onload="initializareHarta()">]]>
În majoritatea aplicațiilor de webmapping, bifarea/debifarea casetei ce controlează vizibilitatea unui strat nu produce un efect imediat, fiind necesară folosirea unui buton care să actualizeze conținutul hărții (Ex: Refresh Map, Redraw Map, Update Map). Motivația pentru aceastăa bordare, diferită de ceea ce găsim în aplicațiile GIS desktop, trebuie căutată în modul de funcționare a acestor aplicații. Practic, fiecare modificare, efectuată de utilizator, asupra modului de afișarea a straturilor, este trimisă către aplicația server. În funcție de extinderea spațială, nivelul de zoom și configurația straturilor, aceasta generează harta și o trimite către browser. În cazul în care utilizatorul nu dispune de o conexiune Internet rapidă și dorește să facă mai multe modificări în modul de afișare a straturilor, abordarea cu butonul Refresh Map este de preferat deoarece scurtează timpii de încărcare, trimițînd o singură cerere către server. În situația în care utilizatorul dispune de o conexiune rapidă sau aplicația mapserver rulează în cadrul unui Intranet, butonul de Refresh poate fi eliminat. În continuare vom prezenta pașii ce trebuiesc parcurși pentru eliminarea acestui buton din template-ul implicit al aplicației ArcIMS 9.x (HTML viewer) și afișarea/ascunderea imediată a unui strat la bifarea/debifarea butonului corespunzător.
Pentru realizarea acestui tutorial am am folosit instrumentele standard oferite de ESRI: ArcIMS Administrator, ArcIMS Author, ArcIMS Designer, pentru crearea și publicarea serviciului de webmapping și un editor de text, EditPlus, pentru modificarea codului HTML și JavaScript. Codul de plecare a fost cel implicit realizat de aplicația ArcIMS Designer (Figura 1).
Figura 1. ArcIMS – Interfața HTML implicită.
Firesc, primul pas în eliminarea butonului este identificarea codului care îl generează. Template-urile implicite ale ArcIMS se bazează pe o structură HTML complicată, ce utilizează elementele Frame și Table pentru poziționarea elementelor funcționale ale aplicației. Această abordare nu este recomandată de standardele WC3 deoarece nu asigură separarea setructurii semantice de prezentarea grafică.
După o scurtă căutare, am identificat codul cu pricina, liniile 174 – 179, din fișierul toc.htm aflat în rădăcina site-ului generat de ArcIMS Designer (Listing 1).
/arcims_toc_initial.txt was not found.
De aici aflăm informația esențială, și anume numle funcției care realizează actualizarea hărții, atunci cînd utilizatorul apasă butonul: onClick=“updateLayers()”. În continuare, vom încerca să declanșăm aplelarea aceastei funcții, folosind checkbox-urile din dreptul fiecărui strat și nu butonul Refresh Map. Am identificat codul care generează acest checkbox în linia 150 din fișierul toc.htm (Listing 2).
/arcims_toc_checkbox_initial.txt was not found.
Apelarea funcției updateLayers() se face prin adăugarea fragmentului de cod onClick=“updateLayers()” în această linie (Listing 3).
/arcims_toc_checkbox.txt was not found.
Pentru finalizarea tutorialului, se elimină liniile 174-179 și se salvează documentul. Efectul este cel așteptat, bifarea/debifarea checkbox-ului asociat unui strat va declanșa reafișarea hărții și includerea/excluderea stratului respectiv în/din hartă. Fișierul toc.htm astfel modificat poate fi studiat în Listingul 4.
/arcims_toc_final.txt was not found.