SVEUČILIŠTE U ZAGREBU

GEODETSKI FAKULTET

Marko Pleić

Održavanje geodetskog plana na web-u

Diplomski rad

Zagreb, srpanj 2017.

Zahvala:

Zahvaljujem se mentoru doc. dr. sc. Lorisu Redovnikoviću. Posebno i veliko hvala

voditelju Saši Vraniću dipl. ing. na preporučenoj i sastavljenoj temi diplomskog rada,

ustupljenoj literaturi te susretljivosti, savjetima, komentarima i prenesenom znanju

tijekom izrade istog.

I. Autor

Ime i prezime: Marko Pleić

Datum i mjesto rođenja: 10.12.1993., Tomislavgrad, BiH

II. Diplomski rad

Naslov: Održavanje geodetskog plana na web-u

Mentor: doc. dr. sc. Loris Redovniković

Voditelj: Saša Vranić, dipl. ing.

III. Ocjena i obrana

Datum zadavanja zadatka: 15.01.2017.

Datum obrane: 07.07.2017.

Sastav povjerenstva pred kojim je branjen diplomski rad:

doc. dr. sc. Loris Redovniković

izv. prof. dr. sc. Mladen Zrinjski

prof. dr. sc. Đuro Barković

Održavanje geodetskog plana na web-u

Marko Pleić

Sažetak: Cilj ovog diplomskog rada bio je razviti web aplikaciju za

održavanje geodetskog plana integracijom određenih komponenti

geoinformacijskog i CAD sustava koristeći OpenLayers razvojni okvir i

ostale web tehnologije otvorenog koda. OpenLayers je alat prvenstveno

namijenjen kartiranju i izradi web karata. Stoga, neophodno ga je bilo

nadograditi kako bi zadovoljio kriterij točnosti i preciznosti kojeg

zahtijevaju geodetski planovi. U skladu s navedenim, produkt rada je

inovativna web aplikacija mapp koja poslužuje izradi i održavanju

geodetskog plana na jedan moderan i napredan način.

Ključne riječi: geodetski plan, CAD, GIS, web aplikacija, OpenLayers.

Maintenance of geodetic plan on the Web

Abstract: The goal of this diploma work was to develop a web

application for maintaining a geodetic plan integrating certain

components of a Computer aided design and a Geographic information

system using the OpenLayers framework and other open source web

technologies. OpenLayers itself is a mapping tool, thus it's not intended

to work with geodetic plans which require higher accuracy and precise

than maps do. Therefore it was necessary to adapt it to meet their

needs. The result was web application mapp implementing the extended

OpenLayers framework as the above-mentioned integration, combining

their benefits altogether, serving modern and advanced way to

maintaining a geodetic plan on the web.

Keywords: geodetic plan, CAD, GIS, web application, OpenLayers.

Održavanje geodetskog plana na web-u

Marko Pleić

SADRŽAJ

1. UVOD ...................................................................................................................... 7

2. GEODETSKI PLAN ................................................................................................ 9

Definicija, vrste i primjena ................................................................................. 9

Katastarski plan ................................................................................................ 9

Digitalni geodetski plan ................................................................................... 10

Sustavi za održavanje digitalnog plana ................................................ 10

CAD sustav .............................................................................. 10

GIS ........................................................................................... 11

Usporedba CAD sustava i GIS-a .............................................. 12

Digitalni katastarski plan ....................................................................... 14

3. MODELIRANJE PROSTORNIH PODATAKA ...................................................... 15

Model i modeliranje podataka ......................................................................... 15

Prostorni podaci .............................................................................................. 17

Normizacija modela prostornih podataka........................................................ 18

ISO 19107 ............................................................................................ 18

ISO 19125 ............................................................................................ 21

Prvi dio ..................................................................................... 21

Drugi dio ................................................................................... 22

ISO 19152 (LADM) ............................................................................... 23

4. WEB APLIKACIJE ................................................................................................ 26

Općenito o web aplikacijama .......................................................................... 26

Arhitektura i princip rada ....................................................................... 27

Postojeći sustavi ............................................................................................. 28

5. WEB APLIKACIJA MAPP .................................................................................... 33

Koncept izrade sustava .................................................................................. 33

Tehnologije korištene za razvoj ...................................................................... 33

HTML .................................................................................................... 33

CSS ...................................................................................................... 34

JavaScript ............................................................................................. 36

DOM ......................................................................................... 38

Događaji ................................................................................... 38

Objekti ...................................................................................... 39

OpenLayers .............................................................................. 44

jQuery ....................................................................................... 45

Ostali programi ..................................................................................... 45

Implementacija ............................................................................................... 47

Sučelje i mogućnosti ....................................................................................... 51

OpenLayers XT .............................................................................................. 62

Izgradnja i prevođenje knjižnice ........................................................... 64

Izrada API dokumentacije ..................................................................... 69

6. ZAKLJUČAK ........................................................................................................ 71

Literatura

Popis tablica

Popis slika

Popis priloga

Prilozi

Životopis

7

1. UVOD

U samoj definiciji geodezije kao znanosti spominju se i planovi, što je vjerojatno

najbolji dokaz kolika je važnost geodetskih planova u geodeziji, ali i šire u

svakodnevnom životu. Za izradbu digitalnih geodetskih planova koriste se različiti

CAD programski sustavi. S druge strane, tu su i geoinformacijski sustavi (GIS) koji

omogućuju sofisticirana pitanja i analize primjenom prostornih podataka (Ivković

2013). Međutim, GIS ne zadovoljava kriterij točnosti i preciznosti kojeg geodetski

planovi zahtijevaju, stoga se ne mogu u potpunosti koristiti za njihovu izradu.

Gledajući iz perspektive geodetske struke, za CAD sustave i GIS se može reći da su

komplementarni, odnosno prednosti jednog sustava su nedostaci drugog, a vrijedi i

obratno. Nedostaci sustava bi se dakle poništili njihovom integracijom, čime bi se

dobilo i jedinstveno rješenje za izradu i održavanje geodetskog plana te analizu

prostornih podataka koji su na njemu prikazani. Stoga će se razlike navedenih

sustava, odnosno njihove prednosti i nedostaci detaljnije obraditi i eksplicitno navesti.

Cilj diplomskog rada je razviti web aplikaciju za održavanje geodetskog plana koja

integrira određene komponente geoinformacijskog i CAD sustava, korištenjem web

tehnologija otvorenog koda. Integracijom tih komponenti djelomično bi se otklonili

odnosno ublažili njihovi nedostaci. Web tehnologija općenito donosi mnogobrojne

prednosti u usporedbi s programskim rješenjima koje je, da bi se uopće mogli

koristiti, neophodno instalirati na računalo. To je upravo razlog odabiru korištenja

web tehnologije.

Prije razvoja, postavljena su pitanja postoje li već takva ili slična web rješenja, koje

su im mogućnosti odnosno mogu li se koristiti za izradu geodetskog plana te kakva je

odnosno kolika njihova dostupnost odnosno cijena (besplatni, otvorenog koda,

komercijalni). Najnapredniji od njih će biti detaljnije istraženi i uspoređeni u skladu s

postavljenim određenim kriterijima, na temelju čega će se iznijeti zaključci.

Postoje različite vrste geodetskih planova, a radi pojednostavljenja implementacije

programskog rješenja koncentracija će biti isključivo na katastarskom planu, njegovoj

strukturi i određenim prostornim podacima koji su na njemu prikazani. Za pohranu,

prikaz i obradu podataka u nekom računalnom informacijskom sustavu potreban je

8

odgovarajući model podataka u ovisnosti o njihovoj vrsti. Prema Cetlu (2003)

procedure za definiciju podataka i metoda za strukturiranje i zapisivanje podataka

kao i procedure za distribuciju i održavanje podataka je potrebno standardizirati u

svrhu uspostave sustava za razmjenu između različitih korisnika, informacijskih

sustava i lokacija. Modeliranje podataka je normirano od strane Međunarodne

organizacije za normizaciju, stoga će se u tom postupku osvrnuti na odgovarajuće

norme.

Uz dodatne i pomoćne programe, za razvoj sučelja aplikacije će se koristiti tzv.

DHTML (eng. Dynamic HTML) web tehnologija za izradu dinamičkih web stranica

koja obuhvaća HTML, CSS i JavaScript web tehnologije. Navedenim tehnologijama

će se pri njihovom opisu posvetiti više pažnje, uz naglasak na JavaScript programski

jezik obzirom na njegov veliki udio i važnost u razvoju aplikacije. Razvojni okvir koji

će biti odgovoran za rukovanje prostornim podacima je OpenLayers. OpenLayers je

kartografski alat, stoga će biti neophodno proširiti njegove ugrađene kontrole za

crtanje, uređivanje i korištenje točke hvatišta koje će omogućiti točniji i precizniji rad s

katastarskim podacima na web-u.

9

2. GEODETSKI PLAN

Definicija, vrste i primjena

Prema Ivković (2013) geodetski plan je nedeformirani prikaz manjeg dijela Zemljine

površine i detalja koji se na tom zemljištu nalaze u ravnini, u određenom mjerilu. Plan

pruža informacije o detaljima, njihovom položaju i međusobnoj udaljenosti. Svrha

geodetskih planova je različita.

Koriste se za osnivanje katastra i zemljišne knjige, projektiranje prometnica i objekata

na njima, hidrotehničke radove te provođenje agrarnih operacija te prostorno

planiranje i uređivanje. Zatim se koriste i za detaljna planiranja te projektiranje

građevinskih objekata, različite znanstvene studije, izradu tematskih i specijalnih

planova i karata.

Geodetski planovi se dijele prema vlastitoj namjeni i karakteristikama na katastarske,

topografske, topografsko-katastarske, inženjerske i tematske planove. U svrhu

pojednostavljenja implementacije web aplikacije, u radu je koncentracija bila

isključivo na katastarskom planu i određenim podacima koji su prikazani na njemu.

Katastarski plan

Katastarski plan je prema Ivković (2013) grafički prikaz čestica Zemljine površine

zajedno sa svime što je sa zemljištem trajno povezano na površini ili ispod nje. Daje

informacije o vlasničkim odnosima na zemljištu i objektima na njemu, pri čemu je

teren prikazan samo u horizontalnom smislu. Koristi se za izradu i održavanje

katastra zemljišta i zemljišne knjige, provođenje komasacija, parcelacija zemljišta i sl.

Sadržaj katastarskog plana su katastarske čestice i njihovi brojevi, izgrađeni objekti,

granice kultura i administrativne granice. Katastarska čestica je osnovna prostorna

jedinica katastra nekretnina, a svakoj čestici je dodijeljen broj jedinstven unutar

katastarske općine kojoj pripada. Katastarski planovi su produkt katastarske izmjere

detaljnih točaka u odnosu na točke geodetske katastarske osnove ili osnovne

državne mreže. Slika 1 prikazuje isječak jednog katastarskog plana.

Prema tehničkoj specifikaciji za postupke računanja i podjelu na listove službenih

karata i detaljne listove katastarskog plana u službenoj kartografskoj projekciji

10

Republike Hrvatske, mjerila katastarskih planova su 1:500, 1:1000 i 1:2000 (DGU

2009).

Slika 1. Isječak katastarskog plana (Ivković 2015)

Digitalni geodetski plan

Geodetski plan izrađen prikladnim računalnim programom ili GIS programskim

sustavom te pohranjen na nekom od elektroničkih medija, naziva se digitalnim

geodetskim planom. Plan tako može biti prikazan na zaslonu računala ili ispisan na

papiru (Ivković 2015). Danas je većina geodetskih planova digitalna. Stoga, kada je

riječ o geodetskim planovima, podrazumijeva se njihov digitalni zapis i nije potrebno

posebno naglašavati da je riječ o digitalnim geodetskim planovima.

Sustavi za održavanje digitalnog plana

Postoje različita programska rješenja za održavanje digitalnih geodetskih planova.

Rješenja tako mogu biti namjenska, odnosno programski sustavi izrađeni isključivo

za potrebe rješavanja geodetskih zadataka. Zatim, programi izrađeni za rješavanje

svih grafičkih zadataka kao što je CAD sustav te Geografski informacijski sustav

(GIS) su univerzalni (Ivković 2015).

CAD sustav

CAD (eng. Computer Aided Design), kao što samo ime kaže, je računalom podržano

projektiranje. To je računalna tehnologija koja omogućuje dizajn i dokumentiranje

rezultata (URL 1).

11

CAD programe prema Ivković (2015) generalno karakteriziraju visoki stupanj

interaktivnosti s korisnikom, ugrađeni obimni skupovi funkcija za geometrijsko

modeliranje u 2D i 3D, mogućnost dodavanja ili definiranja u geometrijskom modelu

različitih grafičkih sadržaja (linije različitih debljina, vrste ili boje, ispuna objekta bojom

i dr.). Zatim, ugrađene funkcije za „mjerenje“ određenih veličina (duljine, površine,

kutovi…), mogućnost razlaganja sadržaja modela na odgovarajući broj slojeva (eng.

layers) radi efikasnijeg korištenja grafičkog sadržaja i tematskog razdvajanja sadržaja

modela te mogućnost nadogradnje raznih alata i potprograma koji rade u okruženju

CAD programskog sustava.

CAD programi obuhvaćaju gotovo sve zahtjeve za obradu, prikaz, korištenje i

upravljanje geodetskim podacima, stoga nalaze široku primjenu i u geodetskoj struci

(Ivković 2015). Razlozi primjene CAD sustava u geodetskoj praksi su visok stupanj

interaktivnosti s korisnikom, odnosno poboljšano korisničko iskustvo (eng. user

friendly), jednostavnost, produktivnost i brzina pri pokretanju, odnosno izradi

digitalnih planova u ovom slučaju, pri čemu nije izostavljena pouzdanost, u smislu

točnosti i preciznosti.

Karakteristike samog sustava kao i navedeni razlozi primjene jesu zapravo njegove

prednosti. Ono što CAD sustavu nedostaje upotpunio je GIS svojom pojavom, pa

kada je riječ o nedostacima CAD sustava iz perspektive geodetske struke, to su

zapravo prednosti GIS-a.

GIS

GIS je računalni sustav sposoban za sakupljanje, pohranjivanje, upravljanje i prikaz

geokodiranih informacija, tj. identifikaciju podataka vezano s lokacijom. Praktično GIS

uključuje i osoblje i podatke uključene u sustav (URL 2).

Prema Gajskom i Šamanović (2016) u nastavku će se navesti prednosti i nedostaci

geoinformacijskog sustava. Prednosti Geoinformacijskog sustava su vizualizacija

podataka (mogućnosti prikaza velike količine atributnih podataka pohranjenih u

računalu u jednostavnom, slikovitom i čovjeku bliskom obliku), povezivanje

geografskih i atributnih obilježja (mogućnost analize, zaključivanja i logičkog

12

interpretiranja) i mogućnost interdisciplinarnog odlučivanja (potencijal koji je

ograničen samo čovjekovom maštom).

S druge strane, nedostaci Geoinformacijskog sustava su statičnost (teško rukovanje

podacima koji se mijenjaju u vremenu), dugotrajni procesi prikupljanja podataka i

produkcije karata (različiti formati, zatvorenost ustanova, pretvorba analognih

podataka), specifična informatička oprema (hardver i softver za cijeli niz aktivnosti

koji uključuju prikupljanje, obradu, CAD, geokodiranje, analize).

Usporedba CAD sustava i GIS-a

Gledajući iz perspektive geodetske struke, za CAD sustave i GIS se može reći da su

komplementarni, odnosno prednosti jednog sustava su nedostaci drugog, a vrijedi i

obratno. Razlike CAD sustava i GIS-a najkraće rečeno su razlike između CAD crteža

(eng. drawing) i prostorne baze podataka (eng. spatial database) koju koristi GIS. U

širem smislu, to su razlike u modeliranju, objektima, topologiji i upravljanju podacima

(URL 3). Tablica 1 daje pregled glavnih razlika koje će u nastavku biti detaljnije

opisane.

Tablica 1. Pregled glavnih razlika CAD-a i GIS-a

CAD GIS

Model manji i kompleksniji dijelovi prostora generalizirana geografija prostora Točnost i preciznost

visoka niža/niska

Koordinatni sustav

relativni kartezijev 2D ili 3D (WCS/UCS)

referentni geografski/geodetski/projekcijski

Objekti točke, linije, krivulje, tekst, blokovi, dimenzije

točke, linije, poligoni

Struktura podataka

„špageti“ topološka

CAD sustav je namijenjen za inženjerska projektiranja manjih i kompleksnijih dijelova

prostora. Predmet takvog modeliranja ovisi od interesa različitih struka, ali u svakom

