Dezvoltarea Unei Aplicații Client pe Fondul Extinderii Modalităților de Stocare,vizualizare și Editarea a Datelor Vectoriale

MINISTERUL EDUCAȚIEI ȘI CERCETĂRII ȘTIINȚIFICE

UNIVERSITATEA „1 DECEMBRIE 1918” ALBA IULIA

SPECIALIZAREA „MĂSURĂTORI TERESTRE ȘI CADASTRU”

FORMA DE ÎNVĂȚĂMÂNT ZI

Dezvoltarea unei aplicații client pe fondul extinderii modalităților de stocare,vizualizare și editarea a datelor vectoriale.

COORDONATOR, ABSOLVENT,

Lect.Univ.Dr.Ing. Tudor Borșan Ștefănescu Marius

ALBA IULIA

2 0 1 5

CUPRINS

INTRODUCERE…………………………………………………………………………….….3

1. SISTEME INFORMATICE GEOGRAFICE……………………………………………….4

1.1 Definiții……………………………………………………………………………..4

1.2 Domenii de aplicare………………………………………………………………4

1.3 Arhitectura unui GIS.Programul ArcGIS……………………………………..6

1.4 Tipuri de date geospațiale………………………………………………………9

1.5 Achiziția și prelucrarea datelor………………………………………………..9

2. TEHNOLOGII UTILIZATE ÎN REALIZAREA UNEI APLICAȚII WEBGIS…………..12

2.1 Baze de date spațiale……………………………………………………………12

2.2 Programul open source PostGIS și crearea bazei de date……………….13

2.3 Generarea serverului cu ajutorul programului GeoServer………………15

2.4 Software-ul OpenLayers……………………………………………………….17

3. DEZVOLTAREA APLICAȚIEI……………………………………………………………18

3.1 Limbajele de programare………………………………………………………18

3.2 Crearea aplicației……………………………………………………………..…27

3.3 Crearea butoanelor………………………………………………………………42

4. CONCLUZII………………………………………………………………………………….

WEBOGRAFIE…..…………………………………………………………………………….

INTRODUCERE

O aplicație web este o extensie dinamică a unui server web.Aceste aplicații web se realizează cu ajutorul limbajelor de programare.Programarea Web este cunoscută și sub numele de dezvoltare Web. Cel mai bun exemplu de aplicație Web ar fi site-ul de socializare Facebook.

O mulțime de oameni doresc să învețe codificare web deoarece vor să creeze următorul Facebook sau să gasească un loc de munca în industrie.Există și o veste buna deoarece dezvoltarea web nu este grea.Foarte mulți oameni susțin ca e cea mai ușoară forma de codificare pentru începători.O aplicație este ușor de configurat. Bineînteles în mediul online sunt o multitudine de tutoriale și training-uri de unde se poate invăța codificare.

Există două categorii mari de dezvoltare web

Dezvoltare front-end numita de asemenea și client-side

Dezvoltare back-end numita și server-side

Dezvoltare front-end Se referă la construirea ceea ce vede un utilizator.Acest lucru se face cu trei coduri

HTML

CSS

JavaScript

Back-end de dezvoltare controlează ceea ce se întâmplă în spatele scenei unei aplicatii web. Un back-end folosește adesea o bază de date pentru a genera front-end.

Atunci când aplicația este implementată la container Web. Informațiile de configurare este menținut într-un fișier text în format XML, Numit un descriptor de implementare a aplicației web.

Obiectivul meu este de a crea o aplicație ”low cost” pentru a putea fi folosită de utilizator in vederea extragerii de date din baza de date implementată. Aceasta bază de date deocamdată este creată de mine.Pentru a o putea folosi la o scară mai largă baza de date ar trebui gestionată de oficiul de cadastru, în care ar trebui implementate toate lucrarile avizate cu fiecare modificare făcută.

1. SISTEME INFORMATICE GEOGRAFICE

Definiții

GIS (Sistem Informatic Geografic) este definit de OGC (Open Geospatial Consortium) ca fiind un sistem informatic utilizat pentru capturarea, stocarea, verificarea, integrarea, manipularea, analiza și vizualizarea datelor referențiate geografic sau geospațiale.

Datele geospațiale sunt date legate de localizarea geografică, caracteristicile unor obiecte naturale sau construite, limitele acestora pe suprafața Pamantului.

OGC este un consortiu de 369 companii, agentii guvernamentale si universități care colaborează în realizarea unor standarde, specificații, cunoscute sub numele de OpenGIS Standards and Specifications. Respectate de producatorii de sisteme informatice geografice, aceste standarde asigura interoperabilitatea (prin aceasta ințelegând abilitatea de a folosi sau de a integra componente software dezvoltate de producatori diferiți), cu alte cuvinte, asigură buna funcționare a conceptul de "plug-and-play" și la nivel software.

Sistemul GIS legat la o rețea de poziționare globală (GPS) poate determina în orice moment poziția în timp și spațiu, efectul, răspândirea, distribuția, evoluția unor servicii, fenomene, procese, obiecte urmărite, etc.

Domenii de aplicare

GIS este aplicabil în multe alte domenii, ca de exemplu: dezvoltare regională, turism,financiar-bancar, sănătate, militar, criminalistică, știinte sociale, geologie, mediu etc.

Un astfel de sistem este utilizat în:

dezvoltarea urbană si regionala prin crearea de hărți de urbanism,

în managementul retelelor de utilitati (energie electrică, gaze, apă),

în alegerea celor mai bune locații pentru amplasarea de noi afaceri,

în studiul impactului asupra mediului a diverși factori,

în sănătate (gestionarea starii de sănătate a populației pe regiuni),

în comert (segmentarea piețelor).

În geomofologie-pedologie – realizarea unor hărți ce determină raportul cauză-efect prin stabilirea unei corelații între geologie (tip de rocă, structură), pantă, expoziția versanților și anumite procese,

În domeniul meteorologiei-hidrologiei se remarcă aplicabilitatea sistemelor GIS prin realizarea unor hărți de prognoză, de rezultate ale acțiunii unor factori, procese, fenomene, hărți de avertizare, poziționarea anumitor elemente, etc. 

Exemple de hărți pentru diverse domenii de aplicare.

Arhitectura unui GIS.Programul ArcGIS.

Arhitectura unui sistem geografic conform standardelor OGC este prezentată în figura următoare:

Fig 1. Arhitectura unui sistem geografic conform standardelor OGC.

