Dezvoltarea de aplicații WEBGIS folosind soluții open source. Partea I: Introducere OpenLayers

Introducere

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.

Prima harta OpenLayers

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:

• point: Coordonatele punctului de interes sub forma latitudine,longitudine;
• lat: Latitudinea punctului de interes;
• lon: Longitudinea punctului de interes;
• iconURL: Adresa web unde se găsește simbolul grafic prin care se dorește reprezentarea pe hartă a punctului de interes;
• iconSize: Dimensiunea în pixeli a simbolului grafic;
• iconOffset: Poziția colțului din sînga sus a simbolului grafic față de coordonatele punctului de interes;
• title: Titlul punctului de interes. Acest text va fi afișat în cadrul unui marcaj de tip <h2> în caseta popup ce se deschide atunci cînd se execută click pe simbolul grafic;
• description: O descriere pentru punctul de interes. Acest text va fi afișat sub titlu, în cadrul lui putînd fi folosite marcaje HTML.

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.

Utilizare avansată cu ajutorul API-ului OpenLayers

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