slučaju zahtijeva višu ili visoku točnost i preciznost. U slučaju geodetske struke radi

se o geodetskom planu. GIS modelira geografiju većeg dijela Zemljine površine koji

je generaliziran, što neposredno utječe na točnost i preciznost modela, dakle radi se

o kartama. GIS koristi različite referentne geografske, geodetske ili projekcijske

koordinatne sustave, dok CAD koristi relativni 2D ili 3D kartezijev koordinatni sustav

koji može biti fiksan (WCS) ili korisnički definiran (UCS) (URL 3).

13

CAD objekti uključuju točke, linije, kružnice, lukove, tekst, blokove i dimenzije. GIS

objekti su točke (eng. point), polilinije (eng. line string) i poligoni (eng. polygon). Za

razliku od CAD sustava, GIS implementira topološku strukturu podataka što

omogućuje poznavanje odnosa objekata, kao što su susjedstvo, povezanost,

orijentacija i pripadnost. Samim time, omogućeno je izvršavanje prostornih analiza u

GIS-u. Topologije koje koristi GIS su čvorna (eng. node), mrežna (eng. network) i

poligonalna (eng. polygon), izračunate nad skupinama GIS objekata točke, linije i

poligona, redom kako su navedene. Dakle, ukoliko se odgovarajući CAD model

namjerava koristiti unutar GIS-a, poželjna je topološka ispravnost istog (URL 3).

Atributni podaci i slojevi su različito tretirani i spremljeni unutar GIS-a (prostorna baza

podataka) odnosno CAD sustava (crtež). Osim toga, GIS dijeli spremanje prostornih

podataka od njihove vizualizacije, što omogućuje analizu i prikaz istih podataka više

puta i na različite načine. To nije slučaj kod CAD sustava koji objektima dodjeljuje

vizualizacijske elemente (npr. debljina linije, boja linije i sl.) i na takav način ih

pohranjuje (URL 3).

CAD sustav omogućuje crtanje i uređivanje unosom koordinata ili dimenzija te

naprednije korištenje točke hvatišta (eng. snap). Dostupnost pojedinog tipa točke

hvatišta prilikom crtanja za CAD (AutoCAD) i GIS programske sustave su prikazani u

tablici 2, pri čemu su dani primjeri GIS programskih rješenja dostupnih kao programi

otvorenog koda (eng. open source) i komercijalni programi (eng. shareware).

Tablica 2. Dostupnost tipa točke hvatišta po programskom sustavu

Snap type CAD GIS

AutoCAD ArcMap

(shareware) QGIS

(open-source)

endpoint + + +

nearest + + +

midpoint + + -

intersection + + -

tangent + + -

node + - -

center + - -

perpendicular + - -

parallel + - -

apparent intersection + - -

geometric center + - -

quadrant + - -

extension + - -

14

Digitalni katastarski plan

Digitalni katastarski plan (DKP) podrazumijeva prikaz jedne katastarske općine na

jednom digitalnom planu. Organizacija podataka se temelji na principu razdvajanja

istovrsnih podataka u slojeve. Prema tome, u zasebnim slojevima su razvrstane

točke geodetske osnove, granice katastarskih čestica, granice kultura, izgrađeni

objekti i brojevi katastarskih čestica. Osnovni podaci koji se prikupljaju vezani su uz

pojedine katastarske čestice koje su jednoznačno određene njihovim brojem. Upravo

se brojem katastarske čestice povezuju grafički i atributni podaci (Ivković 2015).

Primjer digitalnog katastarskog plana je prikazan na slici 2.

Slika 2. Digitalni katastarski plan k.o. Karin

Struktura digitalnog katastarskog plana u Republici Hrvatskoj je standardizirana

Specifikacijom za vektorizaciju katastarskih planova koji se izrađuju CAD/GIS

software-ima (verzija 2.9.4.) Državne geodetske uprave (DGU 2010). Struktura

slojeva digitalnog katastarskog plana na koje se referiralo pri izradi aplikacije su

prikazani u tablici 3.

Tablica 3. Struktura referiranih slojeva DKP-a pri izradi aplikacije (DGU 2010)

Naziv sloja (La) Opis sadržaja sloja Tip entiteta Boja

1_kc_medja međe line green 1_kc_broj centroid katastarske čestice block green 2_zg vanjske linije zgrade line cyan 2_zg_broj centroid zgrade block cyan

15

3. MODELIRANJE PROSTORNIH PODATAKA

Obzirom na kompleksnost stvarnog svijeta, njegovo uopćavanje za pohranu i prikaz

u računalnim informacijskim sustavima je neophodan. Uopćavanje se obavlja

modeliranjem prostornih podataka, a stupanj uopćavanja ovisi o potrebama i namjeni

sustava za koji se model izrađuje. Modeliranje podataka je normirano od strane

Međunarodne organizacije za normizaciju (eng. International Organization for

Standardization – ISO). Tako se modelirani podaci na normiran način pospremaju i

održavaju unutar baze podataka informacijskog sustava.

Model i modeliranje podataka

Model podataka je formalni sustav koji obuhvaća definiranje podataka, općih pravila

integriteta podataka, pravila manipulacije podacima (operacije) i pravila jezika za

manipulaciju podacima (npr. SQL) te predstavlja osnovu za razvoj sustava za

upravljanje bazama podataka (eng. Database Management System – DBMS)

(Vujnović 1995).

Sustav za upravljanje bazama podataka je programski sustav koji osigurava osnovne

funkcije određenog modela podataka prilikom izrade i uporabe baze podataka.

Podaci, tj. objekti čine osnovu baze podataka. Baza podataka je skup pohranjenih,

ne redundantnih i međusobno povezanih podataka u svrhu optimalnog posluživanja

u raznim primjenama. Manipulaciju podataka, tj. pretraživanje, dobivanje i izmjena

objekata osiguravaju operacije koje se mogu izvoditi nad njima. Opća pravila

integriteta implicitno ili eksplicitno definiraju skup konzistentnih i općenitih stanja ili

promijenjenih stanja podataka ili kombinirano. Takova stanja mogu biti primjenjiva na

bilo koju bazu podataka koja koristi taj model (Medak 2013).

Modeliranje podataka obavlja se u svim fazama razvoja nekog informacijskog

sustava. Započinje u fazi planiranja, a detaljno se nastavlja u fazi analize. Model

podataka razvija se u različitim fazama od konceptualnog modela, preko logičkog ili

implementacijskog modela da bi u konačnici rezultirao fizičkim modelom čija je

realizacija upravo baza podataka (Cetl 2003) (Slika 3).

16

Slika 3.Odnos stupnja uopćenja modela i njegove orijentiranosti (Matijević 2004)

Pojedine vrste modela i njihova primjena će biti opisane prema Matijeviću (2004).

Konceptualni model je djelomično strukturiran model objekata, obilježja i procesa

važnih za pouzdano djelovanje sustava. Cjelokupna struktura informacijskog sustava

je opisana njime i ključan je za razumijevanje istog te u potpunosti ne ovisi o

implementaciji na logičkoj ili fizičkoj razini. Objektni model i model entitet-veza (EV)

su najčešće korišteni konceptualni modeli, a temelje se na prikazu dijagrama.

Slika 4. Primjer dijagrama EV modela (Medak 2013)

EV model prikazuje odnos (eng. relation) između entiteta (eng. entity) definiranih

svojstvima (eng. attribute). Primjer jednog EV modela prikazan dijagramom dan je na

slici 4. U shemi koju dijagram prikazuje pravokutnik predstavlja entitet, elipsa atribut,

a romb vezu (Medak 2013).

Objektni model se koristi pri modeliranju kompleksnih objekata (u koje spadaju i

prostorni), odnosno pruža mogućnost njihove specifikacije i operacija nad njima.

Drugim riječima, svaki objekt se može definirati njegovim atributima, metodama i

stanjem, pri čemu se objekti istih obilježja svrstavaju u klase.

17

Logički model je implementacijski orijentirana prezentacija dijela stvarnog svijeta koji

se modelira, a najčešće u obliku dijagrama koji omogućavaju kodiranje unutar

informacijskog sustava. Cilj modela je izrada logičkih struktura i odnosa među

podacima, pri čemu se zanemaruje fizička organizacija modela. Logičkom

modeliranju se pristupa temeljem izrađenog konceptualnog modela. Najčešće

korišteni logički modeli su relacijski, objektni i objektno-relacijski.

Relacijski model podataka organizira podatke jedne vrste entiteta u tablice (relacije)

(Slika 5). U redove se svrstavaju instance entiteta, n-torke (eng. tuple), a u stupce

njihovi pripadajući atributi. Svaka n-torka unutar relacije je jednoznačno određena

minimalnim skupom atributa koji se naziva ključ (eng. key). Relacije se mogu

povezivati odnosima (eng. relationship) pomoću stranog ključa (eng. foreign key).

Logičku konzistentnost odnosa relacija osigurava vrijednost stranog ključa koja mora

biti jednaka vrijednosti primarnog ključa druge relacije ili 0. Jezik za komunikaciju s

relacijskim bazama podataka koji je našao široku primjenu je SQL.

Slika 5. Relacija (tablica) i dijelovi relacije

Objektni model podataka, za razliku od relacijskog koji je vrlo jednostavan,

omogućuje modeliranje složenijih tipova podataka i definiranje operacija nad istim.

Objektne baze podataka su nastale kombinacijom tehnologija baza podataka i

objektno-orijentiranog programiranja. Objektno-relacijski model je kombinacija

objektnog i relacijskog modela podataka. Fizički model podrobno opisuje stvarne

fizičke organizacije podataka, odnosno njihov raspored na konkretnom mediju u

okviru računalnog sustava.

Prostorni podaci

Podaci koji se modeliraju su prostorni podaci prikazani na katastarskom planu, a

prema Roiću i dr. (2002) dijele se na geometrijsku, topološku i tematsku komponentu

(Slika 6). Geometrijska komponenta određuje položaj objekata u zadanom

atributi

n-torka

18

referentnom sustavu. Topološka određuje njihov međusoban odnos, dok tematska

pruža dodatan opis. Prostorni podaci se svrstavaju među složene tipove podataka,

stoga se za njihovo modeliranje koristi objektni, odnosno objektno-relacijski model

podataka.

Slika 6. Komponente prostornih podataka (Roić i dr. 2002)

Normizacija modela prostornih podataka

Uvođenje normi u upravljanje podacima važno je za uspostavu sustava razmjene

između različitih korisnika, informacijskih sustava i lokacija. Stoga je potrebno

standardizirati procedure za definiciju podataka i metoda za strukturiranje i

zapisivanje podataka kao i procedure za distribuciju i održavanje podataka (Cetl

2003).

Jedna od glavnih međunarodnih normi u području prostornih podataka je ISO 19107,

koja predstavlja generički konceptualni model prostornih podataka. Prostorni podaci

prikazani na geodetskom planu su jednostavnog geometrijskog tipa, pa je samim

time i model prostornih podataka jednostavan. Pojednostavljeni model, dovoljan za

modeliranje geodetskih planova, je predviđen normom ISO 19125. Pošto se radi o

katastarskom planu, potreban je konceptualni model za objekte koji ga sačinjavaju

(katastarska čestica, zgrada, međna točka). Takav model je predviđen ISO 19152

(LADM) normom. Shematski prikazi u normama su predstavljeni UML (eng. Unified

Modeling Language) dijagramima.

ISO 19107

Norma ISO 19107 predstavlja općeniti generički model prostornih podataka (eng.

Spatial schema) koji definira tipove prostornih podataka, tj. objekata i njihove

19

operacije. Propisuje konceptualne sheme za opisivanje i rukovanje prostornim

podacima i temelj je za daljnju normizaciju geoinformacija. Norma se dakle bavi

samo vektorskim podacima koji se sastoje od geometrijskih i topoloških primitiva.

Geometrijski i topološki primitivi služe za konstrukciju objekata koji predstavljaju

prostorna svojstva geografskih objekata (eng. features), odvojeno ili kombinirano.

Objekt se definira kao apstrakcija stvarne pojave u svijetu. Za objekt se kaže da je

geografski ako mu je dodijeljena lokacija, relativno u odnosu na Zemlju.

Model predviđen ovom normom opisuje prostorna svojstva jednim ili više prostornih

atributa čije su vrijednosti dane geometrijskim (GM_Object) ili topološkim objektom

(TP_Object). Geometrija opisuje kvantitetu što uključuje dimenzije, položaj, veličinu,

oblik i orijentaciju. Pri transformaciji geoinformacija iz jednog geodetskog referentnog

sustava u drugi, geometrija je jedino svojstvo koje se mijenja. Topologija se bavi

onim svojstvima geometrijskih objekata koja ostaju invarijantna nakon primjene

transformacija.

Prostorne operacije su funkcije i postupci koji uključuju analizu, izradu, izmjenu i

brisanje prostornih objekata. Rezultat taksonomije prostornih operacija ove

normizacije je norma za njihovu definiciju i implementaciju.

Ciljevi norme su sljedeći:

jedinstveno definiranje prostornih operatora u svrhu osiguranja rezultata koji

se mogu uspoređivati unutar poznatih granica točnosti i rezolucije prilikom

različitih implementacija,

takve definicije će poslužiti za određivanje skupa standardnih operacija i

formiranje osnove usuglašenog sustava koji će poslužiti za testiranje i

potvrđivanje usklađenosti,

definiranje algebre operatora koja će omogućiti kombinaciju osnovnih

operatora za predikcijsku uporabu pri rukovanju prostornim podacima i analizi.

Normirane konceptualne sheme prostornih svojstava su predviđene za uporabu u

Geoinformacijskim sustavima, od programera do korisnika geoinformacija, čime se

osigurala konzistentnost struktura prostornih podataka te povećala mogućnost

dijeljenja geoinformacija među aplikacijama. Norma dakle specificira konceptualne

20

sheme za opisivanje prostornih svojstava i operacija nad geografskim objektima, pri

čemu je obrađena geometrija i topologija do treće dimenzije.

Slika 7. Osnovne geometrijske klase (ISO 2003)

Na slici 7 je dan shematski prikaz osnovnih geometrijskih klasa. GM_Object je glavna

geometrijska klasa, a instance klase su geometrijski objekti. Općenito, geometrijski

objekt je skup točaka definiranih pozicijom (DirectPosition) u određenom referentnom

koordinatnom sustavu. Geometrijski objekti koji su instance klase GM_Primitive su

otvoreni skupovi točaka, tj. ne sadrže granične točke, dok su objekti instance klase

GM_Complex zatvoreni skupovi, tj. njihovi skupovi sadrže granične točke. Klase

GM_Object i GM_Primitive su apstraktne, što podrazumijeva da nijedan objekt iz

sheme ne može direktno biti njihova instanca. Instance navedenih klasa moraju biti

21

instance jedne od njihovih konkretnih podklasa kao što GM_Point, GM_Curve ili

GM_Surface. Taj slučaj ne vrijedi za GM_Complex klasu koja ne mora biti instanca

jedne od konkretnih podklasa GM_Composite klase.

ISO 19125

Norma ISO 19125 predstavlja pojednostavljeni model (eng. Simple features), a

nastala je iz istoimene OGC (Open Geospatial Consortium) specifikacije, kao rezultat

primjene velikog broja korisnika. ISO norma, kao i OGC specifikacija ima dva dijela.

Prvi dio

Prvi dio norme definira arhitekturu jednostavnih geometrijskih objekata (eng.

Common architecture). Pojednostavljeni objektni model je prikazan na slici 8. Klase

Point, Curve, Surface i GeometryCollection su podklase osnovne klase Geometry, a

svaki geometrijski objekt je smješten u referentni koordinatni sustav. Model je

proširen MultiPoint, MultiLineString, MultiPolygon, MultiCurve i MultiSurface klasama

za modeliranje kolekcije geometrija Point, LineString, Polygon, Curve i Surface.

Podklase klase Geometry su ograničene na 0, 1 i 2-dimenzionalne geometrijske

objekte, a sve instance definirane kao topološki zatvorene, tj. sadrže svoje granice.

Slika 8. Hijerarhija klasa geometrija (OGC 2011a)

22

Točka je definirana kao nuldimenzionalni geometrijski objekt koji predstavlja položaj

definiran x i y koordinatama. Granica točke je prazan skup. Polilinija je krivulja

(podklasa krivulje) s linearnom interpolacijom između točaka. Krivulja (eng. curve) je

jednodimenzionalni geometrijski objekt koji se obično pohranjuje kao niz točaka s

podtipom krivulje koja specificira oblik interpolacije između točaka. Svaki uzastopni

par točaka definira linijski segment. Polilinija definirana s najmanje dvije točke je

linija. Linijski prsten (eng. linear ring) je jednostavna i zatvorena polilinija.