Din această arhitectură se pot identifica 3 nivele: nivelul de stocare a datelor geospațiale, nivelul serverului web pentru generare de hărți si nivelul aplicațiilor web sau desktop GIS in care sunt vizualizate hărtile respective.

Primul nivel din arhtectura prezentata se referă la metodele de stocare a datelor geografice, metode ce au evoluat astfel:

Modelul CAD, utilizat in anii 60-70 care memora date geografice in fișiere binare cu diverse reprezentări pentru linii, puncte și arii. Foarte puține informații descriptive sunt incluse în aceste fișiere.

Modelul coverage sau georelațional: datele spațiale sunt combinate cu datele descriptive; datele spațiale sunt memorate în fișiere iar cele descriptive sunt stocate în tabele în baze de date relaționale.

Modelul geodatabase: introduce un nou model de date orientat pe obiecte, atât datele geografice cât și cele descriptive sunt memorate în același loc, aceeasi baza de date și pot fi manipulate central, aceste baze de date purtând și denumirea de baze de date spațiale. Exemple de baze de date spațiale open source: PostGIS/PostgreSQL, MySQL Spatially Enabled. Ca soluții proprietare se remarcă Oracle Spatial, SQL Server Spatialy Enabled.

Ca soluție de stocare a datelor spațiale folosita în lume, se remarca indeosebi fișierele de tip shp, shapefiles, soluție proprietara ESRI. În acest tip de fișiere este stocata atat informație geografică, spațială, cât și informație descriptivă.

Pentru a asigura interoperabilitatea, producatorii de baze de date spațiale, precum Oracle pun la dispoziție instrumente, precum shp2sdo, care generează, pornind de la fișierele .shp, fișiere de control (.ctl), utilizate pentru incărcarea respectivelor date spațiale în baza de date.

Următorul nivel al arhitecturii se referă la serverele pentru generare de hărți , WMS Web Mapping Service) ce produc hărți (fisiere .jpg, .png) având la bază datele georeferențiate, în format digital. Exemple de servere WMS open source: GeoServer, MapGuide Open Source; proprietare: Oracle MapViewer. WFS (Web Feature Service) este un serviciu care returnează date georeferențiate în format vectorial, fară informația despre cum vor fi vizualizate datele respective, iar WCS (Web Coverage Service) face același lucru dar pentru date în format raster.

KML – Keyhole Markup Language este un limbaj XML folosit pentru vizualizarea informațiilor geografice, limbaj utilizat de Google Earth. Ultimul nivel din arhitectură se refera la vizualizarea 2D sau 3D a hărților prin aplicații web sau desktop GIS. Cele mai folosite aplicații desktop pentru vizualizarea 3D a hărților sunt: Google Earth si aplicația open source NASA World Wind.

În arhitectura de mai sus este prezentată doar componenta software a sistemului informatic geografic. O arhitectură mai cuprinzătoare este prezentată de autorii Mike Worboys si Matt Duckham în lucrarea [WORB04] :

Fig 2. Arhitectura unui GIS conform Mike Worboys și Matt Duckham.

Din această arhitectură deducem importanța captării datelor geospațiale, aceasta făcându-se prin:

fotografierea din satelit

fotografierea din avion

scanarea planurilor/hărților

stație totală de masurători

receptoarele GNSS(Global Navigation Satellite Systems)/GPS(Global Positioning System)

Programul ArcGIS

ArcGIS este un sistem informatic geografic (GIS) care lucrează cu hărți si informații geografice. Este folosit pentru:crearea și folosirea hărților; compilarea datelor geografice; analiza informaților din hărți;schimbul și descoperirea informației geografice; folosind hărți si informații geografice într-o gama largă de aplicații; și gestionarea informației geografice într-o bază de date.

Sistemul oferă o infrastructură pentru realizarea de hărți și informații geografice disponibile pe parcursul unei organizații,într-o comunitate și în mod deschis pe Web.

1.4 Tipuri de date spațiale

Există două tipuri de date folosite în sistemele informatice geografice: date raster și date vectoriale.

Datele raster sunt fotografii ale Pamantului făcute fie din satelit fie din avion; sunt fișiere care stochează informația în celule discrete organizate în linii și coloane.Fiecare celulă sau pixel dintr-o fotografie pastrează o anumită valoare.

Datele vectoriale sunt formate din puncte,linii,poligoane, ele sunt potrivite pentru stocarea conturului obiectelor,spre deosebire de datele raster care stochează conținutul acestora.

Fig 3. Date în format vectorial Fig 4. Date în format raster

Atunci când imaginea raster este folosită împreuna cu informații vectoriale dintr-o anumită zonă,este necesară georeferențierea imaginii raster.Georeferențierea este procesul prin care o imagine raster este adusă în coordonatele sistemului de proiectie asociat informațiilor vectoriale.

1.5 Achiziția și prelucrarea datelor.

Datele folosite au fost furnizate de Primăria Mun. Sebeș in format CAD. Urmând prelucrarea lor în programul ArcGIS pentru crearea bazei de date.Datele furnizate fiind în format CAD prelucrarea lor a presupus mai multe etape în programul AutoCAD.

Deoarece din toate datele primite am decis să aleg doar conturul, punctele de pe acest contur și construcțiile. Prelucrarea lor a fost dificilă deoarece polilinia de contur nu era facută și nici construcțiile nu erau poligoane.

După ce am închis toate layere de care nu am avut nevoie lasând doar layere cu construcțiile puncte și contur. Am început prelucrarea poligoanele aferente construcțiilor le-am creat cu ajutorul comenzi BOUNDARY. După inițierea comenzi selectam un punct la alegere din interiorul presupusei construcții pentru am crea poligoanele.

Numarul total de construcții a ajuns intr-un final la 1576.

Fig 5.Zona selectată pentru aplicație

Fig.6 Funcția Boundary

Datele extrase au fost construcțiile,conturul și punctele de contur.Astfel rezultând următoarele fișiere în format .dwg

Fig 7.Cladiri Fig 8.Contur Fig 9.Puncte contur

Prelucrarea datelor cu ajutorul programului ArcGIS constă în:

adăugarea datelor,

adăugarea tabelelor în baza de date,

exportul bazei de date,

exportul sistemului de coordonate,

crearea layerelor,

Fig 10.Adăgarea datelor

Fig 11. Adăugarea tabelelor in baza de date

Fig 12. Exportul bazei de date:

Exportul tabelelor se face sub forma unor fișiere de tip shapefiles(.shp)

Pentru creeare layerelor avem nevoie de un fișier de tip .prj in care se gasește

sistemul de coordonate folosit la proiectarea datelor.

Exportul sistemului de coordonate se face in felul următor:

Fig 13. Exportul Sistemului

2.TEHNOLOGII CE POT FI UTILIZATE ÎN REALIZAREA UNEI APLICAȚII WEBGIS

2.1 Baze de date spațiale.

O bază de date spațială este o bază de date optimizată pentru a stoca și interoga date geospațiale. Majoritatea bazelor de date permit reprezentarea obiectelor prin puncte, linii sau poligoane.Alte baze de date spațiale au structuri mai complexe, cuprinzând obiecte 3D,aspect topologice,rețele lineare sau TIN-uri.

O bază de date spațială ne oferă abilitatea de:

a stoca o colecție bogată de date spațiale într-o locație centralizată,

a aplica reguli sofisticate și relații între date,

definire a unor modele geospațiale complexe (ex. topologii,rețele),

integrare a datelor spațiale cu alte baze de date din IT,

a folosi datele spațiale la adevărata lor valoare.

2.2 Programul open source PostGIS și crearea bazei de date.

PostGIS este un program open source care adăuga suport pentru obiectele

geografice din PostgreSQL, relatia obiect-baza de date.

A fost dezvoltat de Refractions Reasearch in 2001. Punerea în aplicare PostGIS se bazează pe geometrii “light-weight” și indexuri optimizate pentru a reduce spațiu folosit pe disk și amprenta de memorie.

Folosind geometria “light-weight” ajută serverele să crească cantitatea de date migrate de pe disc in memoria RAM, îmbunătățind în mod substanțial performanța de interogare.Ceea ce urmează acoperă pe scurt evoluția bazelor de date spațiale și apoi arata trei aspecte care asociază date spațiale cu o bază de date – tipuri de date, indicatori și funcții.

Tipuri de date se referă la forme cum ar fi punct, linie, polygon,

Indexarea spațială multi-dimensională este utilizată pentru prelucrarea eficientă a operațiunilor spațiale,

Funcții spațiale, reprezentate în SQL, sunt pentru interogarea proprietăților spațiale și relații.

Crearea unei baze de date spațiale cu PostgreSQL

Fig 14. Interfața PostgreSQL

Fig 15.

După ce am creat baza de date, click pe butonul SQL,se va deschide o nouă fereastra unde se va scrie următorul text: CREATE EXTENSION postgis; și apoi click pe butonul Play,această comandă o să genereze o listă de 1050 de funcții.

Incărcarea datelor spațiale se face cu ajutorul aplicației pgShapeLoader

Fig 16.

dupa această operațiune PostGIS-ul va

cere o conexiune la baza de date care va arăta in felul următor

Fig 17.

După ce realizarea conexiunea la baza de date sa terminat se poate face importul fișierelor cu datele de tip .shp, .shx, sau .dbf. deasemenea se importa și fișierul cu sistemul de proiecție.În aplicația pgAdmin III se pot vizualiza,edita fișierele importate mai devreme.Având în vedere faptul ca fișierele importate sunt create cu programul ArcGIS nu au nevoie de alte modificări în interiorul bazei de date,cu ajutorul limbajului de programare SQL.

2.3 Generarea serverului cu ajutorul programului GeoServer.

În calcul GeoServer este un server open source scris în limbaj de programare java.Acest program permite utilizatorilor să împartă,să prelucreze și să editeze date geospațiale.Conceput pentru interoperabilitate, publică date din orice sursă majoră de date spațiale prin utilizarea standardelor deschise. Geoserver a evoluat pentru a deveni o metodă ușoară de conectare a informatilor existente la globurile virtuale, cum ar fi Google Earth si NASA World Wind precum și la hărți bazate pe web, cum ar fi OpenMapStreet, Google Maps și BingMaps.

Deschiderea serverului se face în felul următor:

Deschiderea browserului web,(ex. Chrome,Firefox etc)

În bara pentru introducerea site-ului scriem: http://localhost:8080/geoserver/web o să se deschidă pagina publică de mai sus.

Următorul pas se face logarea

Fig 18.

Contul cu care se face logarea este “admin” și parola “geoserver” , acestea putând fi modificate ulterior din setări.După logare se crează un spațiu de lucru:

Fig 19.

În noul spațiu de lucru se face importul datelor spațiale făcându-se conexiunea la PostGIS.

Fig 20.

Dupa efectuarea importului layerele se pot viziualiza in pagina de layer preview.

Fig 21.

Dacă dorim sa schimbam stilul de scris sau felul cum este prezentat un anumit layer putem crea sau modifica unu dintre stiluri de bază. Pentru a putea face acest lucru este nevoie de cunoștințe de limbaj xml.

Fig 22. Modificarea stilurilor

Fig 23. Interfața GeoServer

2.4 Software-ul OpenLayers

Este un program open source furnizat de biblioteca JavaScript pentru afișarea datelor spațiale in browserele web. Acesta ofera un API(Application programming interface) pentru construirea de aplicații web geografice similare cu Google Earth. Biblioteca a fost bazată initial pe un prototip Javascript FrameWork.

OpenLayers poate comunica prin mai multe protocoale

Obiective

OpenLayers 3 ( OL3 ) este un design fundamental al bibliotecii OpenLayers de cartografiere web. Versiunea a doua este utilizată pe scară largă , dar datează din primele zile de dezvoltare Javascript.

3. DEZVOLTAREA APLICAȚIEI.

3.1 Limbajele de programare.

Limbaje de programare folosite în această aplicație sunt: html,css și JavaScript.

HTML

Hyper Text Mark-up Language(html) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser. Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi,tabele și asa mai departe.Specificațiile HTML sunt dictate de World Wide Web Consortium. HTML este o formă de marcare orientate către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat,numit agent utilizator HTML,cel mai bun exemplu de astfel de software fiind browserul web.

Componența unui document HTML este:

Versiunea HTML a documentului

Zona head cu etichetele <head> </head>

Zona body cu etichetele <body> </body> sau <frameset> </frameset>

Versiunea HTML poate fi:

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

http://www.w3.org/TR/html4/strict.dtd>

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Transitional//EN”

http://www.w3.org/TR/html4/loose.dtd>

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Frameset//EN”

http://www.w3.org/TR/html4/strict.dtd>

HTML 5

<!DOCTYPE HTML>

Toate paginile HTML încep și se termină cu etichetele <html> și </html>. În interiorul acestor etichete găsim perechile <head>,</head> și <body>,</body>.

Codul de programare scris în aplicația dezvoltată este scris in HTML 5.