Poligon je planarna ploha (podklasa plohe) definirana s jednom vanjskom granicom i

nula ili više unutarnjih granica. Ploha (eng. surface) je dvodimenzionalni geometrijski

objekt. Svaka unutarnja granica definira rupu u poligonu.

Norma specificira i metode, koje se dijele na:

osnovne metode,

metode za ispitivanje međusobnih prostornih odnosa geometrijskih objekata,

metode koje podržavaju prostorne analize geometrijskih objekata,

metode nad pojedinim geometrijskim objektima i

relacijske operatore.

Također, specificirane su i reprezentacije geometrije u binarnom obliku (eng. Well-

known Binary) i u obliku teksta (eng. Well-known Text). Osim geometrije, u obliku

teksta je specificirana reprezentacija prostornog referentnog sustava (eng. Spatial

Reference System).

Drugi dio

Drugi dio norme definira shemu za upravljanje tablicama proširenim prostornom

komponentom, geometrijom i prostornim referentnim sustavom u SQL implementaciji

na temelju unaprijed definiranih vrsta podataka (Slika 9). Takvu SQL implementaciju

koristi većina prostornih baza podataka.

Tablica GEOMETRY_COLUMNS opisuje dostupne prostorne tablice i njihova

geometrijska svojstva. Tablica SPATIAL_REF_SYS opisuje koordinatni sustav i

transformaciju geometrije. Tablica Feature table pohranjuje kolekciju prostornih

objekata. Stupci tablice Feature table predstavljaju atribute objekata, dok redci

23

predstavljaju objekte pojedinačno. Jedan od atributa objekata je geometrija. Tablica

Geometry table pohranjuje geometrijske objekte pomoću standardnih SQL

numeričkih ili binarnih tipova. Strani ključ tablice Geometry table je stupac Geometry

Column.

Slika 9. Shematski prikaz normirane SQL implementacije (OGC 2011b)

Ovisno o vrsti pohrane određenoj tablicom GEOMETRY_COLUMNS, geometrijski

objekt se pohranjuje kao lista koordinata ili kao pojedinačni binarni zapis. Prije

rekonstrukcije geometrijskih objekata, u tablicu geometrije su se zapisivale

koordinate u unaprijed definirane SQL brojčane tipove. Sada se kompletan

geometrijski objekt zapisuje u binarnom zapisu kao jedinstvena vrijednost.

ISO 19152 (LADM)

Model upravljanja zemljištem (eng. Land Administration Domain Model – LADM) prije

svega je konceptualni model. Svrha modela nije zamjena za postojeće sustave, već

definiranje formalnog jezika za njihov opis, tako da se njihove razlike i sličnosti mogu

bolje razumjeti, što ovu normu čini opisnom, a ne propisnom.

24

Upravljanje zemljištem je široka disciplina, pa je fokus ove međunarodne norme na

onaj dio upravljanja zemljištem koji je vezan za prava, odgovornosti i ograničenja

uspostavljenih na tlu ili vodenim površinama i njihove geometrijske (geoprostorne)

komponente.

LADM pokriva sve osnovne komponente upravljanja zemljištem uključujući sve iznad

i ispod površine Zemlje. Definira konceptualni model vezan za stranke (pravne i

fizičke), osnovne administrativne jedinice, prava, odgovornosti i ograničenja

(vlasnička prava), prostorne jedinice (parcele, zgrade, vodove) te izmjeru i prikaz

prostornih podataka (geometrija i topologija). Zatim, definira najjednostavniju moguću

terminologiju u području upravljanja zemljištem, utemeljenu na različitim nacionalnim

i međunarodnim sustavima, kako bi bila korisna u praksi. Nadalje, pruža osnovu za

nacionalne i regionalne profile. Naposljetku, omogućuje kombinaciju informacija

upravljanja zemljištem iz različitih izvora na koherentan način.

LADM je organiziran u tri tzv. paketa (eng. package) i jedan pod-paket (eng.

subpackage), a svaki paket predstavlja jednu konceptualnu shemu i sastoji se od

klasa (Slika 11). Prvi paket je vezan za stranku (eng. Party Package), drugi za

administraciju (eng. Administration Package), a treći za prostornu jedinicu (eng.

Spatial Unit Package). Paket vezan za izmjeru i prikaz (eng. Surveying and

Representation Subpackage) je pod-paket prostorne jedinice.

Osnovne klase LADM su LA_Party (instance ove klase su stranke), LA_RRR

(instance podklasa ove klase su prava, ograničenja i odgovornosti), LA_BAUnit

(instance klase su osnove administrativne jedinice) i LA_SpatialUnit (instance klase

su prostorne jedinice) (Slika 10).

Slika 10. Osnovne klase LADM (ISO 2012)

25

Slika 11. Pregled LADM paketa i pod-paketa s njihovim pripadajućim klasama (ISO 2012)

26

4. WEB APLIKACIJE

Općenito o web aplikacijama

Prema Zekić-Sušac (2008) web aplikacija je definirana kao programsko rješenje

kojem se pristupa pomoću web preglednika (eng. web browser) putem Internet ili

intranet mreže. Internet je javno dostupna mreža, a intranet privatna, zaštićena

mreža dostupna unutar jedne institucije ili tvrtke. Obje mreže su utemeljene na

TCP/IP protokolu (eng. Transmission Control Protocol/Internet Protocol).

Osim web aplikacije tu su i tzv. klijent-poslužitelj aplikacije. Za razliku od web

aplikacija koje korisnici ne moraju instalirati na računalo, klijent-server aplikacije se

jednim dijelom izvode na korisničkom računalu, a drugim na web poslužitelju (eng.

web server). Klijent tada, umjesto web preglednika, šalje zahtjeve na poslužitelj

pomoću sučelja koje se instalira na računalo.

Rad s web aplikacijama donosi veliki broj prednosti (URL 4). One za početak ne

zahtijevaju složenu proceduru implementacije, a zahtijevaju malo ili ništa diskovnog

prostora kod klijenta unutar web preglednika. Zatim, jednostavno se integriraju sa

ostalim procedurama poslužiteljske strane, ne zahtijevaju nikakve procedure

nadogradnje te rade bez obzira na operacijski sustav koji je instaliran na

korisnikovom računalu. Aplikacije također karakteriziraju jednostavnost korištenja,

lako održavanje, velika brzina rada i sigurnost podataka.

Nadalje, promjene se mogu raditi on-line, a za pristup je potreban samo web

preglednik i dostupne su korisnicima neovisno o tome gdje se nalaze. Na

informacijskom sustavu istovremeno može raditi veliki broj korisnika bez utjecaja na

njegove performanse spajanjem prijenosnih i osobnih računala, mobilnih uređaja itd.

Moguće je napraviti vizualno efektne aplikacije koje su besplatne ili im je cijena niska.

Uz sve prednosti tu su i nedostaci web aplikacija. Prije svega usuglašenost web

standarda je nedovoljna, a brzina rada ovisi o mreži ili serveru. Tu su i problemi sa

sigurnošću mreže, a tvrtka koja održava web aplikaciju u potpunosti kontrolira

aplikaciju i podatke.

27

Arhitektura i princip rada

Web aplikacije prema Zekić-Sušac (2008) imaju tzv. troslojnu arhitekturu (eng. three-

tiered architecture). Arhitektura web aplikacije se dakle dijeli na tri glavna sloja, a to

su prezentacijski, aplikacijski i podatkovni sloj (Slika 12). Prezentacijski sloj (eng.

Presentation tier) se odnosi na prikaz web aplikacije korisniku koje se odvija pomoću

web preglednika (npr. Google Chrome, Mozilla Firefox itd.).

Aktivnostima koje web aplikacija treba izvršavati upravlja aplikacijski sloj (eng.

Application tier). Taj sloj koristi dinamičke web tehnologije kao što su ASP, ASP.NET,

PHP, JavaScript, CGI, ColdFusion, JSP/Java, Perl, Python i dr. Podatkovni sloj (eng.

Data tier) se odnosi na dio vezan za sustav upravljanja bazom podataka. Tu spadaju

SQL server, MySQL, DB2, PostgreSQL itd.

Slika 12. Arhitektura web aplikacije

Svi zahtjevi poslani kroz sučelje web aplikacije se obrađuju na web poslužitelju

putem HTTP-a, osnovnog protokola za distribuciju informacija na web-u. Termin web

poslužitelj se može odnositi na cijeli računalni sustav ili posebno na program. Web

poslužitelji koji imaju najveću primjenu su Apache, IIS i nginx (URL 5).

Web aplikacije dinamički generiraju jedan ili više HTML ili XHTML dokumenata koji

se mogu vidjeti pomoću web preglednika. Korisnici dokumente pregledavaju

pojedinačno interaktivnom izmjenom istih iako se one prikazuju kao statičan

dokument. Dinamičke izmjene sadržaja dokumenata omogućuju skriptni jezici (npr.

JavaScript) koji se izvršavaju unutar web preglednika. Podaci se u web aplikaciju

mogu unositi pomoću za to namijenjenih web formi koje su dio dokumenata (Zekić-

Sušac 2008).

Korisnik

Prezentacijski sloj

Aplikacijski sloj

Podatkovni sloj

HTTP poslužitelj

28

Web dokumenti su poznati još pod terminom web stranica. U radu će se koristiti oba,

ali u drugačijem smislu. Pod pojmom web dokumenta će se podrazumijevati kod

HTML dokumenta spremljen u datoteci, a web stranica bi zatim bila prezentacija web

dokumenta u web pregledniku (slikoviti prikaz koda).

Prilikom određenih interakcija sa sučeljem web aplikacije (npr. unos podataka) odvija

se po jedna sesija (eng. session). Prilikom svake sesije dokumenti se nanovo

učitavaju s web poslužitelja čime se usporava rad web aplikacije. Taj problem je

riješen AJAX tehnologijom (Asynchronous JavaScript and XML) koja omogućuje

promjenu samo onog dijela koji je izmijenjen od strane korisnika (Zekić-Sušac 2008).

Postojeći sustavi

Postoje različiti GIS sustavi za održavanje karata na web-u. Uz sve svoje prednosti

koje posjeduju, dolazi se do problema kada su u pitanju mogućnosti održavanja

geodetskog plana takvim aplikacijama. GIS je dakle namijenjen prvenstveno

kartama, koje su već spomenute, pa je cjelokupan rad prilagođen upravo njihovim

potrebama.

Neki od takvih sustava su ArcGIS Online i GIS Cloud. Oba sustava su izrađena kao

tzv. programska rješenja u oblacima (eng. cloud computing). Prema Nacionalnom

CERT-u i LS&S-u (2010) takvo programsko rješenje se najbolje opisuje kao koncept

podjele programskog okruženja na platformi Interneta koja omogućuje pohranjivanje

aplikacija i dokumenata poslanih iz bilo kojeg dijela svijeta na za to predviđenim

poslužiteljima.

ArcGIS Online je kolaborativni web GIS koji omogućuje uporabu, izradu i dijeljenje

karata, prizora, aplikacija, slojeva, analiza i podataka (URL 6). GIS Cloud je prvi GIS

potpuno utemeljen na web tehnologiji i izrađen kao programsko rješenje u oblaku koji

nudi jednostavnu i učinkovitu vizualizaciju, analizu i istraživanje geoinformacija. Neki

od glavnih ciljeva GIS Cloud-a su pružiti jednostavan način za njihovu analizu i

pojednostaviti razmjenu geoinformacija među korisnicima, bez obzira gdje se oni

nalazili (URL 7).

Sustavi se mogu koristiti besplatno, ali u određenim granicama. Besplatne pretplate,

u odnosu na komercijalne, uglavnom nude manje prostora za pohranu, a osim toga,

29

neki servisi i alati nisu dostupni. Sustavi ipak nude besplatan probni rok (eng. free

trial), pri čemu su dostupne sve mogućnosti koje nudi njihova potpuna verzija.

ArcGIS Online se tako može u punoj verziji besplatno testirati 60, a GIS Cloud 30

dana.

Tablica 4. Usporedba pretplata na GIS Cloud Map Editor (URL 8)

Free Premium

Price Free $55 user/month

Private maps No Yes

Vector features limit 10 200.000

Storage limit (raster and media files) 100 MB 1 GB

Na GIS Cloud aplikacije se može pretplatiti i posebno po aplikaciji, ovisno o

potrebama korisnika, a njihove cijene su eksplicitno dane na web stranicama GIS

Cloud-a (URL 9). Tablica 4 prikazuje usporedbu besplatne i premium pretplate na

GIS Cloud Map Editor aplikaciju, odnosno prethodno spomenuta ograničenja u

odnosu na mogućnosti koje pruža komercijalna pretplata. O navedenoj aplikaciji će

biti govora kasnije. ArcGIS Online s druge strane nudi kredite u zamjenu za servise,

alate i prostor za pohranu (Tablica 5). Međutim, cijene kredita nisu navedene.

Tablica 5. ArcGIS Online krediti prema uslugama (URL 10)

Service

Storage

Feature Services Storage 2.4 credits per 10 MB stored based on hourly calculations of storage per month

Tile and Data Storage 1.2 credits per 1 GB stored per month

Analytics

Geocoding 40 credits per 1,000 geocodes

Simple Routes 0.04 credits per simple route

Optimized Routes 0.5 credits per optimized route

Closest Facilities 0.5 credits per closest facilities route

Multivehicle Routes (VRP) 1 credit per multivehicle route

Spatial Analysis 1 credit per 1,000 features

Location/Allocation 0.1 credit per demand point

Demographics & Lifestyle Maps

Business Search 10 credits per 1,000 records

Demographic Maps and Layers 10 credits per 1,000 map requests

Data Enrichment 10 credits per 1,000 data variables

Reports 10 credits per report

Other

Map Generation 1 credit per 1,000 tiles generated

30

Pri istraživanju mogućnosti ArcGIS Online i GIS Cloud sustava fokusiralo se na onaj

dio sustava predviđen za izradu karata. Konkretno, istražene su mogućnosti vezane

za crtanje i uređivanje, u smislu točnosti i preciznosti, obzirom na zahtjeve

održavanja geodetskog plana, te korištenje točke hvatišta. Drugim riječima,

postavljeno je pitanje pružaju li možda navedeni sustavi mogućnost crtanja i

uređivanja unosom koordinata ili dimenzija i naprednije korištenje točke hvatišta.

Izrada karata unutar ArcGIS Online sustava se obavlja u sučelju Map Viewer (slika

13). Istraživanjem istog, prema postavljenim kriterijima, došlo se do sljedećih

zaključaka. GIS objekte je moguće crtati isključivo klikom miša na kartu. Geometriju

objekata je moguće mijenjati translacijom, rotacijom i skaliranjem istih te izmjenom

položaja točaka odnosno lomnih točaka (eng. vertices) objekata kao i njihovim

brisanjem. Navedene interakcije uređivanja se također obavljaju isključivo mišem.

Dostupne točke hvatišta su točka (točkasti objekt), odnosno lomna točka objekta

(eng. endpoint), najbliža točka objekta (eng. nearest) i sredina linijskog segmenta

(eng. midpoint).

Slika 13. ArcGIS Online Map Viewer

Izrada karata unutar GIS Cloud sustava se obavlja u sučelju Map Editor (Slika 14).

Osim što je GIS objekte moguće crtati klikom miša na kartu, pri crtanju linijskih ili

poligonskih objekata, omogućen je i unos duljine linijskog segmenta. Geometriju

objekata je moguće mijenjati kloniranjem (eng. clone) i spajanjem (eng. merge)

31

geometrije odgovarajućih objekata te izmjenom položaja točaka odnosno lomnih

točaka objekata. Točke hvatišta koje su dostupne su na točku odnosno lomnu točku

objekta te točke pravca okomitog na prethodno iscrtani linijski segment, odnosno

njemu paralelan, postavljen kroz njegovu drugu (zadnju) iscrtanu točku. Zadnja

interakcija se aktivira pritiskom na tipku CTRL, a općenito bi se mogla opisati kao

relativni ortogonalni način rada.

Slika 14. GIS Cloud Map Editor

Ni jedan od navedenih sustava u potpunosti ne zadovoljava postavljene kriterije,

stoga nisu pogodni za održavanje geodetskih planova, u smislu točnosti i preciznosti.

Tablica 6 daje pregled i usporedbu sustava po istraženim mogućnostima prema

postavljenim kriterijima. Pošto je riječ o GIS aplikacijama, definitivno mogu poslužiti u

analizi i vizualizaciji podataka geodetskog plana, što nije dolazilo u pitanje ni u

jednom trenutku (Slika 15).

Tablica 6. Pregled i usporedba mogućnosti sustava prema kriteriju

Kriterij ArcGIS Online GIS Cloud