Zona head etichetele <head> </head> este folosită pentru titlu,tot în această parte pot fi incluse și anumite scripturi.De asemenea în zona de head pot fi adăugate hyperlink-uri către anumite surse de date, cum ar fi css.

JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru acesul la obiecte încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul Internet Explorer.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucât operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

Elemente de bază ale limbajului

// – o linie de comentariu

/* – asa se poate crea un comentariu

pe doua linii */

Tipuri de date

Nedefinit

Valoarea de "undefined" este atribuită la toate variabilele neinițializate, și, de asemenea, într-un context boolean, valoarea undefined este considerat o valoare de fals.

Ex: var text ;

Null

Spre deosebire de nedefinit, nul este de multe ori setat pentru a indica faptul că ceva a fost declarat, dar a fost definit pentru a fi gol. Într-un context boolean, valoarea nulă este considerată o valoare de fals în JavaScript.

String

Un string (sau șir) în Javascript este o secvență de caractere cuprinsă între ghilimele duble sau single.

Ex: var greeting = “Salutare,Lume” ;

var anotherGreeting = “Salutare Oameni” ;

Puteți accesa caractere individuale dintr-un șir utilizând charAt metoda (furnizate de String.prototype ). Aceasta este metoda preferată atunci când accesarea de caractere individuale din cadrul unui șir, pentru că, de asemenea, funcționează non-moderne browsere:

Ex: var greeting.charAt ( 0 ) ;

În browsere moderne, caractere individuale din cadrul unui șir pot fi accesate (ca siruri de caractere, cu doar un singur caracter), prin notația matrice ca:

Ex: var greeting [ 0 ] ;

Cu toate acestea, siruri de caractere JavaScript sunt imuabile :

Ex: greeting [ 0 ] = “M” // nu are efect.

Aceste obiecte au o metodă valueOf care întoarce șirul de primitiv înfășurat în ele:

Ex: var s = new String ( "Salut !" ) ;

typeof s ; // este 'object'.

typeof s. valueOf () ; // este "string".

Egalitatea de valori între două String obiecte nu se comportă ca și primitive de coarde:

Ex: var s1 = new String ( "Salut !" ) ; var s1 = new String ("Salut!");

var s2 = new String ( "Salut !" ) ; var s2 = new String ("Salut!");

s1 === s2 ; // este falsă, deoarece acestea sunt două obiecte distincte.

s1. valueOf () === s2. valueOf () ; // este adevărat.

Boolean

JavaScript oferă un tip de date Boolean cu valorile true și false. Operatorul returnează șirul "boolean" pentru aceste tipuri de primitive.

Atunci când este utilizat într-un context logic, 0 , -0 , null , NaN , undefined , iar șir vid ( "" ) evaluează în false din cauza constrângerii automate.

Când conversia de tip este necesară, JavaScript convertește String, Number, Boolean, sau operanzilor obiect, după cum urmează:

Șir de caractere este convertit la o valoare număr. JavaScript încearcă să transforme literal șir de caractere numeric, la o valoare tip de număr. În primul rând, o valoare de matematică este derivat din literal șir de caractere numeric. Apoi, această valoare este rotunjită la cea mai apropiată valoare tip de număr.

Dacă unul dintre operanzi este un Boolean, operand Boolean este convertit la 1 dacă este true sau la 0, dacă este false .

Dacă un obiect este comparat cu un număr sau un șir de caractere, JavaScript încearcă să se întoarcă valoarea implicită pentru obiect. Un obiect este convertit la un șir de caractere sau o valoare numerică, folosind .valueOf() sau .toString() metode de obiect. Dacă acest lucru nu reușește, o eroare de execuție este generată.

Unii experți folosesc termenii "true" și "false" pentru a descrie modul în care valorile de diferite tipuri, se comportă atunci când a evaluat într-un context logic, în special în ceea ce privește cazurile de margine. Operatorii logici binare a returnat o valoare booleană în primele versiuni de JavaScript, dar acum se vor întoarce unul dintre operanzi loc.

Operandul stâng este returnat în cazul în care acesta poate fi evaluat ca: false , în cazul de asociere ( a && b ) , sau true , în cazul de disjuncției ( a || b ) , în caz contrar dreptul de-operand este returnat.

O expresie poate fi în mod explicit exprimate la un primitiv de booleană: dublarea logic operatorul negație ( !! ) , folosind Boolean() funcția, sau folosind operatorul condițional ( c ? t : f ) .

Array

Un „Array” (sau „tablou”, „matrice”) este un obiect JavaScript proiectat pentru a stoca valori de date indexate de chei întregi.

Matricea, spre deosebire de tipul de obiect de bază, se patentează cu metode si proprietati pentru a ajuta programatorul în sarcini de rutină (de exemplu, join , slice , și push ).

Ex: var myArray = [ ] ; // Creează o variabilă nouă array cu numele myArray

myArray. push ( "Salutare Lume" ) ; // Completează valoarea de index 0 cu valoarea "Salutare Lume"

Matricile au o proprietate length (sau “lungime”) care este întotdeauna mai mare decât indicele de cel mai mare index utilizat în matrice.

Elemente de matrice pot fi accesate folosind normale de acces obiect de proprietate notație:

Ex: myArray [ 1 ] ; // elementul 2 în myArray

myArray [ "1" ] // Cele două de mai sus sunt echivalente.

Declarația a unui tablou poate folosi fie un tablou literal sau Array constructorului:

Ex: myArray = [ 0 , 1 , , , 4 , 5 ] ; // tablou cu lungime de 6 si 2 elemente nedefinite

myArray = new Array ( 0 , 1 , 2 , 3 , 4 , 5 ) ; // tablou cu lungime de 6 si 6 elemente

myArray = new Array ( 365 ) ; // un array gol cu lungimea de 365

Date calendaristice

Ex: new Date () // creează o nouă instanță reprezentând Data curentă data / ora.

new Date ( 2016 ,6 , 14 ) // creează o nouă instanță, reprezentând data de 2016-Iun-14 00:00:00

new Date ( 2016 , 2 , 1 , 14 , 25 , 30 ) // creează o nouă instanță, reprezentând data de 2016-Iun-01 14:25:30

new Date ( "2016-7-15 14:25:30" ) // creează o nouă instanță Data dintr-un șir.

Variabile

Variabilele în standard, JavaScript nu au tip atașat, și orice valoare poate fi stocată în orice variabilă.

Variabilele sunt declarate cu un var declarație, mai multe variabile pot fi declarate la o dată.

Un identificator trebuie să înceapă cu o literă, de subliniere (_), sau semnul dolar ($); caractere ulterioare pot fi, de asemenea, cifre (0-9).