crtanje klikom miša na kartu klikom miša na kartu unos duljine linije

uređivanje točke/lomne točke objekata translacija rotacija skaliranje

točke/lomne točke objekata kloniranje spajanje

točka hvatišta endpoint nearest midpoint

endpoint ortho mode

32

Slika 15. Analiza i prikaz površina katastarskih čestica u Map Viewer-u

33

5. WEB APLIKACIJA MAPP

Mapp je web aplikacija za održavanje geodetskog plana koja integrira određene

komponente geoinformacijskog i CAD sustava. Razvoj aplikacije je potaknulo ne

postojanje tako jedinstvenog sustava odnosno potreba korisnika za jednim,

integriranim sustavom čime bi njihovi nedostaci djelomično bili eliminirani.

Koncept izrade sustava

Kao što je prethodno definirano, aplikacija integrira određene komponente CAD-a i

GIS-a. Korištene komponente CAD-a su crtanje i uređivanje unosom koordinata i

dimenzija tipkovnicom te korištenje točke hvatišta, dok je GIS-om omogućen rad s

objektima, prikaz atributa i rad s prostornom bazom podataka (slika 16). Sustav je

izrađen pod pretpostavkom ne simultane uporabe više korisnika.

Slika 16. Ilustracija komponenti aplikacije mapp

Tehnologije korištene za razvoj

Za razvoj aplikacije su korištena besplatna programska rješenja otvorenog koda,

osim nekih pomoćnih alata. Ti alati su Google Chrome web preglednik koji je

besplatan, ali ne i otvorenog koda te komercijalni FME.

HTML

HTML 5 (eng. Hyper Text Markup Language) je standardizirani jezik za izradu web

stranica koji opisuje njihovu strukturu označavanjem (eng. markup). Web stranice su

sastavljene od elemenata (eng. elements) koji su predstavljeni oznakama (eng.

tags). Web preglednici čitaju HTML oznake i prikazuju web stranicu na čovjeku

bližem, slikovitijem obliku (eng. render). Web dokumenti se spremaju u datoteku s

*.html ekstenzijom (URL 11).

WEB

crtanje

uređivanje

korištenje točke hvatišta

CAD

rad s objektima

prikaz i unos atributa

baza podataka

GIS

34

Slika 17. HTML 5 dokument s osnovnim elementima

Glavni elementi HTML dokumenta (Slika 17) su zaglavlje (eng. head) i tijelo (eng.

body), definirani <head></head> odnosno <body></body> oznakama. Cijeli

dokument je definiran <html></html> oznakama, a <!DOCTYPE html> je

deklaracija za najnoviju verziju HTML standarda, HTML 5. Naslov dokumenta se

definira u zaglavlju unutar <title></title> oznaka, dok se <meta> oznakom

definiraju metapodaci dokumenta (URL 11).

CSS

Uz HTML je korišten CSS 3 (eng. Cascading Style Sheets). CSS opisuje način,

odnosno stil prikaza (eng. style) HTML elemenata na ekranu, papiru ili nekom

drugom mediju (URL 12). Stil elemenata se može zadati globalno, klasifikacijom i

jedinstvenim definiranjem stila (Slika 18).

Globalnim se definiraju stilovi za sve iste tipove elemenata, pri čemu se koriste

oznake pripadajućih HTML elemenata bez znakova manje i veće (npr. za <h1> ili

<p>, h1 odnosno p). Klasifikacija omogućuje definiranje jedne klase stila koja može

biti dodijeljena više elemenata. Jedan stil može biti pridružen jednom elementu preko

jedinstvenog identifikatora stila. Klasa se u CSS-u označava točkom (.word), a