Deoarece JavaScript este case-sensitive, scrisori include caracterele "A" la "Z" (cu majuscule) și caracterele "A" la "Z" (cu litere mici).

Variabilele declarate în afara oricărei funcții sunt globale. În cazul în care o variabilă este declarată într-un domeniu de aplicare mai mare, ea poate fi accesată de către funcțiile apelate de domeniu.

Aici este un exemplu de declarații variabile și valori globale:

var x = 0 ; // o variabilă globală, deoarece nu este în nici o funcție

function f () {

var z = 'vulpe' , r = 'păsări' ; // 2 variabile locale

m = 'pește' ; // variabilă globală, deoarece nu a

fost declarat înainte de nicăieri

function copil () {

var r = 'monkeys' ; // Această variabilă este locală și nu afectează "păsări" r a functiei mamă.

z = 'pinguini' ; // Funcția copil este capabilă de a accesa variabilele din funcția mamă

}

twenty = 20 ; //Această variabilă este declarată pe următoarea linie, dar utilizabilă oriunde în funcția copil () ;

return x ; //Putem folosi x aici, deoarece este globală

}

Când JavaScript încearcă să rezolve un identificator, se pare, în funcție de domeniul de aplicare locală. Dacă acest identificator nu este găsit, se pare, în funcția de exterior, care a declarat una locală, și așa mai departe de-a lungul lanțului de domeniul de aplicare până când ajunge la domeniul global în cazul în care variabila este globală.

Dacă nu este încă găsit, Javascript va ridica o excepție ReferenceError.

Atunci când atribuirea unui identificator, Javascript face exact același proces pentru a prelua acest identificator, cu excepția faptului că în cazul în care nu se găsește în domeniul global, se va crea "variabila", ca o proprietate a obiectului la nivel global.

Declararea unei variabile (cu cuvântul cheie var), în afara corpului oricărei funcții, va crea, de asemenea, o variabilă nouă la nivel mondial.

CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributulstyle. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign.

Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign.

Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:

Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.

CSS3 Borduri

Acum CSS3 oferă posibilitatea de a crea borduri cu colțurile rotunjite fară a folosi elemente grafice de fundal așa cum se folosea anterior acestui upgrade.

Proprietatea CSS3 border-radius definește prin valorile exprimate in pixeli cat de rotunjite vor fi colțurile unui element HTML sau unei imagini. Fiecare colț poate avea o alta valoare exprimată in pixeli diferită de un alt colț al aceluiași element. Prin urmare putem folosi pana la 4 valori diferite atribuite unui element HTML sau imagine.

Exemplu:

border-radius: 5px ;

definește valoarea de 5px radius pentru toate cele 4 colțuri ale elementului.

border-radius: 5px 7px 12px 4px;

aceste valori multiple definesc cat de mult vor fi rotunjite colțurile elementului HTML, iar pentru fiecare colt este specificata valorarea. Colțul stanga-sus are valoarea border-radius de 5px, colțul dreapta-sus are valoarea border-radius de 7px, colțul dreapta-jos al elementului HTML are valoarea de 12px iar colțul din stanga-jos are valoarea de 4px.

CSS3 – Borduri Rotunjite – Optimizat

Varianta ne-comprimată sau ne-optimizată:

border-radius-left: 5px;

border-radius-right: 7px;

border-radius-top: 12px;

border-radius-bottom: 4px;

Varianta mimificată, compresată/optimizată:

border-radius: 5px 7px 12px 4px;

Ambele variante sunt corecte și acceptate de clientul browser.

CSS3 – Borduri Rotunjite – Compatibilitate Browser

Pentru compatibilitatea cu diferite browsere se folosesc prefixe: -webkit- , -moz- , -o-

Compatibilitate: Internet Explorer (IE) – 0.9 , Chrome folosește prefixul -webkit- pentru 4,0 , Firefox folosește prefixul -moz- pentru versiunea 3.0, Safari folosește prefixul -webkit- pentru versiunea 3.1, Opera 10.5 prefix -o-

Exemplu CSS3 border-radius:

div {

border: 2px solid #333333;

padding: 10px 40px; 

background: #dddddd;

width: 300px;

border-radius:25px ;

}

Elementul HTML div este definit de urmatoarele proprietăți CSS: dimensiunea in lungime este redată de valoarea in pixeli a proprietății width, folosește o bordură de 2 pixeli, o bordură solidă de culoare gri-inchis definită de caloarea HEX #333333.

Culoarea de fundal este gri deschis definită de HEX #dddddd. Bordura rotunjită este de 25 pixeli pentru toate cele 4 colțuri.

Crearea aplicației

Codul HTML

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

<title>ArcGIS Web Application</title>

<link rel="shortcut icon" href="images/shortcut.ico">

<!–[if IE 8]>

<link rel="stylesheet" type="text/css" href="jimu.js/css/jimu-ie.css" />

<![endif]–>

<style type="text/css">

left: 0;

right: 0;

margin: auto;

}*{box-sizing: border-box;}

body,html {

width:100%;

height:100%;

margin:0;

padding:0;

overflow:hidden;

}

#main-loading{

width: 100%;

height: 100%;

text-align: center;

overflow: hidden;

}

#main-loading #ie-note{

position: absolute;

top: 0;

bottom: 0;

#main-loading #ie-note {

width: 586px;

height: 253px;

background-image: url('images/notes.png');

padding: 0 30px 40px 30px;

font-size: 14px;

color: #596679;

}

#ie-note .hint-title{

height: 40px;

line-height: 48px;

text-align: left;

font-weight: bold;

}

#ie-note .hint-img{

background-image: url('images/hint.png');

background-position: left;

padding-left: 40px;

margin-top: 20px;

background-repeat: no-repeat;

height: 30px;

text-align: left;

line-height: 30px;

font-weight: bold;

}

#ie-note span{

display: block;

line-height: 14px;

}

#main-page{

display: none;

width: 100%;

height: 100%;

position: relative;

}

#jimu-layout-manager{

width: 100%;

height: 100%;

position: absolute;

}

</style>

<link rel="stylesheet" type="text/css" href="configs/loading/loading.css" />

<script>

// var progress;

// function loadingCallback(url, i, count) {

// var loading = document.getElementById('main-loading-bar');

// loading.setAttribute('title', url);

// if (!progress) {

// progress = document.createElement('div');

// progress.setAttribute('class', 'loading-progress');

// loading.appendChild(progress);

// }

// progress.style.width = (((i – 1)/count) * 100) + '%';