jedinstveni identifikator ljestvama (#container).

Slika 18. Primjer CSS koda

35

Slika 19. Način pridruživanja klasa i jedinstvenih identifikatora HTML elementima

Pridruživanje klasa i jedinstvenih identifikatora pripadajućim HTML elementima se

obavlja unutar njihovih početnih oznaka, što je prikazano na slici 19. CSS kod može

biti napisan i spremljen u datoteku s ekstenzijom *.css (eng. External CSS) ili unutar

HTML dokumenta (eng. Internal CSS).

Ukoliko se CSS sprema u vanjsku datoteku, potrebno je istu učitati u zaglavlju HTML

dokumenta, definirajući njezinu poveznicu (eng. link) unutar <link/> oznake.

Poveznica na datoteku može biti zadana relativno u odnosu na HTML dokument,

ukoliko se CSS datoteka nalazi na istom poslužitelju kao i HTML dokument, te

apsolutno, ukoliko se nalazi na nekom drugom poslužitelju.

Slika 20. Učitavanje vanjskih CSS datoteka u HTML dokument

Primjer učitavanja vanjske CSS datoteke u HTML dokument je prikazan na slici 20.

Poveznica na bootstrap.css datoteku je relativna, a na ol.css apsolutna. Prednost

korištenja vanjske datoteke je u mogućnosti definiranja izgleda više web dokumenata

njome.

CSS se unutar HTML dokumenta može koristiti na dva načina (Slika 21). Prvi način

je ispisati CSS kod unutar za to predviđenih <style></style> oznaka u zaglavlju

dokumenta. Drugi način je definirati izgled svakog elementa posebno unutar njegove

početne oznake (URL 12).

36

Slika 21. CSS unutar HTML dokumenta (lijevo) i prezentacija istog (desno)

JavaScript

Najveću težinu i udio u razvoju aplikacije imao je JavaScript (ECMAScript), stoga će

se detaljnije i opisati. JavaScript je skriptni programski jezik koji se izvodi na

klijentskoj strani (eng. client-side scripting) i čini web stranice dinamičnima. Općenito,

nudi uobičajene mogućnosti programiranja kao što su definiranje različitih tipova

podataka, spremanje njihovih vrijednosti u varijable i operacije nad njima, definiranje i

pozivanje funkcija i dr. (URL 13).

Slika 22. Učitavanje vanjskih JavaScript datoteka u HTML dokument

JavaScript se uz HTML koristi po istom principu kao i CSS, spremanjem u vanjsku

datoteku s ekstenzijom *.js i učitavanjem iste (Slika 22) te unutar HTML dokumenta

(Slika 23). Poveznice na vanjsku JavaScript datoteku se također mogu zadavati

relativno i apsolutno. Za JavaScript kod su predviđene <script></script>

oznake. JavaScript se interpretira unutar web preglednika nakon što preglednik učita

web stranicu (HTML i CSS), stoga je preporuka postavljati kod neposredno prije

zatvarajuće </body> oznake.

37

Slika 23. JavaScript unutar HTML dokumenta

Učitavanjem HTML dokumenta u web preglednik prikazanog na slici 23, prikazat će

se sadržaj prikazan lijevo na slici 24. Klikom na gumbove (eng. buttons) Click Me!

odnosno Try it! (lijevo), izmijenit će se odnosno ispisati HTML element web stranice

(desno) pomoću definiranih JavaScript funkcija (URL 14).

Slika 24. Izmjena odnosno dodavanje HTML elemenata web stranice pomoću JavaScript-a

Osim izmjene i dodavanja HTML elemenata, tu je cijeli niz funkcionalnosti kao što su

promjena načina prikaza i izmjena atributa elemenata, testiranje valjanosti unosa u

obrasce (eng. form), opažanje događaja (eng. event listener) i rukovanje istim (eng.

event handler), animacije elemenata, AJAX tehnologija i puno više. Sve

funkcionalnosti se odvijaju u realnom vremenu i omogućuju izradu dinamičnih, visoko

interaktivnih web stranica (URL 13).

38

DOM

Prilikom učitavanja web dokumenta, preglednik izrađuje objektni model iste (eng.

Document Object Model – DOM) (Slika 25). DOM je W3C (eng. World Wide Web

Consortium) standard za pristup web dokumentima, tj. platforma i o programskom

jeziku neovisno sučelje koje omogućuje pristup programima i skriptama u svrhu

izmjene sadržaja, strukture i načina prikaza dokumenta. Standard definira tri različita

modela:

Core DOM (standardni model za sve tipove dokumenata),

XML DOM (standardni model za XML dokumente) i

HTML DOM (standardni model za HTML dokumente).

HTML DOM je objektni model i sučelje za programiranje aplikacija (eng. Application

programming interface) za HTML, koje definira: HTML elemente kao objekte (eng.

objects), njihova svojstva (eng. properties), metode za pristup elementima (eng.

methods) i njihove događaje (eng. events). Drugim riječima, HTML DOM je standard

koji definira dohvaćanje, izmjenu, dodavanje ili brisanje HTML elemenata (URL 15).

Slika 25. HTML DOM je konstruiran kao stablo objekata (URL 15)

Događaji

Svaki događaj unutar HTML-a je zabilježen i emitiran unutar DOM-a, a JavaScript

može reagirati na njih. HTML događaji mogu biti nešto što čini web preglednik (npr.

završeno učitavanje web stranice) ili korisnik (npr. pritisnut je gumb). Njihova svrha je

izvršavanje određene jedne ili više radnji (JavaScript funkcije) po određenom

događaju. Emitiranje HTML događaja se može spriječiti, kao i izvršavanje njihovih

39

zadanih funkcija, a osim toga, moguće je i izraditi vlastiti događaj koji će se emitirati

unutar DOM-a (URL 16). Tablica 7 prikazuje neke od uobičajenih HTML događaja.

Tablica 7. Uobičajeni HTML događaji (URL 16)

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

Objekti

U JavaScript-u je gotovo sve definirano objektima, stoga se može reći ukoliko se

razumiju JavaScript objekti razumije se i sami jezik programiranja. Vrijednost koja ne

sadrži svojstva i metode se naziva primitivnom vrijednošću. Primitivni tipovi podataka

su stoga podaci koji sadrže primitivne vrijednosti, a to su string, number, boolean,

null i undefined (URL 17) (Tablica 8).

Tablica 8. Primjeri vrijednosti primitivnih tipova podataka

Value Type

"Lorem ipsum" string

1.618 number

true boolean

false boolean

null null (object)

undefined undefined

Svaka vrijednost unutar JavaScript-a, bilo da je riječ o primitivnoj vrijednosti ili

objektu, može se spremiti u varijablu. Sljedeći primjer prikazuje sintaksu spremanja

vrijednosti u varijablu. U ovom slučaju je riječ o koordinati točke definirane pomoću

liste (eng. array). Svi primjeri koji će biti korišteni, radi lakšeg raspoznavanja i čitanja,

općenito su prikazani kao simulacija ispisanog koda u Notepad++ programu, a

rezultat izvršavanja u JavaScript konzoli unutar Chrome DevTools alata, o kojima će

kasnije biti govora.

var position = [507693.13,4782969.17];

Varijable dakle sadržavaju jednu vrijednost, dok objekti mogu sadržavati više. Objekti

se također mogu spremiti u varijablu, stoga se za njih kaže da su varijable koje

sadrže varijable, a mogu se definirati na sljedeća tri načina (URL 17):

40

1. doslovno definiranje objekta (eng. object literal),

2. definiranje objekta koristeći ključnu riječ new uz ugrađene konstruktore,

3. definiranje konstruktora objekta (eng. object constructor) i izrada objekata

temeljem istog koristeći ključnu riječ new.

Pod doslovnim definiranjem se podrazumijeva ispisivanje cijelog objekta. Vrijednosti

unutar objekta se zapisuju kao parovi „svojstvo: vrijednost“ (eng. property: value).

Par se dakle razdvaja dvotočkom, a parovi zarezima te se postavljaju unutar

vitičastih zagrada, što pokazuje sljedeći primjer.

var scales = {m1:'5 000', m2:'2 500', m3:'1 000', m4:'500',

m5:'250', m6:'100', m7:'50', range: function(){return

this.m7 + ' - ' + this.m1;}};

Vrijednost svojstva unutar objekta može biti i funkcija (npr. range u objektu scales iz

prethodnog primjera). Takve funkcije se nazivaju metodama, a definiraju se kao

radnje koje se mogu izvršavati nad objektima. Sintaksa pristupa metodi range

objekta scales iz prethodnog primjera dana je u sljedećem primjeru. Metoda vraća

(eng. return) minimalnu i maksimalnu vrijednost mjerila.

scales.range();

→ "50 - 5 000"

Ključna, tj. rezervirana riječ new služi za definiranje novih objekata. Sljedeći primjer

pokazuje sintaksu definiranja novog, praznog objekta kojem se naknadno dodjeljuju

svojstva i pripadajuće vrijednosti. Objekt se definira pomoću ugrađenog konstruktora

Object().

var foobar = new Object();

foobar.property1 = 'value1';

foobar.property2 = 'value2';

→ Object {property1: "value1", property2: "value2"}

Prethodno pokazani načini definiranja objekata određuju samo jedan objekt jednog

tipa. Ukoliko se želi definirati više objekata istog tipa potrebno je definirati

konstruktor, tj. funkciju koja vraća objekt zadanog tipa. Sljedeći primjer pokazuje

sintaksu definiranja objektnog konstruktora i izrade novog objekta koristeći isti.

function Movie(t, g, d, s, c, b) {

this.title = t; this.genre = g;

this.director = d; this.stars = s;

this.country = c; this.budget_USD = b;}

41

var the_godfather = new Movie('The Godfather', ['crime','drama'],

'Francis Ford Coppola', ['Marlon Brando', 'Al Pacino', 'James

Caan'], 'US', 6000000);

Prethodnim primjerom je tako izrađen novi objekt the_godfather tipa Movie. Pri

definiciji funkcija, metode range i konstruktora movie, korištena je ključna riječ this.

U metodama ona predstavlja objekt u kojem je metoda sadržana, a u konstruktorima

instance objekta. Uz pristup vrijednostima svojstava definiranih od strane korisnika,

ista se mogu mijenjati i brisati, čija sintaksa je prikazana sljedećim primjerima.

/* Svojstvima objekata se može pristupiti

* na različite načine

*/

the_godfather.genre;

→ (2) ["crime","drama"]

the_godfather['director'];

→ "Francis Ford Coppola"

var property = 'budget_USD';

the_godfather[property];

→ "6000000"

// Izmjena svojstava

the_godfather.country = 'United States';

// Dodavanje novih svojstava

the_godfather.release_date = new Date(1972, 3, 24);

// Brisanje svojstava

delete foobar.property2;

Uz prethodno spomenuti ugrađeni konstruktor, u tablici 9 su navedeni i ostali

ugrađeni konstruktori. Kao što se može primijetiti, JavaScript može zapisivati i

primitivne tipove podataka (string, number i boolean) kao objekte. Izradom tako

kompleksnih objekata se usporava rad, stoga se ne preporuča njihovo korištenje.

Tablica 9. Ugrađeni JavaScript konstruktori i pripadajući Object Literal

Constructor Object type Object Literal

String() string '' or ""

Number() number number

Boolean() boolean true or false

Object() object {}

Array() array []

RegExp() regular expression /()/

Function() function function(){}

Date() date undefined

42

Drugim riječima, primitivne vrijednosti se izvršavaju puno brže, pa se preporuča

korištenje doslovnog, direktnog zapisivanja istih. Navedeno vrijedi i za ostale

ugrađene konstruktore objekata, osim za Date() konstruktor jer ono nije definirano.

Ugrađeni konstruktori navedeni u prethodnoj tablici su globalni JavaScript objekti koji

imaju svoja ugrađena svojstva i metode. Primjer ugrađenog svojstva za objekt tipa

Array je length (duljina liste), a ugrađene metode objekta tipa String je

toUpperCase() (sve velikim slovima zadanog teksta).

the_godfather.stars.length;

→ 3

the_godfather.stars[0].toUpperCase();

→ "MARLON BRANDO"

Važno je i napomenuti svojstvo JavaScript objekata (u općenitom smislu), a to je

promjenjivost (eng. mutable). Spremanjem objekta u novu varijablu, JavaScript

varijabli prosljeđuje referencu na taj objekt, a ne vrijednost. Dakle ne izrađuje se

kopija objekta već se radi o jednom te istom objektu (URL 17). Sljedeći primjer

potkrepljuje navedeno testiranjem identičnosti objekata znakom ===.

var test = the_godfather;

the_godfather === test;

→ true

JavaScript nije klasično objektno-orijentiran programski jezik (kao npr. Java, C++,

Python) i ne poznaje rad s klasama. Nasljeđivanje u JavaScript-u se obavlja pomoću

prototipova (eng. prototype) (URL 18). Svaki JavaScript objekt ima prototip, koji je

također objekt, a definiran je internim svojstvom objekta __proto__. JavaScript

koristi upravo to svojstvo pri nasljeđivanju. Uz prethodno navedeno interno svojstvo,

svaki Function objekt ima prototype svojstvo koje sadrži referencu na to isto

svojstvo, odnosno prototip. Ta se referenca odnosno prototip automatski dodjeljuje

internom svojstvu instance objekta __proto__ prilikom izrade iste, bilo doslovnim

definiranjem ili uporabom ključne riječi new (URL 19). Na takav se način povezuju

objekti i tvore cijeli lanac prototipova na čijem vrhu se nalazi Object.prototype.

Navedeni prototip je temeljni svim objektima i njegovo interno svojstvo je uvijek

null. Nasljeđivanje se može prikazati dijagramom, a primjer prikazuje slika 26.

Svi objekti nasljeđuju svojstva i metode njihovih prototipova. Objekt the_godfather

nema metodu hasOwnProperty(property). Međutim, pozove li se ista nad tim

objektom, izvršit će se jer je taj objekt instanca Object objekta koji ima definiranu tu

43

metodu. Pozovu li se metode ili svojstva nad objektom nad kojim nisu niti definirani,

pretražuju se u lancu prototipova objekta, po jednu razinu unazad, dok se ne

pronađu, npr. foobar.__proto__.__proto__ itd. (URL 20). Ukoliko metoda nije

pronađena, rezultat je greška pošto takva metoda nije definirana ili undefined

ukoliko se radi o svojstvu.

Slika 26. Dijagram nasljeđivanja the_godfather objekta

Standardan način za izradu prototipa (instancu) objekta je koristeći konstruktor

objekta. Dodavanje novih svojstava ili metoda prototipovima objekata se ne izvodi na

isti način na koji se dodaju nova svojstva ili metode objektima. Dodavanje svojstava

ili metoda prototipovima objekata se izvodi pomoću prototype svojstva objekta

(URL 18).

the_godfather.__proto__ === Movie.prototype;

→ true

// Ekvivalent prethodnome

the_godfather instanceof Movie;

→ true

// Definiranje svojstva

Movie.prototype.infoSource = 'http://www.imdb.com/';

// Definiranje metode

Movie.prototype.getInfo = function() {

return this.title + ' is a ' +

this.release_date.getFullYear() + ' ' + this.genre[0] +

' film from the ' + this.country + ' directed by ' +

this.director + ' with $' + this.budget_USD + ' US

budget.';};

// Pozivanje metode

the_godfather.getInfo();

→ "The Godfather is a 1972 crime film from the United States

directed by Francis Ford Coppola with $6000000 US budget."

44

OpenLayers

OpenLayers je JavaScript knjižnica (eng. library) otvorenog koda koja služi kao

razvojni okvir (eng. framework) modernih, brzih i interaktivnih web karata odnosno

web aplikacija za izradu web karata. Izvorno je razvila tvrtka MetaCarta, djelomično

kao odgovor na Google Maps, a od verzije 2.0 je to zajednički projekt programera

diljem svijeta (Gratier i dr. 2015).

Za izradu aplikacije je korištena tada zadnja verzija 4.1.1. Pod knjižnicom se

podrazumijeva i sučelje za razvoj aplikacija (eng. Application Programming Interface

– API) te pružanje dokumentacije istog. U ovom slučaju, OpenLayers aplikacijsko

programsko sučelje se sastoji od imena i signatura konstruktora, funkcija, metoda i

svojstava instanci te imena konstanti (URL 21).

Slika 27. Komunikacija OpenLayers-a s različitim poslužiteljima (URL 22)

Uz podršku razvoja modernih, brzih i visoko interaktivnih web aplikacija za izradu

web karata, od početka do kraja i u svim aspektima, ističu se i sljedeće prednosti.

OpenLayers alat je moguće integrirati u aplikacije otvorenog ili zatvorenog koda jer je

45

izdan pod BSD 2-Clause licencom. Zatim, ne ovisi o dodacima trećih strana, a od

verzije 3.0 podržava moderne mobilne uređaje s ekranima osjetljivim na dodir. U

skladu je s OGC standardima što omogućuje uporabu WMS (eng. Web Map

Service), WFS (eng. Web Feature Service) i GeoRSS servisa te dodavanje

rasterskih i vektorskih podataka iz formata kao što su GeoJSON i GML (Gratier i dr.

2015) (Slika 27).

jQuery

jQuery je JavaScript knjižnica koja pojednostavljuje programiranje tim skriptnim

jezikom. Uobičajeno korišteni JavaScript postupci koje koriste nekoliko metoda,

ispisane čistim JavaScript jezikom, mogu biti i do nekoliko redaka koda dugačke.

jQuery ih obuhvaća jednim metodama koje se mogu pozvati unutar jednog retka

koda (URL 23). Pri izradi aplikacije korištena je verzija 3.2.0.

// Čisti JavaScript kod

document.getElementById("element-id").addEventListener("click",

foobarFunction);

// Ekvivalent prethodnome

$('#element-id').click(function(){

foobarFunction();

});

Ostali programi

Od pomoćnih alata korišteni su Notepad++ v7.4.1 i Google Chrome web preglednik

v58.0.3029.110 kao i njegov ugrađeni set alata Chrome DevTools. Programi koji

pružaju podršku aplikaciji na web poslužitelju Apache v2.4 su PHP7 i PostgreSQL

baza podataka v9.5.1 s PostGIS proširenjem v2.2.1. Podaci su uvezeni u bazu

podataka pomoću FME programskog rješenja.

Notepad++ je besplatan uređivač teksta i najpopularniji uređivač izvornog koda koji

podržava veliki broj programskih jezika. Neke od važnijih značajki programa su

prepoznavanje, označavanje sintakse i automatsko dovršavanje API zadanog

programskog jezika (konstruktori, metode, svojstva i sl.), automatsko prepoznavanje

ili manualno definiranje programskog ili korisnički definiranog jezika, označavanje

odgovarajućih zagrada koje tvore jednu cjelinu koda (otvarajuće i zatvarajuće

zagrade) i dr. (URL 24).

46

Slika 28. Pregled (inspekcija) HTML DOM objekata

Google Chrome, osim što je poslužio kao prezentacijski alat web aplikacije prilikom

razvoja iste, od velikog značaja je bio njegov ugrađeni set alata za razvojne

programere (Chrome Developer Tools, DevTools). Neki od važnijih su alat za pregled

(inspekciju), izmjenu, dodavanje i brisanje HTML DOM elemenata kao i izmjenu

njihovog stila prikaza u realnom vremenu (Slika 28), JavaScript konzola i alat za

otkrivanje pogrešaka (eng. debugging tools) (Slika 29) te alati za poboljšavanje

performansi mreže, JavaScript i CSS koda te optimizaciju istog. Google Chrome, za

razliku od ostalih korištenih programskih rješenja je besplatan, ali ne i otvorenog

koda (URL 25).

Slika 29. Pogreška izvršavanja JavaScript koda prikazana na konzoli

PHP je skriptni programski jezik koji se izvodi na poslužiteljskoj strani (eng. server-

side scripting) koji se, između ostalog, koristi za izradu dinamičkih i interaktivnih web

stranica (URL 26). U ovom slučaju je poslužio u posve drugačijoj namjeni, a radi se o

inspected <div>

HTML css

47

komunikaciji s PostgreSQL bazom podataka, tj. dohvaćanje, dodavanje, brisanje i

izmjena prostornih podataka.

Apache je besplatni i najrašireniji HTTP poslužitelj. Procjenjuje se da ga koristi 67%

web poslužitelja. Apache je brz, pouzdan i siguran poslužitelj koji omogućuje visoku

prilagodbu prema potrebama okruženja koristeći različita proširenja i module (URL

27).

PostgreSQL je objektno-relacijski sustav za upravljanje bazom podataka (ORDBMS).

Podržava veliki dio SQL standarda, nudi razne moderne značajke (kompleksni upiti,

strani ključevi, okidači, pogledi, transakcije) i može se na različite načine proširiti od

strane korisnika (tipovi podataka, funkcije, operatori, indeksi, proceduralni programski

jezici) (URL 28). PostGIS proširuje PostgreSQL bazu podataka za prostornu

komponentu tj. omogućuje rad s prostornim podacima unutar PostgreSQL baze

podataka.

FME (eng. Feature Manipulation Engine) je komercijalna platforma koja omogućuje

pojednostavljenu prijenos i transformaciju prostornih podataka između geometrijskih i

digitalnih formata. Namijenjena je prvenstveno za rad s geoinformacijskim sustavom,

CAD-om i programima koji rade s rasterskom grafikom. Transformacija između

različitih formata, modela podataka i spremišta prostornih podataka kakvu koristi

FME naziva se prostorni izvoz, transformacija i uvoz – ITU (eng. spatial extract,

transform and load – ETL) (URL 29).

Implementacija

Aplikacija se razvijala na lokalnom poslužitelju (localhost) u skladu s konceptom

navedenim u poglavlju 5.1. (uz dodatne mogućnosti) koristeći opisane tehnologije u

prethodnom poglavlju. Razvoj je tekao prema samoj arhitekturi, počevši od izrade

prezentacijskog i aplikacijskog sloja na klijentskoj do aplikacijskog na poslužiteljskoj

strani te na posljetku podatkovnog sloja aplikacije.

Izrađene su dvije dinamične i interaktivne web stranice, početna stranica (stranica

dobrodošlice) index.html i glavna stranica aplikacije mapp.html koja sadržava

korisničko sučelje. Sučelju se pristupa pritiskom na gumb START na početnoj

48

stranici. Pri dizajniranju korisničkog sučelja aplikacije, uz što veću interaktivnost i

dinamičnost, željeli su se postići jednostavnost, informativnost i prostranost.

Jednostavnost je podrazumijevala korištenje klasičnog, intuitivnog načina rada, na

koji su korisnici navikli, odnosno s kojim su upoznati, uz neopterećenost sučelja

velikim brojem ikona, alatnih traka, kartica i sl. Osim integracije navedenih

komponenti CAD sustava, sučelje je razvijeno po njegovom gotovo identičnom

načinu rada (uz unapređenje nekih alata), pri čemu se jednostavnost u tom dijelu

postigla. To bi primjerice bio izbor aktivnog sloja, završavanje crtanja pritiskom na

tipku ENTER, prekid crtanja pritiskom na tipku ESC, paljenje i gašenje aktivne točke

hvatišta, rad s naredbenim retkom, kopiranje, lijepljenje, rezanje i brisanje

korištenjem klasičnih tipkovničkih kratica i sl. U drugom dijelu jednostavnost je

postignuta izradom jednostavne alatne i statusne trake te kombinacijom pokretanja

alata mišem i tipkovnicom.

Informativnost je podrazumijevala prikaz trenutno aktivnih alata koji se koriste te

obavijesti o stanjima i postignuta je izradom statusne trake i iskačućeg oblačića za

obavijesti. Prostranost je podrazumijevala što veće radno područje i postignuta je

izradom istog. Visoku interaktivnost i dinamičnost sučelja je omogućio programski

jezik JavaScript uz veliku pomoć prvenstveno OpenLayers, a zatim jQuery knjižnice.

Slika 30. Primjer prilagodbe prikaza aplikacije na Nexus 5X pametnom uređaju

49

Aplikacija je izrađena za primarnu uporabu na stolnim ili prijenosnim računalima

(eng. desktop), a za pametne mobilne uređaje (eng. smart devices) je prilagođena

uglavnom kao preglednik (Slika 30). Današnji okviri za razvoj web aplikacija sve više

omogućavaju prikaz tj. prilagodbu web aplikacija pametnim uređajima (npr.

Bootstrap). Dakle, uz razvoj web aplikacija za stolna ili prijenosna računala iste je

moguće prilagoditi pametnim uređajima.

Slika 31. Konceptualni model aplikacije mapp

Arhitektura aplikacije odnosno model korištenih tehnologija u razvoju iste i

komunikacija među njima je prikazana na slici 31. Aplikacija komunicira s bazom

prostornih podataka pomoću PHP skripti koje se pokreću zahtjevima (GET ili POST)

pomoću AJAX tehnologije (Slika 32). Na isti način je omogućeno generiranje i

preuzimanje prostornih podataka u *.geojson formatu datoteke. Datoteka navedenog

formata se može učitati u aplikaciju jednostavnom interakcijom povuci i ispusti (eng.

drag and drop) unutar radnog područja. Prilikom pokretanja aplikacije, šalje se

zahtjev u bazu podataka za dohvaćanje prostornih podataka te se iste učitavaju u

50

radno područje na pripadajuće slojeve, a izmjene se spremaju pritiskom na za to

predviđenu ikonu.

Slika 32. AJAX GET zahtjev za izvršavanje PHP skripte

Radi pojednostavljenja implementacije, koncentracija je bila isključivo na podacima

katastarskog plana, kako je navedeno i u uvodu. Testni prostorni podaci korišteni pri

izradi su katastarske čestice i zgrade manjeg dijela digitalnog katastarskog plana

katastarske općine Stari Grad. Transformacija i podataka digitalnog katastarskog

plana iz *.dwg datoteke u prostornu bazu podataka je obavljena pomoću FME

programskog rješenja (Slika 33).

Slika 33. Tablice cp_parcel (iznad) i cp_building (ispod) u prostornoj bazi podataka

Pri izradi, također se vodilo računa o logičnosti korištenja pojedinih mogućnosti,

drugim riječima, postavila su se određena ograničenja. Konkretno, vodilo se računa o

dostupnosti pojedinih alata prilikom uporabe drugih (suprotnih) alata (npr. uređivanje

nije aktivno pri crtanju i obrnuto, točka hvatišta aktivna samo prilikom crtanja ili

uređivanja itd.). Po završenoj i stabilnoj verziji, aplikacija je postavljena na web

poslužitelj Zavoda za primijenjenu geodeziju Geodetskog Fakulteta Sveučilišta u

Zagrebu i dostupna je na web adresi URL 30.

51

Sučelje i mogućnosti

Sučelje aplikacije je prikazano na slici 34 i dijeli se na alatnu traku (eng. toolbar),

radno područje (eng. workspace) i statusnu traku (eng. status bar). Pogledom na

sučelje se odmah može primijetiti prostranost realizirana što većim radnim područjem

koje se maksimalno proteže između alatne i statusne trake.

Slika 34. Sučelje aplikacije mapp

Alatna traka se sastoji od trinaest ikona (Slika 35) i imaju sljedeću funkciju:

1. postavljanje aktivnog sloja,

2. vidljivost slojeva,

3. odabir alata za crtanje,

4. alati za uređivanje II,

5. odabir aktivne točke hvatišta,

6. preuzimanje podataka,

7. prikaz atributne tablice,

8. prikaz informacija objekta,

9. prikaži cjelokupan sadržaj,

10. približi na odabrano područje,

11. približi na odabrani objekt,

12. odabir boje pozadine te

13. pomoć, o programu i API

dokumentacija.

Slika 35. Ikone alatne trake

Toolbar

Workspace

Status bar

1 2 3 4 5 6 7 8 9 10 11 12 13

52

Statusna traka (Slika 36) pruža informacije o:

1. aktivnom sloju,

2. aktivnom alatu za crtanje,

3. aktivnoj točci hvatišta,

4. koordinatama pokazivača odnosno rubnim koordinatama prikaza i

5. interaktivnom mjerilu prikaza, uz mogućnost odabira istog.

Slika 36. Statusna traka

Osim prostranosti, radno područje čini karakterističim i AutoCAD-ov pokazivač (eng.

pointer). Osim toga, tu su i ikone za zoom in i zoom out (lijevo), spremanje promjena

u bazu podataka (dolje desno) te ikona minimiziranog prozora atributne tablice (dolje

lijevo) (Slika 37).

Slika 37. AutoCAD pokazivači uz ikone na radnom području

Dostupna su tri fiksna vektorska sloja za uređivanje (Tablica 10), dakle ne postoji

mogućnost dodavanja novog sloja. Pošto su od podataka digitalnog katastarskog

plana korištene katastarske čestice i zgrade, izrađena su dva sloja za potrebe istih, u

skladu sa DGU specifikacijom za vektorizaciju katastarskih planova koji se izrađuju

CAD/GIS software-ima.

Specifikacijom su predviđeni i slojevi za brojeve katastarskih čestica odnosno

zgrada. GIS omogućuje izradu oznaka (eng. labels) koje prikazuju određeni atribut

objekta. Brojevi čestica i zgrada su atributi, stoga nije bilo potrebe izrađivati posebne

slojeve za njih. Treći sloj je pomoćni i tipa je GeometryCollection, a namijenjen je za

crtanje objekata svih geometrijskih tipova, za razliku od prethodna dva koji su strogo

poligonski. Osim vektorskih, tu su i rasterski slojevi, podloge s WMS servisa Državne

geodetske uprave Basemap i DOF 2011. Slojevi se mogu uključivati i isključivati

pojedinačno ili kolektivno.

1 2 3 4 5

53

Tablica 10. Dostupni slojevi

struktura puni naziv kratki naziv tip geometrije/rastera

vektor 1_kc_medja kcmedja Polygon

2_zg zg

13_pomocno pomocno GeometryCollection

raster Basemap dguBasemap WMTS

DOF 2011. dguDOF WMS

Atributna tablica (Slika 38) osim prikaza atributa objekata omogućuje i pretraživanje,

filtriranje i sortiranje atributa, pri čemu se prikazuje ukupan, odabran i filtriran broj

objekata. Odabirom elemenata unutar tablice, odabiru se i odgovarajući objekti. Za

prikaz atributa određenog sloja istog je potrebno postaviti aktivnim. Takvo

ograničenje je postavljeno radi izbjegavanja opterećenja web stranice prilikom

otvaranja (izrade) većeg broja atributnih tablica. Prozor atributne tablice je moguće

prilagoditi promjenom veličine, pomicanjem, maksimizacijom i minimizacijom.

Slika 38. Prozor atributne tablice

Alat za prikaz informacija objekata se pokreće na za to predviđenu ikonu, a prozor s

informacijama objekta se pojavljuje označavanjem željenog objekta. Informacije o

objektu koje se nude su općenite informacije, informacije o geometriji i atributima. U

ovisnosti o geometriji objekta, prikazuju se različite informacije vezane za geometriju

što se može primijetiti na slici 39. Pojedine grupe informacija su podijeljene u

elemente čiji prikaz se može uključiti ili isključiti.

54

Slika 39. Prozor informacija objekta

Interakcije obuhvaćaju pomicanje i različiti alati povećanja prikaza unutar radnog

područja, crtanje, uređivanje, odabir objekata, kopiranje, rezanje, kloniranje,

lijepljenje i brisanje objekata temeljem odabira istih, korištenje točke hvatišta, te

drag&drop interakciju. Prikaz unutar radnog područja se pomiče pritiskom na srednju

tipku miša tj. kotačić (eng. scroll wheel). Prikaz je moguće povećati kotrljanjem

kotačića miša, na temelju ekstenzija cjelokupnog geometrijskog sadržaja, odabirom

područja te odabirom jednog ili više objekata.

Crtanjem je moguće izraditi prostorne objekte geometrijskih tipova točke, polilinije,

poligona i kružnice. Specijalan alat koji je također dostupan je crtanje pravilnog

poligona, odnosno pravokutnika. Iako kružnica ne spada u jednostavne 2D prostorne

objekte, njena uporaba omogućuje projektiranje odmjeravanjem željene udaljenosti.

U ovisnosti o geometrijskom tipu sloja, postavljeno je ograničenje u dostupnosti

pojedinih alata za crtanje. Time se izbjegla mogućnost crtanja različitih geometrijskih

tipova na slojeve kojima prema deklaraciji ne pripadaju. Pri aktivnom alatu, crtanje se

započinje lijevim klikom miša na radno područje ili unosom koordinate, a završava

pritiskom na tipku ENTER. Za elemente koji se sastoje od linijskih segmenata,

moguće je poništavati iscrtane točke pritiskom na tipku BACKSPACE.

55

Prilikom crtanja kružnice i pravokutnika, osim unosa koordinata, moguć je i unos

dimenzija, kao i njihova kombinacija s unosom koordinate. Kružnica se tako može

iscrtati zadavanjem dvije točke ili jedne točke i radijusa, a pravokutnik unosom dvije

dijametralno suprotne točke (dolje lijevo i gore desno) ili zadavanjem referentne

točke (dolje lijevo) i dimenzija pravokutnika koja prati sintaksu AutoCAD-a (npr.

@250,300).

Potvrđivanjem unosa pritiskom na tipku ENTER, provjerava se ispravnost istog.

Nakon završetka crtanja, ukoliko se ne radi o pomoćnom sloju, prikazuje se tablica

koja omogućuje unos atributa iscrtanog objekta s funkcijom automatskog generiranja

jedinstvenog identifikatora. Primjeri prethodno navedenog su prikazani na slici 40.

Slika 40. Primjeri korištenja interakcije crtanja

Odabir objekata je moguć na različite načine (Slika 41). Pojedinačni objekt se

odabire lijevom tipkom miša. Više objekata je moguće odabrati pritiskom na tipku

CTRL ili iscrtavanjem pravokutnika povlačenjem miša s pritisnutom tipkom SHIFT. Iz

odabira se objekti mogu ukloniti pojedinačno klikom lijevom tipkom miša uz pritisnutu

tipku CTRL na odabrani objekti ili kolektivno pritiskom na tipku ESC.

Suprotno posljednje navedenom, svi objekti se mogu odabrati pritiskom uobičajene

kombinacije tipki CTRL+A, a osim toga, kopirati CTRL+C, rezati CTRL+X, lijepiti

CTRL+V i klonirati CTRL+Y. Kloniranje je kopiranje i automatsko lijepljenje objekta.

Odredišni sloj na koji se kopirani ili izrezani objekti žele zalijepiti ili klonirati je aktivan

sloj. Kloniraju se i lijepe samo oni objekti čiji se tip geometrije podudara s

geometrijskim tipom sloja (na pomoćni sloj su dozvoljeni svi tipovi). Odabrani objekti

se brišu pritiskom na tipku DELETE.

56

Slika 41. Pojedinačan odabir objekata (lijevo) i odabir iscrtavanjem pravokutnika (desno)

Geometrija objekata se može mijenjati translacijom, rotacijom i skaliranjem ili

izmjenom položaja točaka, dodavanjem, brisanjem ili izmjenom položaja lomnih

točaka polilinija ili poligona (Slika 42) te promjenom radijusa kružnice. Uređivati je

moguće samo odabrane objekte. Razlikuju se dva načina dodavanja novih lomnih

točaka.

Prvi se može opisati kao statični, dvostrukim klikom lijevom tipkom miša na linijski

segment. Drugi način bi bio dinamični, klikom lijevom tipkom miša na linijski segment

i povlačenjem koji se tada lomi. Zatim, pomičući pokazivač, dinamično se mijenja

položaj te točke jednog ili više linijskih segmenata, u ovisnosti o broju odabranih

objekata.

Izmjena se završava ponovnim klikom lijevom tipkom miša na željeno mjesto ili

unosom koordinata. Na isti način je moguće mijenjati položaj točke ili centra kružnice,

kao i promijeniti njen radijus. Lomna točka se briše dvostrukim klikom na istu uz

pritisnutu CTRL tipku. Tipkom ESC se prekidaju i poništavaju svi navedeni načini

izmjene geometrije.

57

Slika 42. Izmjena geometrije a) izmjenom položaja lomne točke,

b) translacijom, c) rotacijom i d) skaliranjem poligona.