// }

</script>

</head>

<body class="claro jimu-main-font">

<div id="main-loading">

<p>Acesta este un simplu paragraf </p>

<div id="app-loading"></div>

<div id="loading-gif"></div>

<div id="ie-note" style="display:none;">

<div class="hint-title">Error</div>

<div class="hint-img">Your browser is currently not supported.</div>

</div></div>

<div id="main-page">

<div id="jimu-layout-manager"></div>

</div>

<script src="env.js"></script>

<script type="text/javascript" src="simpleLoader.js"></script>

<script type="text/javascript" src="init.js"></script>

</body>

</html>

Programul de editare folosit se numește notepad++,

Fig 24.Programul Notepad++

O parte din pagină

Codurile reprezentate in pagină cu explicațiile respective.

<style>,</style> Stilul de scris în care se găsesc stilurile de scris culoarea și locul fiecăruia în pagină.

<link> Reprezintă legătura cu un script,link web sau link catre un alt fișier recunoscut de html ce poate fi inserat în interiorul unei pagini web.

<script>,</script> Este scriptul scris în limbaj JavaScript fie direct în pagina web fie într-un fișier extern.

Fig 25. Script scris direct în pagină

Fig 26. Script scris într-un fișier extern

<p>,</p> Cu ajutorul acestora se poate insera un paragraf în pagina web

<meta> Metadate sunt date ( informații ) cu privire la date

< meta > tag-ul furnizează metadate despre documentul HTML . Metadatele nu vor fi afișate pe pagina.

Elementele meta sunt de obicei utilizate pentru a specifica pagina de descriere , cuvinte cheie , autor al documentului , ultima modificare și alte metadate.

<div>,</div> definește o divizie sau o secține într-un document HTML.

< div > tag-ul este folosit pentru a grupa elementele în blocuri pentru a fi formate cu ajutorul CSS.

Următoarea parte a licenței este crearea scripturi-lor.Fiecare parte a aplicației este compunsă din mai unu sau mai multe scripturi. Limbajul de programare folosit pentru crearea lor este JavaScript.

Fișierul simpleLoader.js conține codul următor

(function(global){

//load js, css files

function loadResources(ress, onOneBeginLoad, onOneLoad, onLoad){

var loaded = [];

function _onOneLoad(url){

//to avoid trigger onload more then one time

if(checkHaveLoaded(url)){

return;

}

loaded.push(url);

if(onOneLoad){

onOneLoad(url, loaded.length);

}

if(loaded.length === ress.length){

if(onLoad){

onLoad();

}

}

}

for(var i = 0; i < ress.length; i ++){

loadResource(ress[i], onOneBeginLoad, _onOneLoad);

}

function checkHaveLoaded(url){

for(var i = 0; i < loaded.length; i ++){

if(loaded[i] === url){

return true;

}

}

return false;

}

}

function getExtension(url) {

url = url || "";

var items = url.split("?")[0].split(".");

return items[items.length-1].toLowerCase();

}

function loadResource(url, onBeginLoad, onLoad){

if(onBeginLoad){

onBeginLoad(url);

}

var type = getExtension(url);

if(type.toLowerCase() === 'css'){

loadCss(url);

}else{

loadJs(url);

}

function createElement(config) {

var e = document.createElement(config.element);

for (var i in config) {

if (i !== 'element' && i !== 'appendTo') {

e[i] = config[i];

}

}

var root = document.getElementsByTagName(config.appendTo)[0];

return (typeof root.appendChild(e) === 'object');

}

function loadCss(url) {

var result = createElement({

element: 'link',

rel: 'stylesheet',

type: 'text/css',

href: url,

onload: function(){

elementLoaded(url);

},

appendTo: 'head'

});

//for the browser which doesn't fire load event

//safari update documents.stylesheets when style is loaded.

var ti = setInterval(function() {

var styles = document.styleSheets;

for(var i = 0; i < styles.length; i ++){

// console.log(styles[i].href);

if(styles[i].href &&

styles[i].href.substr(styles[i].href.indexOf(url), styles[i].href.length) === url){

clearInterval(ti);

elementLoaded(url);

}

}

}, 500);

return (result);

}

function loadJs(url) {

var result = createElement({

element: 'script',

type: 'text/javascript',

onload: function(){

elementLoaded(url);

},

onreadystatechange: function(){

elementReadyStateChanged(url, this);

},

src: url,

appendTo: 'body'

});

return (result);

}

function elementLoaded(url){

if(onLoad){

onLoad(url);

}

}

function elementReadyStateChanged(url, thisObj){

if (thisObj.readyState === 'loaded' || thisObj.readyState === 'complete') {

elementLoaded(url);

}

}

}

testLoad({

test: window.console,

success

})

function testLoad(testObj){

testObj.success = !!testObj.success? isArray(testObj.success)?

testObj.success: [testObj.success]: [];

testObj.failure = !!testObj.failure?

isArray(testObj.failure)? testObj.failure: [testObj.failure]: [];

if(testObj.test && testObj.success.length > 0){

loadResources(testObj.success, null, null, testObj.callback);

}else if(!testObj.test && testObj.failure.length > 0){

loadResources(testObj.failure, null, null, testObj.callback);

}else{

testObj.callback();

}

}

function is(type, obj) {

var clas = Object.prototype.toString.call(obj).slice(8, -1);

return obj !== undefined && obj !== null && clas === type;

}

function isArray(item) {

return is("Array", item);

}

global.loadResources = loadResources;

global.loadResource = loadResource;

global.testLoad = testLoad;

}

)(window);

Scurtă prezentare a elemntelor folosite în crearea acestui script.

Variabile

numele unei locatii din memoria calculatorului, folosita pentru a memora date.

Numele variabilei permite accesul valoarea ei precum și schimbarea valorii acesteia, daca este necesar.

Instrucțiuni condiționale

If – execută comenziile dorite când o condiție este adevarată

If …else – execută anumite comenzi când o condiție este adevarată și alte comenzi când aceasta este falsă.

Switch – selecteaza care comandă va fi executată

Instrucțiuni ciclice

for – la fel ca si in alte limbaje de programare, executa codul de un numar specificat de ori

for … in – executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect

while – repeta codul atata timp cat o anumita conditie este adevarata

do … while – intai executa o data codul apoi il repeta atata timp cat o anumita conditie este adevarata

Funcții

O funcție JavaScript este un bloc de cod proiectat pentru a efectua o anumită sarcină

O funcție JavaScript este un bloc de cod proiectat pentru a efectua o anumită sarcină .