Translacija, rotacija i skaliranje objekata se mogu vršiti mišem, unosom parametara

tipkovnicom ili kombinirano. Translacija funkcionira vrlo jednostavno. Jedan ili više

objekata se translatira odabirom ili unosom referentne i odredišne točke. Za razliku

od translacije, rotacija i skaliranje su nešto složeniji procesi. Uz odabir ili unos

referentne i odredišne točke, zahtijevaju dodatnu, orijentacijsku točku.

Objekt se može rotirati zadavanjem kuta rotacije u apsolutnim ili relativnom iznosu

(Slika 43). Apsolutni kut je kut između paralele pozitivnog smjera osi X projekcijskog

koordinatnog sustava i odredišne linije (dužina između referentne i odredišne točke).

Relativni kut je kut između referentne (dužina između referentne i orijentacijske

točke) i odredišne linije. Kutovi se unose u stupnjevima minutama i sekundama u

formatu D.MMSS (D – stupnjevi, M – minute, S – sekunde, odvojeni točkom).

Relativni kut rotacije se pri unosu označava znakom @.

a) b)

d) c)

58

Slika 43. Načini rotacije objekta unosom kuta rotacije

Definiranjem referentne i orijentacijske točke pri skaliranju objekta, unosom ili

odabirom istih, definira se jedinična dužina koja se koristi kao referentna u procesu

skaliranja. Zahvaljujući tome sami proces skaliranja je intuitivniji, za razliku od

AutoCAD-a kod kojeg referentna dužina predstavlja faktor skaliranja. Nakon

definirane jedinične dužine, objekt se može skalirati unosom faktora skaliranja te

odabirom ili unosom odredišne točke.

Tablica 11. Točke hvatišta i pripadajuće ikone

Snap type Status bar icon Snapped icon

endpoint

midpoint

node

center

intersection

perpendicular

parallel

nearest

Točke hvatišta (Tablica 11) koje je moguće koristiti prilikom crtanja i uređivanja su

kraj i sredina linijskog segmenta, čvor (eng. node) (objekti geometrijskog tipa točke),

centar kružnice (eng. center), okomito (eng. perpendicular) i paralelno (eng. parallel)

na linijski segment, presjek linijskih segmenata (eng. intersection) i najbliža točka

objekta (eng. nearest) (Slika 44).

||+X

OR

α φ

RE

OD

||+X – paralela s osi X projekcijskog koordinatnog sustava

φ – apsolutni kut rotacije α – relativni kut rotacije

RE – referentna točka OR – orijentacijska točka OD – odredišna točka

59

Slika 44. Primjeri uporabe točaka hvatišta

Okomice i paralele je moguće koristiti na dva načina rada, normalni i strogi.

Normalnim načinom rada, okomice se rade do linijskog segmenta, a paralele samo u

dužini linijskog segmenta. Neprekidan produžetak i povlačenje okomica i paralela, u

odnosu na određeni linijski segment, omogućen je tzv. strogim načinom rada (eng.

force mode). Strogi način se pokreće pritiskom na tipku CTRL pri normalnom načinu

rada. Konkretnije rečeno, okomica i paralela na linijski segment se moraju načiniti da

bi se moglo pristupiti strogom načinu rada.

Pri crtanju i uređivanju poligonskog objekta, radi se s dva linijska segmenta, dakle s

dvije referentne, fiksne točke. Okomica i paralela se mogu povući kroz obje točke, a

mijenjaju se pritiskom na tipku SHIFT. Slika 45 prikazuje primjer primjene takvog

načina rada pri uređivanju nepravilnog poligonskog objekta u pravilni koristeći

okomice. Pritiskom na tipku SHIFT u drugom koraku, izmijenjena je referentna točka

kroz koju se povlači okomica, sa donje lijeve na gornju desnu. Na istom principu rade

i paralele.

Slika 45. Uređivanje nepravilnog poligonskog objekta koristeći okomice

Na posljetku, tu je drag&drop interakcija koja omogućuje učitavanje prostornih

objekata iz vanjske datoteke *.geojson formata, a pritiskom na za to predviđenu

60

ikonu i odabirom sloja, podaci se preuzimaju u istoimenom formatu datoteke.

GeoJSON format datoteke ne podržava kompleksne geometrijske objekte kao što su

kružnice, s kojima je moguć rad u aplikaciji. Stoga se svaka kružnica pri spremanju

razdjeljuje na njene geometrijske komponente, a to su centar i radijus. Konkretnije,

definirana je funkcija koja iz kružnica izrađuje objekt geometrijskog tipa točke s

koordinatama centra kružnice, kojem se dodjeljuje radijus kružnice kao svojstvo.

Sljedeći primjer prikazuje prostorne podatke u GeoJSON formatu datoteke, među

kojima je istaknut objekt koji predstavlja kružnicu.