Cu ajutorul acestui script pagina HTML recunoaște pornirea aplicației și accesează fiecare fișier spre care este direcționat pentru a putea porni lista de scripturi și astfel aplicația.

Fiecare funcție din interiorul scriptului este definită în asa fel încât fiecare script dupa el cu toate butoanele (Legenda,Editarea etc.) folosesc aceiași operatori astfel să recunoască fiecare buton ”ce are de facut”.

Pentru ca această aplicație să funcționeze este nevoie de un protocol HTTP ,HyperText Transfer Protocol.

HyperText este structurat ca și text care utilizează legături logice,hyperlink-uri,între nodurile care contin text.Exte un protocol de schimb sau transfer hypertext.

Dezvoltarea HTTP a fost inițiată de Tim Berners-Lee in 1989.

Crearea hărții s-a realizat în felul următor. Accesarea unor hărți de pe Internet și cautarea parții unde sunt localizate datele care se folosesc.Suportul de hărți folosite este OpenSource,deci oricine poate avea acces la el. In mare parte hărțile sunt hărti topografice.

Harta pe care am ales-o este harta cu imaginile satelitare, pentru o vizualizare cat mai bună a datelor.

Fig 27.Harta aleasă

După această operațiune a urmat adăugarea layerelor cu date.Aceste layere sunt importate din Geoserver.

Fig 28.Adăugarea layerelor de pe Web

De asemeanea aceste layere se pot adăuga și din calculator.

Fig 29. Adăugarea layerelor din fișier

În cazul în care importul se face direct din sistem, din calculator, pentru a putea face importul este nevoie de arhiva toate elementele ce țin de shapefile-ul respectiv inclusiv sistemul de coordonate în care se face proiecția.

3.3 Crearea butoanelor

Legendă – o parte din cod

Fig 30. Cod JavaScript din Legendă

Fig 31. Legenda afișată în pagină.

Fig 32. Lista de Layere afișată in pagina web.

Aceste layere pot fi închise și deschise in funcție la ce le folosim.

Fig 33. Adaugă date

Astfel putem adăuga date în interiorul aplicației, fie de pe server fie de pe internet cu ajutorul unor site-uri,unde putem uploada fișiere.

Pagina de Printare

Butonul de printare în formatul cod arată astfel

Fig 34. Cod JavaScript din Printează

Partea afișată în pagina arată astfel și altfel se poate printa mai multe tipuri de printare.

Fig 35. Butonul de printează

Fig 36. Butonul Masurare

Cu ajutorul acestuia se pot calcula distanțe și arii pe suportul de hartă

Având în vedere că există mai multe tipuri de hărți acestea pot fi schimbate in funcție de nevoi.

Fig 37. Galerie hărți

Butonul ”Galerie de hărți” face acest lucru. În acest meniu avem la dispoziție 10 suporturi de hărți.

Fig 38. Butonul Desenează

Fiind în era tehnologiei și a internetului am inclus în bara de meniu și un buton de share.

Fig 39. Buton de Share

Cu ajutorul acestui buton putem partaja aplicația respectivă cu ajutorul altor site-uri cum ar fi, Yahoo, Facebook, Twiter,Google+.

Pentru o bună funcționare am adăugat în aplicație un sistem care arată coordonatele punctului unde se afla sageata actionată de mouse.Acesta arată coordonatele indicate.

Deoarece sunt mai multe sisteme de coordonate a trebuit sa caut sistemul de proiectie Stereo 70.În lista din care face parte arată in felul următor.

Fig 40. Sisteme de coordonate

În aplicație ”butonul” cu coordonate arată astfel

Fig 41.Buton de coordonate

Cu ajutorul protocolului HTTPS se poate folosi și butonul de localizare automată,

Astfel putem afla unde ne aflam cu o precizie destul de ridicată. Această localizare se face pe baza adresei de IP la care este conectat instrumentul care il folosim la folosirea aplicației. Astfel arata butonul de localizare.

Fig 42. Buton de Locație

HTTPS este un protocol pentru comunicații securizate pintr-o rețea de calculatoare. Este utilizat la o scară largă.

În pagină arată astfel Fig 43. Buton de Zoom

Butonul Semn de carte

În limbaj de programare

define("dojo/_base/declare dojo/_base/lang dojo/_base/html dijit/_WidgetBase dijit/_TemplatedMixin dojo/on dojo/query jimu/utils dojo/mouse".split(" "),

function(c,d,b,e,f,g,a,h){return c([e,f],

{templateString:'\x3cdiv class\x3d"jimu-img-node"\x3e\x3c/div\x3e',constructor:function(a,b){},

postCreate:function(){this.box=b.create("div",{"class":"node-box"},this.domNode);b.create("img",{src:this.img},this.box);

b.create("div",{"class":"node-label",innerHTML:h.sanitizeHTML(this.label),title:this.label},

this.domNode);this.own(g(this.domNode,"click",d.hitch(this,this.onClick)))},

onClick:function(){a(".jimu-img-node",this.getParent().domNode).removeClass("jimu-state-selected");a(this.domNode).addClass("jimu-state-selected")},

highLight:function(){a(".jimu-img-node",this.getParent().domNode).removeClass("jimu-state-selected");

a(this.domNode).addClass("jimu-state-selected")},

startup:function(){}})});

Partea din aplicație fiind putin diferită

Fig 44. Semne de carte

Aici putem adauga semne de carte.De exemplu dacă avem date din mai multe locații putem pune cate un semn de carte, mai tarziu sa putem reveni la altă locație doar cu ajutorul unui click.

În aplicație mai putem vizualiza și tabelul atribut.

Fig 45. Tabel atribut

În acest tabel apar toate datele pe care le-am introdus cand am creat fișierele .shp.

Fig 46. Analiză spațială

Această funcție face analiză spațiala pe layere deja existente în aplicație și crează alte layere cu rapoartele de analiză.Aceste rapoarte sunt stocate pe serverul pe care este și aplicația, de acolo putând fi mai târziu descărcate.

Fig 47. Tablou de bord

Aceasta funcție creaza un fel de diagrame sub anumite criteri. Acele criterii pot fi modificate dupa bunu plac,doar ca merg modificate doar în limbajul de programare din spate.