{"type":"FeatureCollection","features":[{"type":"Feature","geometry"

:{"type":"LineString","coordinates":[[507627.405,4782828.875],[50766

4.505,4782822.715],[507695.305,4782817.395]]},"properties":{"id":0}}

,{"type":"Feature","geometry":{"type":"Point","coordinates":[507347.

405,4782838.815]},"properties":{"id":1}},{"type":"Feature","geometry

":{"type":"Point","coordinates":[508025.705,4782752.995]},"propertie

s":{"radius":28.143,"id":2}}]}

Osim spremanja, definirana je funkcija koja čini obrnuto od navedenog pri učitavanju

takve datoteke. Konkretnije, provjerava tip geometrije pojedinog objekta te ukoliko je

on jednak točci provjerava postojanje svojstva radijusa. Ako takvo svojstvo postoji, iz

njega i objekta točke koja predstavlja centar, izrađuje se kružnica.

Prilikom učitavanja aplikacije u web preglednik, šalje se upit u bazu podataka,

dohvaćaju prostorni objekti i učitavaju na pripadajuće slojeve. Izmjenom sadržaja,

bilo dodavanjem, brisanjem ili uređivanjem prostornih objekata, pojavljuje se ikona

koja omogućuje njihovo spremanje u bazu podataka pritiskom na istu. Direktno

spremanje kružnice kao objekta u bazu podataka također nije podržano, stoga se

ono provodi analogno njihovom prethodno opisanom načinu spremanja u GeoJSON

format datoteke.

Za obavještavanje korisnika o radnjama koje se događaju u pozadini i nisu vidljive, o

njihovom stanju izvršavanja tu je iskačući oblačić (Slika 46). U ovisnosti o stanju,

može se pojaviti u tri oblika, a to su uspjeh, napomena i upozorenje.

Slika 46. Primjeri obavijesti

61

Osim do sada spomenutih mogućnosti unosa koordinata i dimenzija prilikom crtanja i

uređivanja, u sličnom obliku, ali u drugoj namijeni, dolazi naredbeni redak. Tako se

mogu pozvati različite funkcije i alati upisom naredbe i potvrđivanjem tipkom ENTER.

Ukoliko je naredba krivo upisana ili ne postoji, korisnik o tome biva obaviješten (Slika

47).

Slika 47. Obavijest o nepostojećoj naredbi (lijevo) i automatsko dovršavanje (desno)

Naredbeni redak nije dostupan prilikom aktivnih alata crtanja i uređivanja jer tada

preuzima oblik i namjenu retka za unos koordinata i dimenzija. Pri upisu naredbi u

naredbeni redak aktivira se alat za automatsko dovršavanje teksta, što omogućuje

odabir naredbi s padajuće liste filtriranih i brži pristup istima (Slika 47). Popis naredbi

i njihove funkcije su dani u tablici 12.

Tablica 12. Popis naredbi i njihovih funkcija

command Tool

point / p Draw a Point

Line / l Draw a LineString

Polygon / pg Draw a Polygon

circle / c Draw a Circle

rectangle / r Draw a Rectangle

move / m Move features

rotate / ro Rotate features

scale / s Scale features

kcmedja Set active layer „1_kc_medja“

zg Set active layer „2_zg“

pomocno Set active layer „13_pomocno“

atb Open/close an attribute table

info Start/end the select feature info

zoomall Zoom to extent

zoomsel Zoom to selected features

zoombox Zoom by rectangle selection

62

OpenLayers XT

OpenLayers XT je proširena (eXTend), poboljšana i izmijenjena verzija OpenLayers

v4.1.1. knjižnice, nastala prilikom razvoja aplikacije. Izmjene knjižnice i njihova

implementacija su bile neophodne za razvoj aplikacije prema konceptu i postizanju

krajnjeg cilja te nose najveću težinu cijelog projekta. OpenLayers se pokazao kao

izuzetno moćan, zreo i pouzdan alat za kartiranje i izradu web karata. Proširenjem

knjižnice to se uspješno svelo i na geodetske planove, kada je riječ o točnosti i

preciznosti.

Promjene su provedene u skladu s konceptom i prema potrebama aplikacije te

određenim zahtjevima koji su se pojavili prilikom njihovog provođenja. Općenito,

najveće promjene vezane su za interakcije točke hvatišta, uređivanja i crtanja

objekata. Zatim su izmijenjene interakcije odabira i translacije objekata, a dodane su

nove koje omogućuju njihovu rotaciju i skaliranje.

Osim toga, proširen je i manji broj ostalih, postojećih klasa. Promjene

podrazumijevaju definiranje novih, kako privatnih tako i javno dostupnih (API)

metoda, svojstava i događaja klasa. Izvorni kod pojedinih klasa koje su se mijenjale

preuzet je sa službenog OpenLayers GitHub repozitorija (URL 31).

Slika 48. Filtriranje segmenata

Najviše zahtjeva je postavila interakcija točke hvatišta, a dva kompleksnija će biti

opisana. Naime, interakcija uređivanja je koristila mouse drag event koji je izmijenjen

u mouse move event, čime korisnik nije primoran držati lijevu tipku miša pritisnutom

prilikom uređivanja. Osim toga, točku hvatišta s originalnom interakcijom nije bilo

moguće koristiti na objektima koji se crtaju. Navedene promjene su zahtijevale

63

dodatnu nadogradnju algoritma točke hvatišta. Algoritam radi na principu traženja

najbližih segmenata unutar kvadrata čiji je geometrijski centar definiran položajem

ishodišne točke pokazivača, a duljina stranice tolerancijom (veličina u pikselima koju

zadaje korisnik).

Obzirom da se pokazivač prilikom uređivanja ili crtanja segmenata nalazi na jednoj

njegovoj točki, algoritam je neprestano daje kao rješenje, što nije točno. Takve

segmente je bilo neophodno filtrirati iz rješenja najbližih segmenata (Slika 48). Osim

toga, segmente koji se translatiraju, rotiraju ili skaliraju je također potrebno filtrirati. U

tu svrhu, konstruktor interakcije točke hvatišta je proširen novim svojstvima, pri čijoj

se definiciji (Slika 49) kao ulazni parametri (vrijednosti svojstava) prosljeđuju

interakcije čije je segmente neophodno filtrirati.

Slika 49. Definiranje interakcije točke hvatišta

Nadalje, nadogradnjom na ostale točke hvatišta i testiranjem, algoritam nije davao

zadovoljavajuće rješenje ukoliko se određeni objekti preklapaju (npr. točka na liniji ili

rubu poligona). Problem je elegantno riješen uvođenjem z indeksa (zIndex) kao

jednim od svojstava segmentnih objekata (Slika 50), koje je algoritam pri traženju,

osim po udaljenosti, sortirao i po z indeksu. Drugim riječima, definirala se hijerarhija

tipova segmentnih objekata odnosno prednost pojedinih pri njihovih sortiranju po

navedenom kriteriju. Tako je segmentima geometrije točaka dodijeljen zIndex u

vrijednosti 2, centru kružnice 1, a ostalim tipovima geometrije 0.

Slika 50. Uvođenje z indeksa

64

Izgradnja i prevođenje knjižnice

Nakon izrade aplikacije i proširenja izvornog koda OpenLayers knjižnice, preostalo je

izgraditi i prevesti knjižnicu tj. prijeći s razvojne verzije (eng. development) na

produkcijsku (eng. production) pomoću za to predviđenih alata. Navedeni postupak

se provodi prvenstveno radi povećavanja brzine preuzimanja i učitavanja skripti u

web preglednik te povećavanja performansi smanjenjem veličine (kapaciteta

memorije) knjižnice (Gratier i dr. 2015). Izgradnja i prevođenje knjižnice kao i izrada

API dokumentacije su obavljeni prema Farkasu (2016).

Izvorni kod knjižnice se obično ispisuje u više datoteka koje tvore jednu logičku

cjelinu (npr. klasu). Osim programskih instrukcija, kod sadržava i tekstualne znakova

koji povećavaju čitljivost (razmaci, novi redci, komentari i dr.), ali ne utječu na

njegovo izvršavanje (URL 32). Stoga postoje metode optimizacije koda prilikom

izgradnje knjižnice kao što su minifikacija (eng. minification) i obfuskacija (eng.

obfuscation).

OpenLayers knjižnica je izgrađena na Google Closure Tools razvojnom okviru. Ovisi

dakle o knjižnici Closure Library i koristi prevoditelj Closure Compiler (Gratier i dr.

2015). Closure Tools je AJAX razvojni okvir otvorenog koda kojeg je razvio Google.

Sastoji se od alata koji omogućavaju izgradnju bogatih JavaScript aplikacija uz

visoke performanse i kompatibilnost sa svim web preglednicima (URL 33). Razvojni

programeri OpenLayers knjižnice su ponajviše iz tih razloga odabrali navedeni

razvojni okvir za izgradnju iste (Gratier i dr. 2015).

Closure Compiler je alat koji osim optimizacije omogućuje i cjelokupnu analizu koda

(sintaksa, detekcija ne deklariranih ili deklariranih varijabli više puta, njihove

reference, tipove podataka i dr.). Alat nudi tri metode prevođenja koda. Prva i

najosnovnija je WHITESPACE_ONLY koja uklanjanja nepotrebni sadržaj koda

(razmaci i komentari). Druga je SIMPLE_OPTIMIZATIONS koja kombinira prethodan

način s optimizacijom lokalnih varijabli i parametara funkcija dodjeljivanjem kraćih

imena. Treća metoda ADVANCED_OPTIMIZATIONS je puno agresivniji način

prethodne optimizacije koja koristi transformaciju naziva globalnih varijabli, funkcija i

svojstva čime se postiže najveća razina kompresije. Osim toga, ukoliko aplikacija

koristi manji dio knjižnice, samo taj dio može biti izdvojen, optimiziran i komprimiran

(URL 34).

65

Closure Tools alati su napisani Python i Java programskim jezicima, stoga ovise o

njihovim interpreterima. Pošto se radi o JavaScript knjižnici, potreban je i JavaScript

interpreter, a jedan od njih je Node.js. Node.js je okruženje koje omogućuje

izvršavanje JavaScript programskog jezika (eng. Runtime Environment – RTE)

utemeljeno na Google Chrome V8 pogonu (eng. engine) (URL 35). Nakon instalacije

na Windows operacijskom sustavu, JavaScript aplikacije se mogu pokretati unutar

Node.js naredbenog retka (koji se instalira uz konzolu), pomoću „node“ naredbe. Uz

navedenu, tu je i „npm“ naredba (eng. Node Package Manager) koja služi za

instalaciju programskih paketa i njihovih ovisnosti.

Slika 51. Ažuriranje npm modula i instalacija OpenLayers paketa v4.1.1

Node.js nakon instalacije ne ažurira automatski npm modul stoga ga je potrebno

ažurirati. Ažuriranje se obavlja pomoću npm install npm --global naredbe

(global je opcija za ažuriranje modula na globalnoj razini) (URL 36). OpenLayers

knjižnica v4.1.1 se u određenom direktoriju instalira (Slika 51) naredbom npm

install openlayers@4.1.1. Alternativno, može se preuzeti i sa službenog

GitHub repozitorija. Uz OpenLayers paket se instalira i Closure alat kao jedna od

ovisnosti.

Slika 52. Primjer notacije metode getCollection() konstruktora ol.Feature

66

Slika 53. Primjer notacije konstruktora Rotate po Closure Library i JSDoc pravilima

Za uspješno prevođenje i izradu API dokumentacije proširene knjižnice kod je

neophodno notirati po pravilima JSDoc dokumentacije koda koju razumije i Closure

Compiler (Slike 52 i 53). Naime, JavaScript nema sintaksu za definiranje tipova

objekata stoga se provodi unutar za to definiranog tipa komentara (/** */)

korištenjem odgovarajućih oznaka (npr. @type, @param, @return, @api i dr.).

Drugo i jednako važno je definirati naziv konstruktora (goog.provide) i njegove

ovisnosti o ostalim (goog.require) po pravilima Closure Library (neposredno prije

deklaracije konstruktora) (URL 37).

Slika 54. Primjer definiranja tipova podataka u typedefs.js datoteci

67

Izvorni kod knjižnice se nalazi i postavlja na /openlayers/src/ol/ direktorij.

Prilikom izmjena klasa, definirani su i novi tipovi objekata u typedefs.js datoteci

(Slika 54) koja je sastavni dio izvornog koda i također se nalazi u navedenom

direktoriju. Dodavanjem novih klasa (konstruktora) te izmjenama i dodavanjem opcija

(svojstava) istih, potrebno je definirati njihov prototip te tip podatka unutar olx.js, a

događaje unutar oli.js datoteke (Slika 55). Navedene datoteke su vanjske i služe

u izradi API dokumentacije, a spremaju se na /openlayers/externs/ direktorij.

Slika 55. Primjer definiranja svojstava konstruktora (lijevo) i događaja (desno)

Closure Compiler je kompleksan alat, međutim OpenLayers razvojni programeri su

izradili pomoćne programe i konfiguracijske datoteke za njegovu uporabu. Uporaba

se tako svela na vrlo jednostavan postupak pokretanja navedenih programa s

parametrima definiranim konfiguracijskom datotekom (Slika 56).

Slika 56. Izgradnja komprimirane i debug verzije knjižnice

68

Skripta za izgradnju knjižnice build.js se nalazi na openlayers/tasks/

direktoriju, a konfiguracijska datoteka ol.json odnosno ol-debug.json na

openlayers/config/ direktoriju. Prva konfiguracijska datoteka definira parametre

za napredno prevođenje i komprimiranje knjižnice, a druga ne sadrži parametre

prevođenja već kombinira sve pojedinačne datoteke u jednu, tzv. debug verziju

knjižnice, koja se koristi za otkrivanje pogrešaka koda ukoliko iste postoje. Radi

usporedbe, komprimirana verzija knjižnice zauzima gotovo pet puta manji kapacitet

memorije od debug verzije (Slika 57).

Slika 57. Veličine komprimirane i debug verzije knjižnice

Kao što je bilo govora, Closure Compiler prije prevođenja analizira cjelokupni kod te

ispisuje pogreške ukoliko one postoje. Slika 58 prikazuje primjer detektiranih i

ispisanih pogrešaka koda u naredbenom retku. Osim vrste pogreške, ispisuje se i

putanja do datoteke i redak na kojem se ista nalazi.

Slika 58. Detekcija pogrešaka koda pri prevođenju knjižnice

69

Izrada API dokumentacije

Nakon uspješne izgradnje komprimirane i debug verzije knjižnice, moguće je izraditi

API dokumentaciju, tj. dokumentirati aplikacijsko programsko sučelje. Ono se sastoji

od imena i signatura konstruktora, funkcija, metoda i svojstava instanci te imena

konstanti. Obzirom da je cijela knjižnica notirana po pravilima JSDoc dokumentiranja

na prethodno opisani način, generiranje API dokumentacije se obavlja automatski

pomoću istoimenog, JSDoc paketa.

JSDoc je dakle još jedna OpenLayers ovisnost, stoga ga je potrebno instalirati unutar

OpenLayers paketa (Slika 59). Ovisni paketi se instaliraju u pod direktorij

node_modules glavnog direktorija paketa. Samo geneneriranje API dokumentacije

podrazumijeva izradu cijelog niza međusobno povezanih DHTML web dokumenata

(HTML, CSS i JavaScript).

Slika 59. Instalacija JSDoc paketa i generiranje API dokumentacije

Generiranje API dokumentacije se pokreće pokretanjem jsdoc.js skripte JSDoc

paketa s konfiguracijskim parametrima zadanim unutar conf.json datoteke koja se

nalazi na openlayers/config/jsdoc/api/ direktoriju (Slika 59). Generirana

dokumentacija se sprema u pod direktorij out glavnog direktorija knjižnice, ukoliko

se opcijama nije zadao drugi. Slika 60 prikazuje primjer jedne tako generirane

DHTML web stranice API dokumentacije. Na svakoj web stranici dokumentacije je

moguća pretraga ostalih dokumenata i pristup istima.

API dokumentacija je također postavljena na web poslužitelj Zavoda za primijenjenu

geodeziju Geodetskog Fakulteta Sveučilišta u Zagrebu, a dostupna je na web adresi

URL 38. Osim direktne poveznice, dokumentaciji se može pristupiti i preko ikone za

pomoć na alatnoj traci aplikacije. Unutar dokumentacije, sve promjene načinjene pri

proširivanju OpenLayers knjižnice su označene znakom XT.

70

Slika 60. Generirana API dokumentacija

71

6. ZAKLJUČAK

Postoje različita web programska rješenja za izradu i održavanje karata utemeljena

na GIS tehnologiji. Takvi alati u potpunosti ne zadovoljavaju zahtjeve za izradu i

održavanje geodetskih planova, što je pokazano na primjeru ArcGIS Online i GIS

Cloud web programskih rješenja. Razlog tome je nedostatak kontrola za crtanje i

uređivanje po koordinatama te raznovrsnije korištenje točke hvatišta koje pruža jedan

CAD sustav.

Produkt ovog diplomskog rada je moderna, inovativna i napredna web aplikacija za

održavanje geodetskog plana koja integrira određene komponente geoinformacijskog

i CAD sustava. Aplikacija dakle ne integrira sve već određene njihove komponente,

čime su djelomično otklonjeni nedostaci pojedinačnih sustava, a koje uz dodatne

mogućnosti pružaju podršku izradi i održavanju geodetskog plana. Te komponente

su mogućnost crtanja i uređivanja po koordinatama i dimenzijama objekata te

naprednije korištenje točke hvatišta uz rad s GIS objektima, spremanje u prostornu

bazu podataka te pregled i unos atributa.

Web aplikacija donosi mnogobrojne prednosti neposredno naslijeđene od korištenih

programskih rješenja i sustava. Prednosti su dakle prethodno navedene integrirane

komponente, zatim je web tehnologija doprinijela vlastitim prednostima, pri čemu je

sve u skladu s međunarodnim normama, obzirom da su za rukovanje s prostornim

podacima korištena takva programska rješenja. Analogno prednostima, mane su

također naslijeđene, između kojih se ističe onaj dio geoinformacijskog sustava koji se

odnosi na postavljanje upita, analizu i vizualizaciju prostornih podataka. Neovisno o

tome, ovim radom su definitivno otvorena vrata novoj dimenziji izrade i održavanja

geodetskog plana te postavljeni temelji za daljnji razvoj i napredak sustava.

OpenLayers se pokazao kao izuzetno moćan, zreo i pouzdan alat otvorenog koda za

izradu web karata odnosno razvoj aplikacija za izradu web karata, pri čemu

omogućuje visoku interaktivnost i jednostavnost. Njegovom nadogradnjom, koja je

bila krucijalna za ovaj rad, to se uspješno svelo i na geodetske planove. Ovime se

između ostalog pokazalo kako i određeni besplatni programi otvorenog koda mogu

izvrsno poslužiti u procesu nastajanja nečega stručnog i profesionalnog kao što su to

geodetski planovi. Web aplikacija se mogla razviti i drugim tehnologijama otvorenog

koda, kao i komercijalnim programskim rješenjima.

72

LITERATURA

Cetl, V. (2003): Uloga katastra u nacionalnoj infrastrukturi prostornih podataka. Magistarski rad, Geodetski fakultet Sveučilišta u Zagrebu, Zagreb.

DGU (2009): Tehničke specifikacije za postupke računanja i podjelu na listove

službenih karata i detaljne listove katastarskog plana u kartografskoj projekciji Republike Hrvatske – HTRS96/TM, verzija 1.0, Zagreb.

DGU (2010): Specifikacije za vektorizaciju katastarskih planova koji se izrađuju s

CAD/GIS software-ima, verzija 2.9.4, Zagreb. Farkas, G. (2016): Mastering OpenLayers 3, Packt Publishing Ltd., Birmingham. Gajski, D., Šamanović, S. (2016): Geoinformacijski sustavi, nastavni materijal za

kolegij Geoinformacijski sustavi, Geodetski fakultet Sveučilišta u Zagrebu. Gratier, T., Spencer, P., Hazzard, E. (2015): OpenLayers 3 Beginner’s Guide, Packt

Publishing Ltd., Birmingham. ISO (2003): ISO 19107:2003, Geographic information - Spatial schema, ISO/TC 211,

Geneva. ISO (2004): ISO 19125-1:2004, Geographic information - Simple feature access -

Part 1: Common architecture, ISO/TC 211, Geneva. ISO (2012): ISO 19152:2012, Geographic information - Land Administration Domain

Model (LADM), ISO/TC 211, Geneva. Ivković, M. (2013): Geodetski planovi, Interna skripta, Geodetski fakultet, Zagreb. Ivković, M. (2015): Digitalni planovi, Interna skripta, Geodetski fakultet, Zagreb. OGC (2011a): Implementation Standard for Geographic information - Simple feature

access - Part 1: Common architecture, version 1.2.1, OGC. OGC (2011b): Implementation Specification for Geographic information - Simple

feature access - Part 2: SQL option, version 1.2.1, OGC. Medak, D. (2013): Baze podataka, nastavni materijal za kolegij Baze podataka,

Geodetski fakultet Sveučilišta u Zagrebu. Nacionalni CERT, LS&S (2010): Cloud computing, Revizija 1.03, CARNET, Zagreb,

http://www.cert.hr/sites/default/files/NCERT-PUBDOC-2010-03-293.pdf, (09.06.2017.).

Roić, M., Matijević, H., Cetl V. (2002): Objektno-orijentirano modeliranje katastra,

Zbornik Geodetskog fakulteta Sveučilišta u Zagrebu povodom 40. obljetnice samostalnog djelovanja, Geodetski fakultet, Zagreb.

73

Vujnović, R. (1995): SQL i relacijski model podataka, Znak, Zagreb. Zekić-Sušac, M. (2008): Web aplikacije, nastavni materijal za kolegij Razvoj

poslovnih aplikacija, Ekonomski fakultet Sveučilišta J. J. Strossmayera u Osijeku, http://www.mathos.unios.hr/wp/wp2009-10/P14_Web_aplikacije.pdf, (08.06.2017.)

74

POPIS URL-ova

URL 1. CAD Software, https://www.autodesk.com/solutions/cad-software,

(05.06.2017.)

URL 2. USGS FAQs, https://www2.usgs.gov/faq/categories/9794/2912, (05.06.2017.)

URL 3. Difference between GIS and CAD, https://www.slideshare.net/Sumant

Diwakar/difference-between-gis-and-cad, (06.06.2017.)

URL 4. Web aplikacije – prednosti i nedostaci, http://www.horizont.com.hr/web-

aplikacije---prednosti-i-nedostatci-3-blog, (07.06.2017.)

URL 5. Web server, https://en.wikipedia.org/wiki/Web_server, (07.06.2017.)

URL 6. What is ArcGIS Online?, http://doc.arcgis.com/en/arcgis-online/reference/

what-is-agol.htm, (09.06.2017.)

URL 7. Introducing GIS Cloud, http://www.giscloud.com/manual/gis-cloud-manual-

2/introducing-gis-cloud/, (10.06.2017.)

URL 8. Map Editor Subscription Comparison, http://www.giscloud.com/map-editor-

subscription-comparison, (10.06.2017.)

URL 9. GIS Cloud Products http://www.giscloud.com/products/, (10.06.2017.)

URL 10. ArcGIS Online Service Credits,

http://www.esri.com/software/arcgis/arcgisonline/credits, (09.06.2017.)

URL 11. HTML Introduction, https://www.w3schools.com/html/html_intro.asp,

(10.06.2017.)

URL 12. HTML CSS, https://www.w3schools.com/html/html_css.asp, (11.06.2017.)

URL 13. What is JavaScript?, https://developer.mozilla.org/en-US/docs/Learn/

JavaScript/First_steps/What_is_JavaScript, (11.06.2017.)

URL 14. JavaScript Examples, https://www.w3schools.com/js/js_examples.asp,

(11.06.2017.)

URL 15. JavaScript HTML DOM, https://www.w3schools.com/js/js_htmldom.asp,

(11.06.2017.)

URL 16. JavaScript Events, https://www.w3schools.com/js/js_events.asp,

(11.06.2017.)

URL 17. JavaScript Objects, https://www.w3schools.com/js/js_object_definition.asp,

(12.06.2017.)

URL 18. JavaScript Prototypes, https://www.w3schools.com/js/js_object_

prototypes.asp, (12.06.2017.)

75

URL 19. JavaScript difference between __proto__ and prototype https://coderwall.

com/p/j1khtg/javascript-difference-between-__proto__-and-prototype, (13.06.2017.)

URL 20. Kenneth Kin Lum's Blog: JavaScript's Pseudo Classical Inheritance

diagram, https://kenneth-kin-lum.blogspot.hr/2012/10/javascripts-pseudo-

classical.html, (13.06.2017.)

URL 21. OpenLayers API, https://openlayers.org/en/latest/apidoc/, (13.06.2017.))

URL 22. GeoServer GeoNetwork with web app - OpenLayers - Wikipedia, https://en.

wikipedia.org/wiki/OpenLayers#/media/File:GeoServer_GeoNetwork_with_web_app.

svg, (13.06.2017.)

URL 23. jQuery Tutorial, https://www.w3schools.com/jquery/default.asp,

(14.06.2017.)

URL 24. Notepad++, https://en.wikipedia.org/wiki/Notepad%2B%2B, (14.06.2017.)

URL 25. Chrome DevTools Overview, https://developer.chrome.com/devtools,

(14.06.2017.)

URL 26. PHP 5 Tutorial, https://www.w3schools.com/php/default.asp, (14.06.2017.)

URL 27. What is: Apache?, http://www.wpbeginner.com/glossary/apache/,

(14.06.2017)

URL 28. What is PostgreSQL?, https://www.postgresql.org/docs/9.6/static/intro-

whatis.html, (14.06.2017.)

URL 29. Feature Manipulation Engine, http://whatis.techtarget.com/definition/

Feature-Manipulation-Engine-FME, (14.06.2017.)

URL 30. mapp – Početna stranica, http://www.pg.geof.unizg.hr/mpleic_diplomski/

mapp.html

URL 31. GitHub – OpenLayers, https://github.com/openlayers/openlayers,

(16.06.2017.)

URL 32. Minification (programming), https://en.wikipedia.org/wiki/Minification_

(programming), (18.06.2016.)

URL 33. Google Closure Tools, https://en.wikipedia.org/wiki/Google_Closure_Tools,

(18.06.2016.)

URL 34. Closure Compiler, https://developers.google.com/closure/compiler/,

(19.06.2016.)

URL 35. Node.js, https://nodejs.org/en/, (19.06.2016.)

76

URL 36. Installing Node.js Tutorial: Windows, https://nodesource.com/blog/installing-

nodejs-tutorial-windows/, (19.06.2016.)

URL 37. Annotating JavaScript for the Closure Compiler, https://github.com/google/

closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler, (19.06.2016.)

URL 38. OpenLayers XT v4.1.1 API, http://www.pg.geof.unizg.hr/mpleic_diplomski/

api/index.html

77

POPIS SLIKA

Slika 1. Isječak katastarskog plana (Ivković 2015) ................................................... 10

Slika 2. Digitalni katastarski plan k.o. Karin .............................................................. 14

Slika 3.Odnos stupnja uopćenja modela i njegove orijentiranosti (Matijević 2004) ... 16

Slika 4. Primjer dijagrama EV modela (Medak 2013) ............................................... 16

Slika 5. Relacija (tablica) i dijelovi relacije ................................................................ 17

Slika 6. Komponente prostornih podataka (Roić i dr. 2002)...................................... 18

Slika 7. Osnovne geometrijske klase (ISO 2003) ..................................................... 20

Slika 8. Hijerarhija klasa geometrija (OGC 2011a) ................................................... 21

Slika 9. Shematski prikaz normirane SQL implementacije (OGC 2011b) ................. 23

Slika 10. Osnovne klase LADM (ISO 2012) .............................................................. 24

Slika 11. Pregled LADM paketa i pod-paketa s njihovim pripadajućim klasama (ISO

2012) ........................................................................................................................ 25

Slika 12. Arhitektura web aplikacije .......................................................................... 27

Slika 13. ArcGIS Online Map Viewer ........................................................................ 30

Slika 14. GIS Cloud Map Editor ................................................................................ 31

Slika 15. Analiza i prikaz površina katastarskih čestica u Map Viewer-u .................. 32

Slika 16. Ilustracija komponenti aplikacije mapp ....................................................... 33

Slika 17. HTML 5 dokument s osnovnim elementima ............................................... 34

Slika 18. Primjer CSS koda ...................................................................................... 34

Slika 19. Način pridruživanja klasa i jedinstvenih identifikatora HTML elementima .. 35

Slika 20. Učitavanje vanjskih CSS datoteka u HTML dokument ............................... 35

Slika 21. CSS unutar HTML dokumenta (lijevo) i prezentacija istog (desno) ............ 36

Slika 22. Učitavanje vanjskih JavaScript datoteka u HTML dokument ..................... 36

Slika 23. JavaScript unutar HTML dokumenta .......................................................... 37

Slika 24. Izmjena odnosno dodavanje HTML elemenata web stranice pomoću

JavaScript-a .............................................................................................................. 37

Slika 25. HTML DOM je konstruiran kao stablo objekata (URL 15) .......................... 38

Slika 26. Dijagram nasljeđivanja the_godfather objekta ........................................... 43

Slika 27. Komunikacija OpenLayers-a s različitim poslužiteljima (URL 22) .............. 44

Slika 28. Pregled (inspekcija) HTML DOM objekata ................................................. 46

Slika 29. Pogreška izvršavanja JavaScript koda prikazana na konzoli ..................... 46

Slika 30. Primjer prilagodbe prikaza aplikacije na Nexus 5X pametnom uređaju ..... 48

78

Slika 31. Konceptualni model aplikacije mapp .......................................................... 49

Slika 32. AJAX GET zahtjev za izvršavanje PHP skripte .......................................... 50

Slika 33. Tablice cp_parcel (iznad) i cp_building (ispod) u prostornoj bazi podataka 50

Slika 34. Sučelje aplikacije mapp ............................................................................. 51

Slika 35. Ikone alatne trake ...................................................................................... 51

Slika 36. Statusna traka ............................................................................................ 52

Slika 37. AutoCAD pokazivači uz ikone na radnom području ................................... 52

Slika 38. Prozor atributne tablice .............................................................................. 53

Slika 39. Prozor informacija objekta ......................................................................... 54

Slika 40. Primjeri korištenja interakcije crtanja .......................................................... 55

Slika 41. Pojedinačan odabir objekata (lijevo) i odabir iscrtavanjem pravokutnika

(desno) ..................................................................................................................... 56

Slika 42. Izmjena geometrije a) izmjenom položaja lomne točke, b) translacijom, c)

rotacijom i d) skaliranjem poligona. .......................................................................... 57

Slika 43. Načini rotacije objekta unosom kuta rotacije .............................................. 58

Slika 44. Primjeri uporabe točaka hvatišta ................................................................ 59

Slika 45. Uređivanje nepravilnog poligonskog objekta koristeći okomice ................. 59

Slika 46. Primjeri obavijesti ....................................................................................... 60

Slika 47. Obavijest o nepostojećoj naredbi (lijevo) i automatsko dovršavanje (desno)

................................................................................................................................. 61

Slika 48. Filtriranje segmenata ................................................................................. 62

Slika 49. Definiranje interakcije točke hvatišta .......................................................... 63

Slika 50. Uvođenje z indeksa .................................................................................... 63

Slika 51. Ažuriranje npm modula i instalacija OpenLayers paketa v4.1.1 ................. 65

Slika 52. Primjer notacije metode getCollection() konstruktora ol.Feature ............... 65

Slika 53. Primjer notacije konstruktora Rotate po Closure Library i JSDoc pravilima 66

Slika 54. Primjer definiranja tipova podataka u typedefs.js datoteci ......................... 66

Slika 55. Primjer definiranja svojstava konstruktora (lijevo) i događaja (desno) ....... 67

Slika 56. Izgradnja komprimirane i debug verzije knjižnice ....................................... 67

Slika 57. Veličine komprimirane i debug verzije knjižnice ......................................... 68

Slika 58. Detekcija pogrešaka koda pri prevođenju knjižnice ................................... 68

Slika 59. Instalacija JSDoc paketa i generiranje API dokumentacije ........................ 69

Slika 60. Generirana API dokumentacija .................................................................. 70

79

POPIS TABLICA

Tablica 1. Pregled glavnih razlika CAD-a i GIS-a ..................................................... 12

Tablica 2. Dostupnost tipa točke hvatišta po programskom sustavu ........................ 13

Tablica 3. Struktura referiranih slojeva DKP-a pri izradi aplikacije (DGU 2010) ....... 14

Tablica 4. Usporedba pretplata na GIS Cloud Map Editor (URL 8) .......................... 29

Tablica 5. ArcGIS Online krediti prema uslugama (URL 10)..................................... 29

Tablica 6. Pregled i usporedba mogućnosti sustava prema kriteriju ......................... 31

Tablica 7. Uobičajeni HTML događaji (URL 16) ........................................................ 39

Tablica 8. Primjeri vrijednosti primitivnih tipova podataka ........................................ 39

Tablica 9. Ugrađeni JavaScript konstruktori i pripadajući Object Literal ................... 41

Tablica 10. Dostupni slojevi ...................................................................................... 53

Tablica 11. Točke hvatišta i pripadajuće ikone ......................................................... 58

Tablica 12. Popis naredbi i njihovih funkcija ............................................................. 61

80

POPIS PRILOGA

Prilog A: Popis proširenih OpenLayers klasa i pripadajuće metode

Prilog A: Popis proširenih OpenLayers klasa i pripadajuće metode

ol.events.condition

• middleMouse

• platformModifierKey

• shiftKey

ol.Feature

• getCollection

• getLayer

• getSource

• getUid

ol.format.GeoJSON

• writeFeatureObjectUid

• writeFeaturesObjectUid

ol.geom.LineString

• getVerticesNumber

ol.geom.Polygon

• getPerimeter

• getVerticesNumber

ol.interaction.Draw

• cancelDrawing

• coordInput

• getDimMode

• getDrawingFeature

• getDrawnFeature

• getReferencePoint

• setDimMode

• setReferencePoint

• setSource

ol.interaction.DrawEventType

ol.interaction.Modify

• cancelModify

• coordInput

ol.interaction.Modify.ModifiedEvent

ol.interaction.ModifyEventType

ol.interaction.Rotate

• absoluteAngleInput

• cancelRotate

• coordInput

• getAngleInputMode

• getBearing

• relativeAngleInput

ol.interaction.Rotate.Event

ol.interaction.Scale

• cancelScale

• coordInput

• getScaleFactorInputMode

• scaleFactorInput

ol.interaction.Scale.Event

ol.interaction.Select

• boxSelection

• clearClipboard

• clearSelection

• cloneSelected

• copySelected

• cutSelected

• deleteSelected

• deselectByUid

• getClipboard

• pasteSelected

• selectAll

• selectByUid

• zoomSelected

ol.interaction.Select.ClipboardEvent

ol.interaction.Select.ClipboardEventType

ol.interaction.Snap

• addFeatures

• getSource

• getSources

• removeFeatures

• setDraw

• setFeaturesCollection

• setMDraw

• setModify

• setRotate

• setScale

• setTranslate

• snapToSetActive

ol.interaction.Translate

• cancelTranslate

• coordInput

ol.Map

• getLayersWithFeatures

• getSourcesWithFeatures

• getVectorLayers

• getVectorSources

• getVisibleLayersWithFeatures

• getVisibleSourcesWithFeatures

• getVisibleVectorSources

• zoomExtent

ol.structs.RBush

ol.style.Style

• createDefaultKcmedjaStyle

• createDefaultModifyStyleFunction

• createDefaultPomocnoStyle

• createDefaultSelectFeatureInfoStyleFunction

• createDefaultSelectStyleFunction

• createDefaultSnapStyleFunction

• createDefaultZgStyle

• labelStyleFunction

Životopis

1/2

Marko Pleić, mag. ing. geod. et geoinf.

III Trnjanske ledine 1A, 10000 Zagreb

mpleic17@gmail.com

+385 95 5141 658

10.12.1993.

hrvatsko državljanstvo

Obrazovanje

2015 – 2017

Magistar inženjer geodezije i geoinformatike Geodetski fakultet Sveučilišta u Zagrebu usmjerenje: Geoinformatika

2012 – 2015 Sveučilišni prvostupnik inženjer geodezije i geoinformatike Geodetski fakultet Sveučilišta u Zagrebu

2008 – 2012 Geodetski tehničar Geodetska tehnička škola u Zagrebu

Projekti

Web aplikacija http://www.pg.geof.unizg.hr/mpleic_diplomski/index.html

Digitalna kompetencija

Operacijski sustavi Windows (10, 7), Debian GNU/Linux (Ubuntu) CAD Autodesk AutoCAD (Map, Civil) GIS QuantumGIS, ArcGIS ArcMap, SAGA GIS WEB HTML, CSS, Javascript (OpenLayers, jQuery), PHP Programski jezici Python (Numpy, Shapely, Matplotlib, Fiona), UserRPL Baze podataka PostgreSQL+PostGIS Uredski alati MS Office (Word, Excel, PowerPoint) Grafika Paint.NET, CorelDraw Ostalo PC hardware

Jezici

Hrvatski Materinski jezik Engleski Državna matura RH

Radno iskustvo

01.09.2015. - 31.08.2016.

HRVATSKE CESTE d.o.o., Zagreb Studentski posao Izrada jedinstvenog adresnog sustava javnih cesta RH te poslovi i zadaci na izmjeni i dopuni vektorske digitalizacije osi javnih cesta za potrebe GISJAC i NIPPJAC prostorne baze podataka.

01.09.2014. - 30.09.2014. CADCOM d.o.o., Zagreb Studentski posao

katastarska izmjera i omeđivanje izmjera elektroničke komunikacijske infrastrukture

02.07.2012. - 31.07.2012. GEO BIRO STOJANOVIĆ d.o.o., Obrovac

Geodetski tehničar

izmjera zemljišta izrada geodetskih elaborata (legalizacija bespravno sagrađenih objekata, upis objekta u

2/2

katastar, PGP)

27.06.2011. - 29.07.2011. CADCOM d.o.o., Zagreb

Učenička praksa katastarska izmjera i omeđivanje