define("dojo/_base/declare dojo/_base/array dojo/_base/lang dojo/_base/r".split(" "),function(r,s,m,n,t,p,h,q,u,v,w,k){return r(null,{_drsExtensionUrl:null,_queryParams:null,_reviewerMapServerUrl:null,pointSymbol:null,lineSymbol:null,polySymbol:null,_fieldQualifier:null,_colorMapCache:null,SEVERITY_COLORS:{1:"#D80202",

2:"#DF370C",3:"#E76D16",4:"#E76D16",5:"#FFEC5A"},LIFECYCLEPHASE_COLORS:{2:"#C00000",4:"#FFFF00",6:"#92D050"},DEFAULT_COLOR:"#00C5FF",defaultColor:null,constructor:function(a,b,d,c,e){a=v.urlToObject(a);this._drsExtensionUrl=a.path;this._queryParams=a.query;a=this._drsExtensionUrl.toLowerCase().lastIndexOf("/exts/");0<a&&(this._reviewerMapServerUrl=this._drsExtensionUrl.substring(0,a));this.defaultColor=null!==e?e:new n(this.DEFAULT_COLOR);this.pointSymbol=null!==b?b:new p(p.STYLE_CIRCLE,7,null,this.defaultColor);

this.lineSymbol=null!==d?d:new h(h.STYLE_SOLID,this.defaultColor,5);this.polySymbol=null!==c?c:new q(q.STYLE_SOLID,null,this.defaultColor);this._colorMapCache={}},getLayerDrawingOptions:function(a,b,d){var c=new t;if(!a)return c;var e=this._reviewerMapServerUrl+"/0";null!==this._fieldQualifier?this._generateLayerDrawingOptions(a,b,d,c):u({url:e,content:{f:"json"},callbackParamName:"callback"}).then(m.hitch(this,function(e){var f=RegExp(/severity/i);s.forEach(e.fields,m.hitch(this,function(e){if(e.name.match(f))try{var g=

e.name.split(f);this._fieldQualifier=1<g.length?g[0]:"";this._generateLayerDrawingOptions(a,b,d,c)}catch(h){this._errorHandler(h,c)}}))}),m.hitch(this,function(a){this._errorHandler(a,c)}));return c},_generateLayerDrawingOptions:function(a,b,d,c){var e,g=[];e=this._mapDashboardFieldNameToFullyQualifiedName(a.fieldName).toLowerCase();g=a.fieldValues;b=this._updateColorMapAndCache(a.fieldName,g,b,d);a=this._createPolyRenderer(e,g,b);d=this._createLineRenderer(e,g,b);e=this._createPointRenderer(e,g,

b);b={layerDrawingOptions:{layerDrawingOptionsArray:[this._createLayerDrawingOptions(0,e),this._createLayerDrawingOptions(1,d),this._createLayerDrawingOptions(2,a)],colorMap:b}};c.resolve(b)},_updateColorMapAndCache:function(a,b,d,c){if(null===d){if(0<=a.toLowerCase().indexOf("severity")||0<=a.toLowerCase().indexOf("lifecyclephase"))c=!0;d=this._colorMapCache.hasOwnProperty(a)?this._colorMapCache[a]:this._createDefaultColorMap(a)}b=this._appendMissingValuesToColorMap(b,d,c);return this._colorMapCache[a]=

b},_appendMissingValuesToColorMap:function(a,b,d){var c=0,e;for(e in b)b.hasOwnProperty(e)&&++c;for(c=0;c<a.length;c++)b.hasOwnProperty(a[c])||(b[a[c]]=d?this.defaultColor:new n(this.getColor(c)));return b},getColor:function(a){var b="#E8940C #98C000 #0CBDE8 #F2DA9A #E74327 #DECF3F #878786 #452B7F #9A8B76 #B2912F #9893da #139887".split(" ");return 11>a?b[a]:"#"+Math.floor(16777215*Math.random()).toString(16)},_createLayerDrawingOptions:function(a,b){var d=new w;d.layerId=a;d.renderer=b;return d},

_createDefaultColorMap:function(a){return 0<=a.toLowerCase().indexOf("severity")?this._getColorMap(this.SEVERITY_COLORS):0<=a.toLowerCase().indexOf("lifecyclephase")?this._getColorMap(this.LIFECYCLEPHASE_COLORS):{}},_getColorMap:function(a){var b={},d;for(d in a)b[d]=new n(a[d]);return b},_mapDashboardFieldNameToFullyQualifiedName:function(a){if(!a||""===a)return"";"FEATUREOBJECTCLASS"===a.toUpperCase()&&(a="ORIGINTABLE");return null!==this._fieldQualifier&&0<this._fieldQualifier.length?this._fieldQualifier+

a:a},_createPolyRenderer:function(a,b,d){for(var c=new k(this.polySymbol,a),e=0;e<b.length;e++){var g=b[e],f=new q;f.style=this.polySymbol.style;d.hasOwnProperty(g)?f.color=d[g]:f.color=this.defaultColor;if(null!==this.polySymbol.outline){var l=new h;l.color=f.color;l.style=this.polySymbol.outline.style;l.width=this.polySymbol.outline.width;f.outline=l}else f.outline=new h(h.STYLE_SOLID,f.color,1);"\x3cNull\x3e"===g&&(c=new k(f,a));c.addValue(g,f)}return c},_createLineRenderer:function(a,b,d){for(var c=

new k(this.lineSymbol,a),e=0;e<b.length;e++){var g=b[e],f=new h;d.hasOwnProperty(g)?f.color=d[g]:f.color=this.defaultColor;f.style=this.lineSymbol.style;f.width=this.lineSymbol.width;"\x3cNull\x3e"===g&&(c=new k(f,a));c.addValue(g,f)}return c},_createPointRenderer:function(a,b,d){for(var c=new k(this.pointSymbol,a),e=0;e<b.length;e++){var g=b[e],f=new p;d.hasOwnProperty(g)?f.color=d[g]:f.color=this.defaultColor;f.outline=this.pointSymbol.outline;f.size=this.pointSymbol.size;f.style=this.pointSymbol.style;

"\x3cNull\x3e"===g&&(c=new k(f,a));c.addValue(g,f)}return c},_errorHandler:function(a,b){null===a&&(a=Error("Unexpected response received from server"),a.code=500);b&&b.reject(a)}})});

În acest cod putem modifica criteriile pe baza cărora se crează aceste diagrame

CONCLUZII

WEBOGRAFIE

www.codeconquest.com

www.ro.wikipedia.org

www.boundlessgeo.com

www.en.wikipedia.org

www.w3schools.com

www.docs.sencha.com

www.geo-solutions.it

www.geoserver.org

www.arcgis.com

www.esri.com

www.youtube.com

www.google.com

www.github.com

www.marplo.net

www.openlayers.org

www.geografilia.blogspot.ro