RAZVOJ SISTEMA ZA 3D VIZUALIZACIJO EVAKUACIJSKEGA … · Google Earth, ki je hitro rastoča in...

Diplomsko delo univerzitetnega študija

Organizacija in management informacijskih sistemov

RAZVOJ SISTEMA ZA 3D VIZUALIZACIJO

EVAKUACIJSKEGA NAČRTA V GOOGLE

EARTH

Mentor: doc. dr. Davorin Kofjač Kandidat: Matic Luznar

Somentor: doc. dr. Andrej Škraba

Kranj, julij 2012

ZAHVALA

Zahvaljujem se mentorju doc. dr. Davorinu Kofjaču in somentorju doc. dr. Andreju

Škrabi za pomoč in nasvete pri izdelavi diplomskega dela.

POVZETEK

V diplomskem delu obravnavamo možnost predstavitve lastnih 3D-objektov v okolju

Google Earth, ki je hitro rastoča in razvijajoča se programska oprema, dostopna

širokemu krogu uporabnikov in je le-tem omogočeno dodajanje lastnih vsebin. V

okviru diplomskega dela smo poustvarili model realnega okolja v 3D, ki služi kot

prototip okolja, kjer bi se zaradi krizne situacije lahko izvajala evakuacija. V

povezavi z označevalnim jezikom KML lahko v Google Earthu dodajamo objekte in

na različne načine označujemo ter opisujemo lokacije. Zaradi zamudnosti ročnega

opisovanja objektov s KML-jem smo raziskali možnost uvoza že generiranih

tridimenzionalnih objektov v Google Earthu. Za potrebe evakuacije smo določili

evakuacijsko pot v izbranem okolju. Ustvarjen je bil vmesnik, ki omogoča kreiranje

oziroma uvoz koordinat evakuacijske poti in vizualizacijo gibanja po tej poti.

KLJUČNE BESEDE - Spletna rešitev

- Objekti

- Evakuacijske poti

- Google Earth

- KML

ABSTRACT

In the thesis we want to show the possibility of own 3D objects presentation using

Google Earth environment, accessible to larger number of users who are enabled to

add their own contents. In this way, we created a model of the real environment in

3D which will serve as prototype of the environment, where, due to crisis situation,

evacuation could be performed. In connection with designated KML language we

can add objects to Google Earth, denoting and describing thus locations in various

ways. Hand description of objects by KML, however, can be time consuming,

therefore we did a research about the possibilities of launching the already generated

3D objects into Google Earth. For the needs of evacuation it is necessary to

determine evacuation path in the selected environment. We created an interface

which enables creating and launching, respectively, the coordinates of evacuation

path and visualisation of moving on this path.

KEYWORDS - Internet solution

- Objects

- Evacuation paths

- Google Earth

- KML

KAZALO

1 UVOD ................................................................................................................... 1

1.1 Opredelitev problema .................................................................................... 1

1.2 Cilji naloge in metodologija .......................................................................... 1

2 OZNAČEVALNI JEZIK KML IN VTIČNIK GOOGLE EARTH ................... 2

2.1 Označevalni jezik KML ................................................................................ 2

2.2 Vtičnik Google Earth .................................................................................. 10

3 ORODJA ZA RAZVOJ SPLETNE REŠITVE .................................................. 16

3.1 Notepad++ ................................................................................................... 16

3.2 WAMP ........................................................................................................ 16

3.3 HTML ......................................................................................................... 16

3.4 CSS .............................................................................................................. 17

3.5 Javascript ..................................................................................................... 17

3.6 PHP ............................................................................................................. 18

4 OPIS VMESNIKA ............................................................................................. 19

4.1 Iskalnik lokacij ............................................................................................ 20

4.2 Glavni meni ................................................................................................. 20

5 PRIMER EVAKUACIJSKEGA OKOLJA ........................................................ 45

6 ZAKLJUČEK ..................................................................................................... 47

LITERATURA IN VIRI ............................................................................................ 48

PRILOGE ................................................................................................................... 50

KAZALO SLIK ......................................................................................................... 51

KAZALO TABEL ..................................................................................................... 52

Univerza v Mariboru - Fakulteta za organizacijske vede Diplomsko delo univerzitetnega študija

Matic Luznar: Razvoj sistema za 3d vizualizacijo evakuacijskega načrta

v Google Earth Stran 1

1 UVOD

1.1 Opredelitev problema

V diplomskem delu se bomo ukvarjali z modeliranjem okolja v 3D s pomočjo tehnologije Google Earth (Google Zemlja, 2012). To nam bo služilo kot osnova za izdelavo evakuacijskega okolja in evakuacijskih poti v kriznih situacijah. S tem bo zagotovljen sistem za podporo odločanju v kriznih situacijah (Škraba et al., 2012), ki bo pomembno prispeval k učinkovitejši in hitrejši izvedbi evakuacije, saj bo zagotavljal vizualizacijo prizadetega okolja in najboljše evakuacijske poti. Ker poteka delo ekip, ki rešujejo krizne razmere, na terenu in izven kontroliranega okolja, je potrebno zagotoviti tak virtualni prikaz kriznega okolja, ki je dostopen od kjerkoli. To je možno izvesti s pomočjo spletne aplikacije, saj danes tehnologija omogoča dostop do spleta tudi preko mobilnih naprav in tako nismo omejeni le na nadzorni center kriznega štaba. V ta namen bomo v diplomskem delu prikazali razvoj modeliranja kriznega okolja s pomočjo spletnih tehnologij, kot so WAMP, Javascript, PHP, vtičnik Google Earth, ki so neodvisne od uporabljene platforme.

1.2 Cilji naloge in metodologija

Cilj naloge je razvoj spletne rešitve, ki bo omogočala uvoz in predstavitev tridimenzionalnih objektov v vtičniku Google Earth. Spletna rešitev mora omogočati tudi vnos koordinat poti in gibanje v »prvi osebi« po tej poti. Rezultat naloge bo spletna rešitev, ki bo omogočala predstavitev 3D-objektov in upravljanje s pogledom v vtičniku Google Earth. Predlagane metode in orodja, ki jih bomo uporabili v diplomskem delu, so:

programski paket WAMP, programski jezik Javascript, programski jezik PHP, označevalni jezik KML, vtičnik za internetne brskalnike Google Earth.




2 OZNAČEVALNI JEZIK KML IN VTIČNIK

GOOGLE EARTH

2.1 Označevalni jezik KML

KML (Wikipedia KML, 2012) je okrajšava za Keyhole Markup Language in

predstavlja format za prikaz geografskih podatkov v brskalnikih, kot so Google

Earth, Google Maps in Google Maps za mobilne naprave. Primarno je bil razvit za

uporabo z Google Earthom. KML je mednarodni standard, ki ga vodi Open

Geospatial Consortium, Inc (OGC).

Datoteka KML omogoča zapis krajevnih oznak, poligonov, slik, 3D-modelov,

tekstovnih opisov ipd. za prikaz v brskalnikih, ki to omogočajo. Lokacijo teh

objektov določimo z zemljepisno širino in dolžino. Poleg statičnih objektov lahko

prikažemo tudi dinamično dogajanje. Prikažemo lahko razvoj nečesa skozi čas, na

primer prikaz gradnje stanovanjskega naselja skozi čas. Animiramo lahko kamero in

na ta način prikažemo npr. predstavitev izleta tako, da pokažemo turistične točke, ki

si jih bomo ogledali. Animiramo lahko tudi 3D-objekte, ki smo jih uvozili, in

prikažemo npr. dvižni most, kako se dviga. Uveljavlja se tudi v športu, kjer nekateri

kolesarski trenažerji omogočajo virtualno kolesarjenje po Google Earthu, saj so

kolesarske poti narejene s pomočjo KML-ja.

Če vežemo na KML-datoteko slike, 3D-modele, ikone ipd., potem lahko vse datoteke

skupaj zapakiramo v datoteko s končnico .kmz. KMZ je stisnjena datoteka, stisnjena

po standardu ZIP. Datoteko KMZ je možno odpreti v Google Earthu, ne da bi jo

razpakirali (Drnovšček, 2010).

KML je označevalni jezik, ki temelji na XML. Označevalni pomeni, da ima podatke,

ločene z oznakami, kar je povzeto v tabeli 1:

Začetna oznaka <name>

Podatek Objekt

Končna oznaka </name>

Tabela 1: Sestava KML

Oziroma zapisano skupaj: <name>Objekt</name>, kot na primer

<name>Hiša</name>.

2.1.1 Osnovna sestava datoteke KML

Vsaka datoteka KML je sestavljena iz začetne značke, vsebine in končne značke.

Datoteko KML začnemo z naslednjo značko: <kml xmlns="http://www.opengis.net/kml/2.2"

xmlns:gx="http://www.google.com/kml/ext/2.2">

Končamo pa z značko:




</kml>

Med ti znački vrinemo vsebino, ki jo lahko postavimo v mape. Glavna mapa v

dokumentu je lahko samo ena, le-ta pa lahko vsebuje več podmap, kot to prikazuje

slika 1.

Slika 1: Podmape KML

Za prikaz teh treh podmap potrebujemo sledečo KML-kodo:

<kml xmlns="http://www.opengis.net/kml/2.2"


<Folder>

<name>KML</name>

<Folder>

<name>Objekti</name>

</Folder>

<Folder>

<name>Poti</name>

</Folder>

<Folder>

<name>Točke</name>

</Folder>

</Folder>

</kml>

V mape lahko z vrivanjem, na podoben način kot smo vrinili mape, dodamo objekte,

poti, točke itd. Da bi prikazali objekte, poti in točke, vrinemo značko <Placemark>,

ki ji dodamo ime <name>. Značke elementov, npr. Placemark, Point ipd., pišemo z

veliko začetnico, njihove lastnosti, npr. name, coordinates ipd., pa z malo, kot je

prikazano na primeru prikaza krajevne označbe (Placemark) z imenom Objekt:



<Placemark>

<name>Objekt</name>

</Placemark>

</kml>

Sedaj smo predstavili osnovno strukturo KML-datoteke. V nadaljevanju bomo

predstavili elemente, ki jih lahko prikažemo s KML-jem.




2.1.2 Točka

Najosnovnejše, kar lahko prikažemo s KML-jem, je točka. Točko označujemo z

značko <Point>, njene koordinate pa z značko <coordinates>, kot je to prikazano s

spodnjo kodo:



<Placemark>

<name>Točka</name>

<Point>

<coordinates>14.379838,46.241829</coordinates>

</Point>

</Placemark>

</kml>

Z vnosom zgornje kode bomo omogočili prikaz točke, kot to prikazuje slika 2.

Slika 2: Prikaz točke

Koordinate točke vpišemo v naslednjem vrstnem redu: zemljepisna dolžina,

zemljepisna širina in nato še višina točke. Višina točke se upošteva samo, če jo

omogočimo.

KML omogoča več načinov prikaza višine: clampToGround, relativeToGround in

absolute. Za izbiro načina prikaza višine uporabimo značko <altitudeMode>,

razlike med načini prikaza višine pa prikazuje slika 3.

V načinu clampToGround se višina ne upošteva. Če je objekt postavljen na neko

lokacijo, bo »prilepljen« na Zemljino površje.




V načinu relativeToGround vpišemo višino, ki bo postavila objekt za toliko metrov

nad Zemljino površino. Na primer: če vpišemo vrednost 10, bo objekt prikazan 10

metrov nad Zemljino površino. V primeru, da je površina Zemlje na neki točki 300

metrov nad morsko gladino, bo objekt na tej točki prikazan na 310 metrih nad

morsko gladino.

V načinu absolute vpišemo, kako visoko nad morsko gladino hočemo, da se objekt

postavi. Če je površina Zemlje 300 metrov nad morsko gladino, mi pa hočemo objekt

postaviti 10 metrov nad to površino, moramo vnesti vrednost 310.

Slika 3: Razlika med načini prikaza višine absolute ter relativeToGround

Torej, če želimo na primer prikazati objekt, ki bo na neki koordinati 10 m nad

površino Zemlje, bomo vpisali naslednje:

<Point>

<altitudeMode>relativeToGround</altitudeMode>

<coordinates>14.379838,46.241829,10</coordinates>

</Point>

2.1.3 Animacija kamere

Animacija kamere je premik kamere med dvema ali več točkami. Deluje tako, da

najprej določimo točke, premik med točkami pa je narejen avtomatsko. Pri animaciji

kamere so pomembne tri stvari: pozicija kamere, način prehoda in čas prehoda.

MORJE

KOPNO

absolute

relativeToGround




Pozicija kamere <Camera>

Da bi kamero ustrezno pozicionirali, moramo vpisati sledeče lastnosti: zemljepisno

dolžino in širino (longitude in latitude), višino kamere (altitude), njeno usmerjenost

(heading) in pa naklon (tilt).

Z usmerjenostjo določimo, v katero smer bo kamera obrnjena. Če določimo

usmerjenost 0°, bo kamera obrnjena proti severu. Vsaka nadaljnja stopinja jo bo

obrnila v smeri urinega kazalca.

Z naklonom določimo, kako bo kamera obrnjena glede na Zemljino površje (slika 4).

Če je naklon kamere enak 0°, potem je kamera obrnjena proti središču Zemlje. Če pa

je naklon enak 90° pa je kamera obrnjena vzporedno z Zemljinim površjem.

Značke, potrebne za pozicioniranje kamere, prikazuje tabela 2.

Lastnost Značka

Zemljepisna dolžina <longitude>

Zemljepisna širina <latitude>

Višina <altitude>

Usmerjenost <heading>

Naklon <tilt>

Tabela 2: Bistvene značke za postavitev kamere

Slika 4: Naklon kamere

ZEMLJA

Naklon kamere je 0°

Naklon kamere je 90°




Način prehoda – <gx:flyToMode>

Način prehoda določa, kako bo kamera prehajala med izbranimi točkami. Izbirati je

možno med dvema načinoma: smooth in bounce.

Če izberemo opcijo smooth, so prehodi med točkami tekoči. Kamera se vmes ne

ustavlja in potuje vedno z enako hitrostjo (slika 5). Kamera točko samo preleti.

Slika 5: Prikaz hitrosti v načinu smooth

V primeru izbire opcije bounce pa kamera točke ne preleti, ampak se na poziciji

točke za kratek čas ustavi (slika 6) in gre potem naprej do naslednje točke.

Slika 6: Prikaz hitrosti v načinu bounce

Čas prehoda – <gx:duration>

Pri času prehoda določimo, koliko časa bo potrebno, da bo kamera prišla od prve do

druge točke. Čas določimo v sekundah.

Sedaj bomo na primeru prikazali, kako bi premikali kamero, da bi premik med

dvema točkama trajal 5 sekund in da bi bil prehod gladek (smooth):

<gx:Tour>

<name>Animacija kamere</name>

<gx:Playlist>

<gx:FlyTo>

<gx:duration>5</gx:duration>

<gx:flyToMode>smooth</gx:flyToMode>

<Camera>

<longitude>14.306607700000038</longitude>

<latitude>46.163984899171254</latitude>

<altitude>106.29177772840164</altitude>

<heading>22</heading>

2 3 1

2 3 1

Konstantna hitrost




<tilt>59.99653655321029</tilt>

</Camera>

</gx:FlyTo>

<gx:FlyTo>

.

.

.

</gx:FlyTo>

</gx:Playlist>

</gx:Tour>

Z zgornjo kodo določimo, da bo to animacija kamere <gx:Tour> z imenom

Animacija kamere. Nato ustvarimo seznam <gx:Playlist>, ki bo vseboval točke,

proti katerim bo kamera potovala. Vsako točko označimo z značko <gx:FlyTo> in ji

dodamo lastnosti, kot so: čas prehoda, način prehoda in pozicija kamere.

2.1.4 Modeli

Modeli so različni tridimenzionalni objekti, ki jih lahko prikažemo v brskalniku.

Potrebujemo jih zato, da bolj realno predstavimo okolje, v katerem se bo odvijal nek

določen scenarij. KML podpira 3D COLLADA-modele. To so datoteke s končnico

.dae. Eden izmed programov, ki podpira izvoz 3D COLLADA-modelov, je tudi

Google SketchUp.

Model ima v KML-datoteki značko <Model>. Temu modelu določimo zemljepisno

širino <latitude>, zemljepisno dolžino <longitude>, nadmorsko višino

<altitude>, usmerjenost <heading> in spletni naslov do datoteke modela <href>.

Primer prikaza modela je v sledeči kodi:

<Model>

<altitudeMode>relativeToGround</altitudeMode>

<Location>

<longitude>6.809695243835449</longitude>


<altitude>0</altitude>

</Location>

<Orientation>

<heading>0</heading>

</Orientation>

<Link>

<href>http://localhost/upload/primer.dae</href>

</Link>

</Model>

2.1.5 Poti

Pot je množica povezanih točk. Značka za pot je <LineString>. Najbolj osnovna pot

mora imeti samo koordinate. Koordinate zapišemo v naslednjem vrstnem redu:

zemljepisna dolžina, zemljepisna širina, višina, nato pa dodamo presledek ali pa

gremo v novo vrstico. Če bomo imeli točke na zemljevidu zelo oddaljene, moramo

dodati lastnost <tessallate> z vrednostjo 1. To pomeni, da tudi če bo črta, ki




predstavlja pot, zelo dolga, se bo prilegala Zemljinemu površju. V primeru, da tega

ne storimo, se lahko zgodi, da črta ne bo vidna (slika 7 in slika 8). Če hočemo, da

tessellate deluje, moramo altitudeMode nastaviti na clampToGround.

Slika 7: Funkcija Tessellate je izklopljena

Slika 8: Funkcija Tessellate je vklopljena

Vsaka pot ima lahko tudi svoj stil. Stil dodamo z značko <styleUrl>. Oblikujemo

ga čisto neodvisno od naše poti, saj bi ga lahko uporabili tudi za kakšno drugo pot.

Stil ima značko <Style>, da bo pa to stil za pot pa dodamo značko <LineStyle>.

Stilu v našem primeru smo dodali barvo in širino. Barva je zapisana s šestnajstiško

vrednostjo in vsebuje štiri komponente: prosojnost in modro, zeleno ter rdečo barvno

komponento (slika 9).

Slika 9: Zapis barve v KML-formatu

Širina poti je lahko določena s točkami ali pa z metri. Z značko <width> je širina

določena s točkami. V tem primeru bo črta zavzela vedno po širini 12 točk ne glede

na to, koliko bo kamera oddaljena od površja Zemlje. Za širino v metrih moramo

uporabiti značko <gx:physicalWidth>. Bolj ko bo kamera oddaljena, tanjša bo pot.

To uporabimo takrat, ko hočemo, da se pot natančno prilega. Če je neka cesta široka

10 metrov, se bo črta z značko <gx:physicalWidth> prilegala cesti ne glede na

oddaljenost kamere in takrat se lahko zgodi, da se pot ne bo videla, če bo kamera

postavljena zelo visoko. Takrat raje določimo širino poti s točkami.

00 - FF 00 - FF 00 - FF 00 - FF

PROSOJNOST ZELENA MODRA RDEČA




Primer KML- kode poti je sledeči:

<Placemark id="path0">

<name>pot 0</name>

<styleUrl>#style0</styleUrl> <LineString>

<altitudeMode>clampToGround</altitudeMode>

<tessellate>1</tessellate>

<coordinates>

14.356391906738281,46.24080276489258,0

14.356213569641113,46.240665435791016,0

14.355985641479492,46.24012756347656,0

14.355876922607422,46.23972702026367,0

14.355703353881836,46.239253997802734,0

14.35634994506836,46.2391242980957,0

</coordinates>

</LineString>

</Placemark>

<Style id="style0">

<LineStyle>

<color>FFFFFFFF</color>

<width>12</width>

</LineStyle>

</Style>

2.2 Vtičnik Google Earth

Vtičnik Google Earth (Google Earth Vtičnik, 2012) je vtičnik za spletne brskalnike.

Uporablja se v navezi s programskim jezikom Javascript in deluje na naslednjih

računalnikih:

- Računalniki z operacijskim sistemom Microsoft Windows (2000, XP, Vista in 7)

o Google Chrome 1.0 in novejši

o Internet Explorer 7 in novejši (32-bitni)

o Firefox 2.0 in novejši

o Flock 1.0 in novejši

- Računalniki z operacijskim sistemom Apple Mac OS X 10.5 in novejši (Intel in

PowerPC)

o Google Chrome 1.0 in novejši

o Safari 3.1 in novejši

o Firefox 3.0 in novejši

Za prikaz vtičnika na spletni strani vpišemo naslednjo kodo:

<html>

<head>

<title>Sample</title>

<script type="text/javascript" src="https://www.google.com/jsapi">

</script>

<script type="text/javascript">

var ge;

google.load("earth", "1");




Točki določimo zemljepisno dolžino ter zemljepisno širino, višino: point.setLatitude(12);

point.setLongitude(12);

point.setAltitude(0);

Točko pripnemo na placemark: placemark.setGeometry(point);

Placemark prikažemo v Google Earthu: ge.getFeatures().appendChild(placemark);

Če želimo pridobiti podatke o točki, to storimo na naslednji način (tabela 4):

Zemljepisna širina point.getLatitude()

Zemljepisna dolžina point.getLongitude()

Višina point.getAltitude()

Tabela 4: Pridobitev podatkov o točki

2.2.2 Kamera

Kamera omogoča dva različna pogleda: prvoosebni in tretjeosebni. Pri prvoosebnem

pogledu določimo koordinate kamere. Kamera je primarni objekt in gledamo skozi

njen objektiv. Pri tretjeosebnem pogledu (slika 10) določimo koordinate

opazovanega objekta, kameri pa določimo oddaljenost od tega objekta. Opazovani

objekt je primarni objekt, kamera je namenjena samo za opazovanje tega objekta. Če

bi hoteli gledati vožnjo avtomobila skozi oči voznika, je to prvoosebni pogled. Če bi

hoteli gledati avtomobil tako, da ga vidimo od zadaj, je to tretjeosebni pogled.

Prvoosebni pogled se ustvari na naslednji način:

Najprej ustvarimo kamero: var camera = ge.createCamera('');

Tej kameri določimo lastnosti: camera.set(1,2,3,4,5,6,7);

1 – zemljepisna širina – latitude,

2 – zemljepisna dolžina – longitude,

3 – višina – altitude,

4 – načina prikaza višine – altitudeMode,

5 – usmerjenost – heading,

6 – nagnjenost naprej nazaj – tilt,

7 – nagnjenost levo desno – roll.

Drugi pogled pa je tretjeosebni. Ustvari se na nasledni način:

var lookAt = ge.createLookAt('');

lookAt.set(1,2,3,4,5,6,7);




1 – zemljepisna širina gledanega objekta – latitude,

2 – zemljepisna dolžina gledanega objekta – longitude,

3 – višina gledanega objekta – altitude,

4 – načina prikaza višine – altitudeMode,

5 – usmerjenost kamere – heading,

6 – nagnjenost kamere naprej nazaj – tilt,

7 – oddaljenost kamere – range.

Slika 10: Prikaz načina lookAt

(https://developers.google.com/kml/documentation/images/lookAtRevised.gif,

21.7.2012)

S spreminjanjem vrednosti z ukazom .set tako lahko dosežemo premikanje kamere.

Če izhajamo iz objekta kamere, ki ga ustvarimo na naslednji način:

var kamera =

ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND);

potem lahko podatke o poziciji pogleda kamere, ki jo upravlja uporabnik, pridobimo

z naslednjimi ukazi (tabela 5):

Zemljepisna širina kamera.getLatitude()

Zemljepisna dolžina kamera.getLongitude()

Usmerjenost kamera.getHeading()

Nagnjenost levo desno kamera.getTilt()

Višina kamera.getAltitude()

Tabela 5: Pridobitev podatkov o prvoosebnem pogledu




2.2.3 Modeli

Za prikaz modela pričnemo podobno kot pri točki.

Ustvarimo placemark: var placemark = ge.createPlacemark('');

Ustvarimo model: var model = ge.createModel('');

Pripnemo model na placemark: placemark.setGeometry(model);

Ustvarimo povezavo do modela: var link = ge.createLink('');

Določimo povezavo do modela: link.setHref('http://localhost/primer.dae');

Pripnemo povezavo na model: model.setLink(link);

Nato ustvarimo lokacijo, določimo njeno zemljepisno širino in dolžino ter pripnemo

lokacijo na model: var location = ge.createLocation('');

location.setLatitude(12);

location.setLongitude(12);

model.setLocation(location);

Prikažemo model v Google Earthu: ge.getFeatures().appendChild(placemark);

Pridobivanje podatkov o modelu nam omogočajo sledeče funkcije (tabela 6):

LOKACIJA

Zemljepisna širina model.getLocation().getLatitude()

Zemljepisna dolžina model.getLocation().getLongitude()

Višina model.getLocation().getAltitude()

ORIENTACIJA

Usmerjenost model.getOrientation.getHeading()

POVEZAVA

Naslov model.getLink.getHref()

Tabela 6: Pridobitev podatkov modela

2.2.4 Poti

Tudi za ustvarjanje poti se držimo podobnega postopka kot pri točki in modelu.

Najprej ustvarimo placemark: var placemark = ge.createPlacemark('');




Ustvarimo pot: var lineString = ge.createLineString('');

Pot pripnemo na placemark: placemark.setGeometry(lineString); Dodamo točke, kjer komponente funkcije pushLatLngAlt pomenijo: zemljepisno širino,

zemljepisno dolžino, višino. lineString.getCoordinates().pushLatLngAlt(12, 12, 0);

lineString.getCoordinates().pushLatLngAlt(12.001, 12.001, 0);

lineString.getCoordinates().pushLatLngAlt(12.002, 12.003, 0);

Placemark prikažemo v Google Earthu: ge.getFeatures().appendChild(placemark);

Podatke o poti pa lahko pridobimo na naslednji način (tabela 7):

Zemljepisna širina prve točke lineString.getCoordinates().get(0).getLatitude()

Zemljepisna dolžina prve točke lineString.getCoordinates().get(0).getLongitude()

Višina prve točke lineString.getCoordinates().get(0).getAltitude()

Število vnesenih točk lineString.getCoordinates().getLength()

Tabela 7: Pridobitev podatkov poti

Poti lahko spreminjamo pozicijo. To storimo na naslednji način (tabela 8):

Sprememba

pozicije

prve točke lineString.getCoordinates().setLatLngAlt(0,širina,dolžina,višina)

Tabela 8: Sprememba pozicije poti




3 ORODJA ZA RAZVOJ SPLETNE REŠITVE

3.1 Notepad++

Notepad++ (Notepad++, 2012) je prosto dostopen odprtokodni besedilni urejevalnik.

Začetki segajo v leto 2003, ko so novembra izdali prvo različico. Program je napisan

v programskem jeziku C++. Deluje na operacijskih sistemih Windows. Uporablja se

za pisanje, urejanje, pregledovanje kode za več kot 50 različnih programskih in

označevalnih jezikov. Pri delu nam pomaga tako, da z različnimi barvami označuje

dele kode in je zato koda preglednejša in berljivejša. Poleg označevanja kode ima

tudi možnost, da nam pomaga pri pisanju kode tako, da nam ponudi možne besede.

Če na primer napišemo »doc«, nam bo ponudil »document«. Podpira tudi

programska jezik Javascript in PHP.

3.2 WAMP

WAMP (WampServer, 2012) je programski paket, ki nam omogoča postavitev

spletnega strežnika s podatkovno bazo. Je najhitrejša možnost za postavitev

spletnega strežnika, saj je potrebnih samo nekaj klikov, da paket namestimo. Iz spleta

si naložimo celoten paket, ga namestimo, zaženemo in že deluje.

Kratica WAMP je poimenovana po komponentah paketa. Prva črka pomeni

Windows, ostale pa predstavljajo naslednje komponente:

- Apache – spletni strežnik,

- PHP – programski jezik,

- MySQL – podatkovne baze.

Tak paket obstaja tudi za operacijski sistem Mac OS X, in se imenuje MAMP, ter za

operacijski sistem Linux, ki se imenuje LAMP.

Paket vsebuje tudi grafični vmesnik, ki deluje v spletnem brskalniku. Imenuje se

phpMyAdmin. Preko phpMyAdmin lahko upravljamo s podatkovnimi bazami

MySQL. WAMP omogoča tudi nastavitve strežnika, hitro prižiganje in ugašanje

strežnika ter spremljanje strežniškega dnevnika. V meniju lahko izbiramo med več

kot 20 jeziki. V naši spletni rešitvi se bo WAMP uporabljal kot spletni prostor za

COLLADA-modele, do katerih bomo dostopali preko KML-ja.

3.3 HTML

HTML (Wikipedia HTML, 2012) je oznaka za Hyper Text Markup Language. Tako

kot KML je to označevalni jezik in predstavlja osnovo za spletno stran. S HTML-jem

določimo strukturo spletne strani, dodamo besedilo, tabele, slike in še veliko drugih

elementov.




Prvi HTML je imel oznako 1.0. Razvil ga je Tim Barners-Lee leta 1990 na inštitutu v

Cernu. Vseboval je najbolj osnovne elemente za postavitev spletne strani. Z

razvojem HTML-ja smo dobili različice 2.0, 3.0, 3.2, 4.0, 4.01 ter zadnjo različico

HTML5. Januarja 1997 je različica 3.2 postala prvi uradni standard, ki ga podpirajo

vsi spletni brskalniki. HTML 4.0 pa je prva različica, ki je podpirala CSS. Z različico

4.01 je prišlo samo nekaj manjših popravkov (HTML Različice jezika HTML, 2012).

Zadnja različica HTML5 (Wikipedia HTML5, 2012) je še vedno v fazi razvoja in

prinaša veliko novih funkcionalnosti. Dodani so multimedijski ter grafični elementi.

Dodamo lahko video in zvočne posnetke. Imamo možnost prikaza platna, na katerem

lahko prikažemo 2D in 3D-vsebino, ki jo je možno tudi animirati.

Za urejanje kode je dovolj najpreprostejši besedilni urejevalnik, kot na primer

Microsoftov Notepad ali pa prej opisani, bolj napredni, Notepad++. Obstajajo tudi

vizualni urejevalniki, pri katerih s pomočjo raznih orodij gradimo stran brez pisanja

kode, saj se koda avtomatsko generira v ozadju. Datoteke HTML imajo končnico

.html ali .htm.

3.4 CSS

CSS (Wikipedia CSS, 2012) je oznaka za Cascading Style Sheets. Uporablja se za

oblikovanje spletnih strani in je izšel leta 1996. Deluje v navezi s HTML in xHTML.

Možno ga je uporabiti tudi skupaj z XML, SVG ter XUL. SVG (Wikipedia SVG,

2012) je baziran na XML ter se uporablja za dvodimenzionalno vektorsko grafiko.

XUL (Wikipedia XUL, 2012) je označevalni jezik, ki omogoča izdelavo grafičnih

uporabniških vmesnikov.

CSS nam omogoča različne stvari. Tako lahko poljubno postavimo elemente na

spletno stran, jim določimo barvo, besedilu pisavo ipd. Sintaksa je zelo preprosta, saj

je sestavljena iz angleških besed, ki opisujejo različne lastnosti. Zadnja različica CSS

se imenuje CSS 4. Problem pri CSS-ju je, da ni popolnoma podprt v vseh

brskalnikih. To privede do tega, da lahko neka spletna stran v enem izmed

brskalnikov izgleda tako, kot smo si zamislili, v drugem brskalniku pa so elementi

lahko postavljeni povsem drugače. Datoteka CSS ima končnico .css.

3.5 Javascript

Javascript (Wikipedia Javascript, 2012; Flanagan, 2006) je objektno orientiran

programski jezik, ki ga je razvil Netscape. Je eden izmed najbolj popularnih

programskih jezikov za splet. V začetkih je imel drugačna imena in se je v razvojni

fazi imenoval Mocha. Ob prvem izidu so ga predstavili kot LiveScript, a zatem se je

pojavilo in obdržalo ime JavaScript.

Ta jezik je zelo pomemben v navezi s HTML in CSS. Omogoča nam, da lahko brez

osveževanja prikažemo stran dinamično. To deluje brez povezave s strežnikom, saj




deluje na strani uporabnika v internetnem brskalniku. Zaradi tega so vse funkcije

izvedene hitreje, saj ni potrebe, da se podatki pošiljajo na strežnik in da čakamo na

strežnikov odziv. Najbolj je to opazno takrat, ko imamo počasno internetno

povezavo. Če se polje preveri s programskim jezikom Javascript, bo ta preverba

izvršena takoj, če pa bo preverba narejena s programskim jezikom, ki deluje na strani

strežnika, bomo pa na preverjanje čakali precej dlje časa (Heilmann, 2006).

Da pa ne bi Javascript deloval samo na strani uporabnika, so predstavili tudi nekaj

implementacij, ki delujejo na strani strežnika. Najbolj opazna implementacija v

zadnjem času se imenuje Node.js (Node.js, 2012). Samostojna datoteka Javascript

ima končnico .js.

3.6 PHP

PHP (Wikipedia PHP, 2012) je spletni programski jezik in deluje na strani strežnika.

Je eden izmed prvih programskih jezikov, ki je deloval na strani strežnika in ga lahko

vključimo v HTML-kodo. Razvoj PHP-ja se je začel leta 1994. Izšel je leta 1995 pod

imenom Personal Home Page Tools. Uporabljamo ga lahko za pridobivanje podatkov

iz obrazcev, računanje, delo s podatkovnimi bazami, prenašanje datotek na strežnik

ipd. Uporabili ga bomo za prenos datotek iz uporabnikovega računalnika na strežnik,

kjer bo tekla spletna rešitev. Datoteka PHP ima končnico .php.




4 OPIS VMESNIKA

Spletni vmesnik smo razvili s pomočjo vtičnika Google Earth, programskih jezikov

PHP in Javascript ter spletnega strežnika WAMP.

Zaslonski posnetek vmesnika prikazuje slika 11. Sestavni elementi vmesnika so

naslednji:

- Iskalnik lokacij

- Glavni meni, ki je sestavljen iz štirih delov:

o Objekti

o Kamera

o Poti

o Popravi in dodaj

- Prikaz v vtičniku Google Earth

Slika 11: Spletni vmesnik




4.1 Iskalnik lokacij

Iskalnik lokacij (slika 12) je namenjen avtomatskemu iskanju le-teh. V iskalnik

vpišemo želeno lokacijo, kot je na primer kraj, naslov, znamenitost ipd. Iskalnik se

nato poveže s storitvijo Google Maps in poišče želeno lokacijo. Storitev Google

Maps vrne zadetek, ki se najbolj ujema z vneseno lokacijo, in ga prikaže na Google

Earthu.

Slika 12: Iskalnik lokacij

4.2 Glavni meni

Glavni meni je sestavljen iz štirih podmenijev, ki so prikazani v obliki zavihkov:

- Objekti

- Kamera

- Poti

- Popravi in dodaj

4.2.1 Objekti

Ta zavihek (slika 13) nam omogoča vnašanje objektov na katerokoli lokacijo. Za

vnos objekta moramo navesti več lastnosti:

- naziv,

- opis,

- zemljepisno širino,

- zemljepisno dolžino,

- usmerjenost,

- datoteko.

Zemljepisno širino in zemljepisno dolžino lahko vnesemo na dva različna načina:

- decimalni način

- način stopinje, minute, sekunde.

Pri decimalnem načinu (slika 14) imamo dve možnosti. Lahko vnesemo ročno z

decimalno vrednostjo, lahko pa poiščemo z iskalnikom želeno lokacijo ter kliknemo

na tisto točko, kamor želimo postaviti objekt. Program tako avtomatično izpiše

koordinate klika v polji zemljepisne širine ter zemljepisne dolžine.

Pri načinu, kjer za lokacijo objekta vnesemo stopinje, minute in sekunde (slika 15),

vpišemo v vsako okno posebej stopinje, minute, sekunde ter izberemo poloblo. Pri

zemljepisni širini lahko izberemo severno ali južno poloblo, pri zemljepisni dolžini

pa vzhodno ali zahodno poloblo.




Slika 13: Zavihek Objekti




Slika 14: Decimalni vnos lokacije objekta

Slika 15: Vnos lokacije objekta s stopinjami, minutami, sekundami

Usmerjenost objekta določimo z vnosom vrednosti od 0 do 359, kjer vrednost 0

pomeni, da je objekt usmerjen proti severu. Vsaka nadaljnja stopinja obrne objekt v

smeri urinega kazalca.

Pod Datoteka izberemo model, ki ga hočemo prikazati v vtičniku Google Earth. Z

gumbom Izberi datoteko odpremo okno, kjer izberemo model s končnico .dae

(COLLADA-datoteka).

Ko so vsi podatki o objektu izpolnjeni, kliknemo gumb Pošlji, nakar se objekt

prikaže v vtičniku (slika 16) in na seznamu objektov (slika 17).

Slika 16: Prikaz objekta v vtičniku Google Earth




Slika 17: Prikaz objekta na seznamu objektov

V primeru, da smo se zmotili pri nazivu ali opisu objekta, to popravimo tako, da

izberemo objekt na seznamu, vnesemo v polji naziv ali opis popravljeno besedilo in

pritisnemo gumb Shrani.

Če hočemo postaviti objekt bolj natančno, to storimo tako, da pritisnemo gumb

Uredi. Tako smo omogočili premikanje objekta s tipkami na tipkovnici. Tipke so

naslednje:

W – naprej

S – nazaj

A – levo

D – desno

E – obrat v smeri urinega kazalca

Q – obrat v obratni smeri urinega kazalca

Ko je objekt postavljen na želenem mestu, pritisnemo gumb Shrani.

Če želimo objekt izbrisati, ga izberemo v seznamu objektov in pritisnemo gumb

Briši.

Primer kode za premikanje objekta:

function premikObjekta() {

try {

if (izbrana >= 0 && !paused) {

heading = model.getOrientation().getHeading();

premikGorDolc = parseFloat(0.000005 * Math.cos((heading / 180) *

Math.PI));

premikGorDols = 0.000005 * Math.sin((heading / 180) * Math.PI);

premikLevoDesnoc = 0.000005 * Math.cos(((heading + 90) / 180) *

Math.PI);

premikLevoDesnos = 0.000005 * Math.sin(((heading + 90) / 180) *

Math.PI);




if (keyboard.pressed("q")) {

model.getOrientation().setHeading(model.getOrientation().getHeadin

g() + 1);

}

if (keyboard.pressed("e"))

{model.getOrientation().setHeading(model.getOrientation().getHeadi

ng() - 1);

}

if (keyboard.pressed("w")) {

model.getLocation().setLatitude(model.getLocation().getLatitude()

+ premikGorDolc);

model.getLocation().setLongitude(model.getLocation().getLongitude(

) + premikGorDols);

}

if (keyboard.pressed("s"))

{model.getLocation().setLatitude(model.getLocation().getLatitude()

- premikGorDolc);


) - premikGorDols);

}

if (keyboard.pressed("a")) {

model.getLocation().setLatitude(model.getLocation().getLatitude()

- premikLevoDesnoc);


) - premikLevoDesnos);

}

if (keyboard.pressed("d")) {

model.getLocation().setLatitude(model.getLocation().getLatitude() +

premikLevoDesnoc);


) + premikLevoDesnos);

}

}

} catch (err) {}

setTimeout('premikObjekta()', 10); }

Premik izvedemo tako, da trenutni lokaciji objekta prištejemo premik po x-osi ter

premik po y-osi. Premik po x ter y-osi izračunamo glede na usmerjenost objekta

(slika 18).




Slika 18: Skica, premik

Premik naprej, nazaj:

Premik v x (premikGorDols)-smeri potem izrazimo takole:

(

)

Premik v y (premikGorDolc)-smeri:

(

)

Premik levo, desno:

Premik v x (premikLevoDesnos)-smeri izrazimo takole:

(

)

Premik v y (premikLevoDesnoc)-smeri:

(

)

Vrednost x prištejemo zemljepisni dolžini, vrednost y pa zemljepisni širini. V

primeru, da premikamo objekt naprej ali desno, vrednosti x in y prištejemo. Če

objekt premikamo dol ali levo, vrednosti x in y odštejemo.

usmerjenost

premik y

x

OBJEKT




4.2.2 Kamera

Drugi zavihek, ki ga lahko izberemo, je Kamera (slika 19). Le-ta nam omogoča

snemanje pozicij kamere z vmesnimi prehodi.

Slika 19: Zavihek Kamera

Kamero v vtičniku Google Earth postavimo na želeno mesto. V polje Čas prehoda

napišemo čas, ki ga kamera potrebuje, da pride do posnetega mesta, ter pritisnemo

gumb Posnemi. Pozicija kamere se nato shrani v seznam pozicij (slika 20).

Slika 20: Seznam pozicij

V primeru, da bi radi spremenili eno izmed pozicij, jo najprej dvakrat kliknemo na

seznamu. Kamera se bo postavila na že posneto pozicijo. Sedaj kamero prestavimo




tako, kot se nam zdi primerno, in pritisnemo gumb Shrani. Čas prehoda spremenimo

tako, da zbrišemo prejšnji čas in napišemo novega ter pritisnemo Shrani.

Če hočemo, da kamera stoji nekaj sekund, potem dodamo pavzo. V polje Pavza

vnesemo čas v sekundah, kolikor bo kamera na določeni poziciji mirovala. Nato

pritisnemo gumb Dodaj.

Slika 21 prikazuje točen pomeni prehodov in pavz. Na primer: za prvo točko dodamo

5-sekundni prehod, zatem sledi 5-sekundna pavza in potem 3-sekundni prehod na

naslednjo točko.

Slika 21: Prikaz snemanja animacije

Posneto si lahko ogledamo kadarkoli tako, da vstopimo v način predvajanja v

vtičniku. V delu predvajalnik, kliknemo gumb Vstopi. Na levi strani spodaj v

vtičniku se nam pojavi naslednje okno (slika 22), ki nam omogoča predvajanje poti,

po kateri potuje kamera:

Slika 22: Predvajalnik animacije

Predvajalnik zapremo z gumbom Izstop ali pa s križcem v samem predvajalniku.

Sedaj bomo predstavili programsko kodo, ki posname pozicije kamere in pripravi

KML-datoteko tako, da lahko predvaja animacijo.

PREHOD

Prva točka, ki smo jo posneli

PAVZA

Začetna točka

PREHOD

Druga točka, ki smo jo posneli

5 sekund 5 sekund 3 sekunde




Koda za izdelavo animacije:

V tej funkciji zberemo za vsako točko na poti naslednje podatke, ki so potrebni za

animacijo:

- čas prehoda,

- zemljepisno širino,

- zemljepisno dolžino,

- usmerjenost kamere,

- naklon kamere,

- višino kamere.

Te podatke zapišemo v tourPodatki, ki hrani vsak podatek za vsako točko na poti

posebej. V tabelo tourTabela pa zapišemo podatke v jeziku KML. Te podatke bomo

v naslednji funkciji sestavili v KML-datoteko.

function tourAnimacija() {

var cas = document.getElementById("tourCas").value;

var kameraZSirina;

var kameraZDolzina;

var kameraUsmerjenost;

var kameraNaklon;

var kameraVisina;

var kamera =

ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND) var tourTabela = new Array();

var tourPodatki = new Array();

tourPodatki[0] = new Array();

kameraZSirina = kamera.getLatitude();

kameraZDolzina = kamera.getLongitude();

kameraUsmerjenost = kamera.getHeading();

kameraNaklon = kamera.getTilt();

kameraVisina = kamera.getAltitude();

tourPodatki[g][0] = cas;

tourPodatki[g][1] = kameraZSirina;

tourPodatki[g][2] = kameraZDolzina;

tourPodatki[g][3] = kameraUsmerjenost;

tourPodatki[g][4] = kameraNaklon;

tourPodatki[g][5] = kameraVisina;

tourPodatki[g + 1] = new Array();

tourTabela[g] = '<gx:FlyTo>' + '<gx:duration>' + cas +

'</gx:duration>' + '<gx:flyToMode>smooth</gx:flyToMode>' +

'<Camera>' + '<longitude>' + kameraZDolzina + '</longitude>' +

'<latitude>' + kameraZSirina + '</latitude>' + '<altitude>' +

kameraVisina + '</altitude>' + '<heading>' + kameraUsmerjenost +

'</heading>' + '<tilt>' + kameraNaklon + '</tilt>' + '</Camera>' +

'</gx:FlyTo>';

g += 1;

kmlTour();

}




Sledeča koda bo sestavila KML-datoteko iz različnih komponent. Na začetek

postavimo začetni del KML-ja:

var kmlTourZacetek = '<?xml version="1.0" encoding="UTF-8"?>' +

'<kml xmlns="http://www.opengis.net/kml/2.2"' + "\r\n" +

'xmlns:gx="http://www.google.com/kml/ext/2.2">' + '<Document>' +

'<name>Animacija</name>' + '<open>1</open>' + '<gx:Tour>' +

'<name>Tour animation</name>' + '<gx:Playlist>';

Nato s funkcijo kmlTour v KML-datoteko po vrsti zapišemo podatke iz tabele

tourTabela.

function kmlTour() {

if (kmlTuraObject) {

ge.getFeatures().removeChild(kmlTuraObject);

kmlTuraObject = null;

}

kmlDatoteka = "";

kmlDatoteka += kmlTourZacetek;

for (j = 0; j <= g; j++) {

kmlDatoteka += tourTabela[j];

}

kmlDatoteka += kmlTourKonec;

kmlTuraObject = ge.parseKml(kmlTura);

ge.getFeatures().appendChild(kmlTuraObject);

walkKmlDom(kmlTuraObject, function () {

if (this.getType() == 'KmlTour') {

tour = this;

return false;

}

});}

Na koncu pa dodamo še ostalo, kar manjka, da bo KML-datoteka popolna: var kmlTourKonec = '</gx:Playlist>' + '</gx:Tour>' + '</Document>' +

'</kml>';

V spremenljivki kmlDatoteka so sedaj vsi potrebni podatki. Sedaj je potrebno te

podatke še razčleniti ter naložiti v vtičnik Google Earth. Na koncu razčlenjene

podatke naložimo v novo spremenljivko tour, ki jo bomo uporabljali za vstop v

predvajalnik.

Na koncu podajmo še primer sestavljene KML-datoteke z dvema vnosoma:

<?xml version="1.0" encoding="UTF-8" ?>



<Document>

<name>Primer kamera</name>

<open>1</open>




<gx:Tour>

<name>Primer kamera</name>

<gx:Playlist>

<gx:FlyTo>



<Camera>

<longitude>-30.153120716902443</longitude>



<heading>5.2438994808286585</heading>

<tilt>0</tilt>

</Camera>

</gx:FlyTo>

<gx:FlyTo>



<Camera>

<longitude>-18.175868188289044</longitude>

<latitude>-8.149395686565772</latitude>


<heading>16.23266385656759</heading>

<tilt>0</tilt>

</Camera>

</gx:FlyTo></gx:Playlist>

</gx:Tour>

</Document>

</kml>

4.2.3 Poti

Pod zavihkom Poti (slika 23) najdemo orodje, s katerim lahko naredimo poljubne

poti v Google Earthu.

Začnemo tako, da kliknemo gumb Nova. S tem smo prižgali opcijo, da lahko v

vtičniku Google Earth rišemo črte. To naredimo tako, da se postavimo na neko

lokacijo in pritisnemo ter držimo tipko CTRL. Medtem ko držimo tipko CTRL,

kliknemo na tisti del zemljevida, kjer bi radi postavili točko poti. Da tvorimo pot, sta

potrebni vsaj dve točki. V primeru, da smo postavili točko na napačno mesto,

pritisnemo gumb Razveljavi. Ko smo končali z risanjem črte, ji lahko dodamo še

ime, izberemo barvo in določimo debelino. Če smo zadovoljni z rezultatom

pritisnemo gumb Dodaj. Primer ustvarjene poti prikazuje slika 24.




Slika 23: Zavihek Poti

Slika 24: Prikaz primera poti




Če hočemo na določeni poti še kaj spremeniti, kliknemo nanjo na seznamu (slika 25)

in opravimo želene spremembe. Ko smo končali s spremembami, pritisnemo gumb

Shrani spremembo.

Slika 25: Prikaz seznama poti

Naša rešitev omogoča premikanje po izbrani poti. To naredimo tako, da na seznamu

poti dvakrat kliknemo na želeno pot. Zatem v meniju, v razdelku Sledenje poti,

kliknemo gumb Začni. Kamera sedaj sledi poti, ki smo jo narisali (slika 26). Imamo

tudi možnost izbire treh različnih hitrosti premikanja po izbrani poti, kjer se s

pritiskom na 1 premikamo najpočasneje, s pritiskom na 3 pa najhitreje.

Slika 26: Točka se premika po izbrani poti

Sedaj bomo podali in obrazložili kodo, ki omogoča risanje poti. Če hočemo s

klikanjem po zemljevidu narisati pot, moramo najprej vključiti poslušalca klikov

(listener). Ker nočemo, da bi vsak klik sprožil neko funkcijo, moramo držati

pritisnjeno še tipko CTRL. Če kliknemo takrat, ko držimo tipko CTRL, se zapišeta

zemljepisna širina in dolžina v začasno tabelo. Iz te tabele koordinat se tvori skupek




koordinat za vsako pot posebej, kjer vsaka pot dobi prostor v drugi tabeli, kjer so te

koordinate zapisane na sledeči način:

14.306721687316895,46.165340423583984,0

14.306774139404297,46.165061950683594,0

14.30695915222168,46.1650276184082,0

14.307188987731934,46.16535949707031,0

14.306876182556152,46.16546630859375,0

14.306966781616211,46.165771484375,0

14.307467460632324,46.165916442871094,0

Ko končamo risanje poti, se koordinate iz začasne tabele pobrišejo tako, da je ta

pripravljena za vnos nove poti. Takrat se tudi postavi števec klikov na 0 ter zmanjša

tabelo tako, da ima samo eno prazno mesto.

Primer kode za risanje poti:

google.earth.addEventListener(ge.getGlobe(), 'click', eventHandler

);

var eventHandler = function (event) {

if (event.getCtrlKey() == true) {

var plong = event.getLongitude();

var plat = event.getLatitude();

tabelaPath[p][0] = plong;

tabelaPath[p][1] = plat;

p += 1;

tabelaPath[p] = new Array();

kmlPot();

event.preventDefault();

setTimeout(function () {}, 0);

}

}

google.earth.removeEventListener(ge.getGlobe(),'click',eventHandler

);

p=0;

tabelaPath.length=1;

Ta skupek koordinat se potem prilepi v KML-datoteko, ki se jo ob vsakem kliku

osveži. KML-datoteko izdelamo tako, da ji dodamo:

- začetni del KML;

- začetni del, ki je potreben, da nam izrisuje pot;

- koordinate poti;

- končni del, ki je potreben, da nam izrisuje pot;

- končni del KML.




Koda za ustvarjanje KML-datoteke poti:

function kmlPot() {

var pathZacetekKml = '<?xml version="1.0" encoding="UTF-8"?><kml

xmlns="http://www.opengis.net/kml/2.2"' + '

xmlns:gx="http://www.google.com/kml/ext/2.2">' + '<Document>' ;

var pathPlacemarkZacetek = '<LineString>' + '<tessellate>1

</tessellate>' + '<altitudeMode> clampToGround </altitudeMode>' +

'<coordinates>';

var pathPlacemarkKonec='</coordinates>' + '</LineString>' +

'</Placemark>';

var pathKonecKml = '</Document>' + '</kml>';

if (parsedPathKml) {

ge.getFeatures().removeChild(parsedPathKml);


}

for (j = 0; j < p; j++) {

tabelaKoordinateLine[steviloLineString] += tabelaPath[j][0] + ","

+ tabelaPath[j][1] + ",0 "

}

pathKml = "";

if (tabelaKoordinateLine[0] !=""){

pathKml += pathZacetekKml;

for (k=0;k<=steviloLineString;k++){

pathKml +=<Placemark id="path'+ k +'">';

pathKml +='<name>'pot'</name>'+ pathPlacemarkZacetek;

pathKml +=tabelaKoordinateLine[k];

pathKml +=pathPlacemarkKonec;

}

pathKml += pathKonecKml;

parsedPathKml = ge.parseKml(pathKml);

ge.getFeatures().appendChild(parsedPathKml);

}

Primer datoteke, ki vsebuje eno pot, prikazuje sledeča koda:

<?xml version="1.0" encoding="UTF-8" ?>



<Document>

<Placemark id="path">

<name>"pot"</name>

<LineString>

<tessellate>1</tessellate>

<altitudeMode>clampToGround</altitudeMode>

<coordinates>




14.306721687316895,46.165340423583984,0

14.306774139404297,46.165061950683594,0

14.30695915222168,46.1650276184082,0

14.307188987731934,46.16535949707031,0

14.306876182556152,46.16546630859375,0

14.306966781616211,46.165771484375,0

14.307467460632324,46.165916442871094,0

</coordinates>

</LineString>

</Placemark>

</Document>

</kml>

Ko je pot določena, lahko izvedemo vizualizacijo gibanja po tej poti. S tem, ko smo

določili pot, imamo podane koordinate točk na tej poti. Glede na te točke najprej

izračunamo usmerjenost. Usmerjenost dobimo z razdaljami med točkama po oseh x

in y (slika 27).

Slika 27: Določanje usmejenosti – poti med dvema točkama

Najprej izračunamo oddaljenost med točkama po x ter y-osi:

Iz tega lahko dobimo usmerjenost s pomočjo enačbe:

Vendar to ne velja v vseh primerih. V primeru, da sta x in y negativna, torej, če je

ciljna točka 2 levo in spodaj glede na začetno točko 1 (slika 28), dobimo isto

usmerjenost kot takrat, ko sta x in y pozitivna. Na primer, če je x √ ter y = –3,

potem je usmerjenost 30°, kar je ista usmerjenost, kot če je x = √ ter y = 3. V obeh

primerih, bi se nam zato objekt premikal od točke 1 do točke 3. To rešimo na

naslednji način:

usmerjenost

1

2

y

x




S tem bomo dosegli premik proti točki 2 tudi v primeru, če bosta x in y negativna, saj

smo obrnili smer za 180°.

Slika 28: Sledenje poti, ko sta x in y negativna

Naslednja problematična situacija je, ko je x pozitiven in y negativen (slika 29).

Objekt se nam bo premaknil proti točki 3, saj je usmerjenost enaka, kot če je x

negativen in y pozitiven. Zato naredimo enako kot v prejšnjem primeru:

S tem bomo dosegli premik proti točki 2 tudi v primeru, če bosta x pozitiven in y

negativen, saj smo obrnili smer za 180°.

Slika 29: Sledenje poti, ko je x pozitiven in y negativen

1

2

Y negativen

X negativen 3

X pozitiven

Y pozitiven

1

2

Y negativen

X negativen

3 X pozitiven

Y pozitiven




Zadnja problematična situacija je, ko je začetna točka nad končno točko (slika 30). V

obeh primerih dobimo usmerjenost 0, saj delimo ničlo in se zato premikamo proti

točki 3. Zato v primeru, da je x = 0 in y negativen, storimo sledeče:

V primeru, da bi bil x pozitiven ali negativen ter y = 0, pa ni težav. Če je x pozitiven,

dobimo usmerjenost 90°, če pa je x negativen, pa dobimo usmerjenost –90°.

Slika 30: Sledenje poti, ko je x = 0 in je y negativen

Sedaj se lahko premikamo v pravi smeri, vendar smo vezani samo na prvi dve točki

poti. Da se lahko premikamo med poljubnim številom točk, naredimo naslednje:

Izračunamo razdalje med točkami:

| | | |

Ti dve razdalji bomo primerjali s to, ki jo je objekt že prepotoval. Vsakič, ko je

opravljen premik, ta premik prištejemo prepotovani razdalji.

V primeru, da so premiki izvedeni po x in y-osi, nam ni potrebno primerjati obeh

razdalj. Če je usmerjenost 90° ali 270°, potem primerjamo razdaljo X ter

prepotovano razdaljo X. Če je usmerjenost 180°, primerjamo razdaljo Y ter

prepotovano razdaljo Y.

1

2

Y negativen

3

Y pozitiven




Ko je prepotovana razdalja večja ali enaka od razdalje med točkama, preskočimo na

naslednjo točko. Ker prepotovana razdalja in dejanska razdalja med dvema točkama

zaradi interpolacije pri premikanju nista vedno natančno enaki, je potrebno takrat, ko

je prepotovana razdalja večja od dejanske razdalje, postaviti objekt točno na točko

(slika 31). Na primer, da se objekt znajde v točki x, ki je dlje od točke 2. V tem

primeru ga moramo prestaviti v točko 2. Če tega ne storimo, pride do odstopanj pri

izračunih in se lahko objekt premika stran od črte.

Slika 31: Odstopanje pri sledenju poti

Na koncu podajmo še kodo, ki omogoča gibanje po izbrani poti.

Primer kode za sledenje poti:

function followPath() {

if (!pathPaused) {

razlikaLongitude = tabelaPath[stevecPath + 1][0]-

tabelaPath[stevecPath][0];

razlikaLatitude = tabelaPath[stevecPath + 1][1]-

tabelaPath[stevecPath][1];

pathHeading = parseFloat(Math.atan(razlikaLongitude /

razlikaLatitude));

if (razlikaLatitude < 0 && razlikaLongitude < 0) {

pathHeading = pathHeading + Math.PI;

}

if (razlikaLatitude < 0 && razlikaLongitude > 0) {


}

if (razlikaLatitude < 0 && razlikaLongitude == 0) {


}

point.setLongitude(point.getLongitude() + hitrost *

Math.sin(pathHeading));

point.setLatitude(point.getLatitude() + hitrost *

Math.cos(pathHeading));

nlong += Math.abs(hitrost * Math.sin(pathHeading));

nlat += Math.abs(hitrost * Math.cos(pathHeading));

RAZDALJA

PREMIK PREMIK PREMIK PREMIK

A

A

Odstopanje

1 2 x




camera(point.getLongitude(), point.getLatitude(), parseFloat((360

* pathHeading) / (2 * Math.PI)), 4.99999976);

switch (pathHeading) {

case Math.PI / 2:

if (Math.abs(razlikaLongitude) >= nlong) {

setTimeout(followPath, timeout);

}

else {

if ((tabelaPath.length - 2) > stevecPath) {

nlong = 0;

nlat = 0;

point.setLongitude(parseFloat(tabelaPath[stevecPath +

1][0]));

point.setLatitude(parseFloat(tabelaPath[stevecPath +

1][1]));

stevecPath += 1;


}

}

break;

case Math.PI:

if (Math.abs(razlikaLatitude) >= nlat) {


}

else {


nlong = 0;

nlat = 0;


1][0]));


1][1]));

stevecPath += 1;


}

}

break;

case - Math.PI / 2:



}

else {


nlong = 0;

nlat = 0;


1][0]));


1][1]));

stevecPath += 1;


}

}




break;

break;

default:

if (Math.abs(razlikaLongitude) >= nlong &&

Math.abs(razlikaLatitude) >= nlat) {


}

else {


nlong = 0;

nlat = 0;


1][0]));

point.setLatitude(parseFloat(tabelaPath[stevecPath + 1][1]));

stevecPath += 1;


}}}}}

4.2.4 Funkcija popravi in dodaj

Slabost vtičnika Google Earth je, da se velikokrat iz različnih razlogov zruši. Takrat

se pojavi sledeča slika (slika 32):

Slika 32: Napaka pri vtičniku Google Earth

Neprijetna posledica napake v vtičniku je lahko, da izgubimo vse dosedanje delo in

moramo začeti znova. V ta namen smo v vmesnik dodali opcijo Popravi in dodaj

(slika 33), ki nam omogoča, da povrnemo zadnje stanje. Povrne nam vse objekte in

vse narejene poti. Ker je vtičnik Google Eart še vedno v razvojni fazi, je povrnitev




nastavitev kamere, na način kot je izvedena povrnitev objektov in poti, trenutno še

nemogoča.

Slika 33: Zavihek Popravi in dodaj

Ko pride do težav z vtičnikom Google Earth, kliknemo na gumb Prikaži. V oknu se

prikaže KML-tekst, ki ga kopiramo na odložišče. Spletno stran v brskalniku

osvežimo in počakamo, da se vtičnik Google Earth dokončno naloži. Ko je le-ta

naložen, prilepimo vsebino iz odložišča v isto okno, od koder smo vsebino prej

kopirali. Nato kliknemo gumb Popravi. Prikaže se naslednje okno (slika 34), ki

pokaže uspešnost obnovitve:

Slika 34: Prikaz števila obnovljenih objektov in poti

Pod zavihkom Popravi in dodaj je še opcija Naloži KML datoteko. Naložimo lahko

katerokoli KML-datoteko, ki je na spletu. V URL-okno kopiramo spletni naslov in

pritisnemo gumb Naloži. Če je naslov pravilen, se nam bo na vtičniku Google Earth

prikazala vsebina KML-datoteke.

Sedaj bomo predstavili kodo, s katero povrnemo izgubljeno stanje, če se vtičnik

Google Earth zruši. Za ponastavitev je potrebnih več korakov:

- V vtičnik Google Earth naložimo KML-vsebino.

- Preštejemo, koliko elementov nečesa je naloženega. Na primer, z vsebino

KML smo naložili tri objekte.




- Ker smo vsakemu objektu ali poti dali svojo identifikacijsko številko, lahko

na ta način pridobimo podatke od vsakega objekta ali poti posebej.

- Pridobljene podatke naložimo v vse tabele, saj hočemo, da je stanje natančno

tako, kot je bilo preden se je vtičnik Google Earth zrušil. Poleg tega podatke

naložimo tudi v sezname.

- Nastavimo števce poti in objektov. Če imamo tri objekte, nastavimo števec na

tri.

Koda za povrnitev podatkov:

function importKml() {

var kmlVsebina = document.getElementById("textboxPopravi").value;

var ls_stVnosov;

var ls_stTock;

var ls_Ime;

var ls_Barva;

var listboxLine= document.getElementById("lineList");

var vnosLine ;

var model;

var model_stVnosov;

var model_nazivObjekta;

var model_opisObjekta;

var model_Latitude;

var model_Longitude;

var model_Link;

var model_Heading;

var listboxModel = document.getElementById("objectList")

var vnosModel = document.createElement("Option");

var linestring;

var style;

kml = ge.parseKml(kmlVsebina);

ge.getFeatures().appendChild(kml);

Koda za povrnitev stilov:

ls_stVnosov = ge.getElementsByType("kmlLineString").getLength();

for (j=0;j<ls_stVnosov;j++){

linestring = ge.getElementByUrl("#path"+j);

style = ge.getElementByUrl("#style"+j).getLineStyle();

lineStyle[j][0]=style.getColor().get();

lineStyle[j][1]=style.getWidth();

lineStyle[j][2]=linestring.getName();

lineStyle[j+1]=new Array();

vnosLine = document.createElement("Option");

vnosLine.text = linestring.getName();

vnosLine.value = linestring.getName();




listboxLine.add(vnosLine);

steviloLineString+=1;

Koda za povrnitev poti:

ls_stTock = linestring.getGeometry().getCoordinates().getLength()

tabelaKoordinateLine[j] ="";

for (k=0;k<ls_stTock;k++){

tabelaPath[k][0]=

linestring.getGeometry().getCoordinates().get(k).getLongitude()

tabelaPath[k][1]=

linestring.getGeometry().getCoordinates().get(k).getLatitude();

tabelaKoordinateLine[j] += tabelaPath[k][0] + "," +

tabelaPath[k][1] + ",0 ";

tabelaPath[k+1] = new Array();

}

}

Koda za povrnitev modelov:

model_stVnosov = ge.getElementsByType("kmlModel").getLength();

for (j=0;j<model_stVnosov;j++){

model = ge.getElementByUrl("#model"+j);

model_nazivObjekta = model.getName();

model_opisObjekta = model.getDescription();

model = model.getGeometry();

model_Latitude = model.getLocation().getLatitude();

model_Longitude = model.getLocation().getLongitude();

model_Link = model.getLink().getHref();

model_Heading = model.getOrientation().getHeading();

vnosModel = document.createElement("Option");

vnosModel.text = model_nazivObjekta;

vnosModel.value = model_nazivObjekta;

listboxModel.add(vnosModel);

i+=1;

ge.getFeatures().removeChild(kml);

KML-podatki modelov:

objektiTabela[j] = '<name>' + model_nazivObjekta + '</name>' +

'<description>' + model_opisObjekta + '</description>' + '<Model>'

+ '<altitudeMode>relativeToGround</altitudeMode>' + '<Location>' +

'<longitude>' + model_Longitude + '</longitude>' + '<latitude>' +

model_Latitude + '</latitude>' + '<altitude>0</altitude>' +

'</Location>' + '<Orientation>' + '<heading>' + model_Heading +

'</heading>' + '</Orientation>' + '<Link>' + '<href>' + model_Link

+ '</href>' + '</Link>' + '</Model>' + '</Placemark>';

}

Združeni KML-podatki poti in stilov:

pathKml = "";




if (tabelaKoordinateLine[0] !=""){


for (k=0;k<steviloLineString;k++){

pathKml +='<Style

id="style'+k+'">'+'<LineStyle>'+'<color>'+lineStyle[k][0]+'</co

lor>'+ '<width>'+lineStyle[k][1]+'</width>'+'</LineStyle>' +'

</Style>'+'<Placemark id="path'+ k +'">';

pathKml +='<name>'+lineStyle[k][2]+'</name>' +

'<styleUrl>#style'+k+'</styleUrl>'+ pathPlacemarkZacetek;

pathKml +=tabelaKoordinateLine[k];

pathKml +=pathPlacemarkKonec;

}




}

kmlModel = "";

kmlModel += kmlZacetek;

for (j = 0; j < model_stVnosov; j++) {

kmlModel += '<Placemark id="model' + j + '">'

kmlModel += objektiTabela[j];

}

kmlModel += kmlKonec;

parsedkmlModel = ge.parseKml(kmlModel);

ge.getFeatures().appendChild(parsedkmlModel);

alert("Število obnovljenih poti: " + ls_stVnosov + "\n" + "Število

obnovljenih objektov: "+ model_stVnosov);}




5 PRIMER EVAKUACIJSKEGA OKOLJA

Do sedaj smo predstavili osnove izdelave 3D-okolja v Google Earthu. S

pridobljenimi osnovami lahko izdelamo preprost primer evakuacijskega okolja, kot

je prikazan iz dveh perspektiv na sledečih slikah (slika 35 in slika 36).

V model okolja smo dodali štiri vrste objektov: stolpnice, nizke bloke in dva tipa

stanovanjskih hiš. Objekte smo razporedili v strnjeno naselje. Med objekti smo

narisali črte, ki predstavljajo možne evakuacijske poti, in vsako pot pobarvali z drugo

barvo, da je takoj razvidno, kje katera pot poteka.

Ko je scenarij postavljen, si lahko za vsako pot posebej ogledamo, kje poteka, tako

da ji sledimo s funkcijo sledenja (slika 37).

Slika 35: Primer evakuacijskega okolja 1




Slika 36: Primer evakuacijskega okolja 2

Slika 37: Sledenje med zgradbami




6 ZAKLJUČEK

V diplomskem delu smo predstavili razvoj spletne rešitve, ki omogoča poustvarjanje

3D-okolja v vtičniku Google Earth. Spletno rešitev smo razvili s pomočjo

odprtokodne oz. prosto dostopne programske opreme, kar pomeni zelo ekonomično

rešitev. Hkrati je spletna rešitev neodvisna od platforme, saj je dostopna od kjerkoli,

kar je izrednega pomena za ekipe, ki delujejo na kriznih področjih, kjer je po navadi

mogoč dostop do spleta le preko mobilnih naprav.

Razvita spletna rešitev omogoča iskanje lokacij, uvoz in postavitev tridimenzionalnih

COLLADA-objektov, risanje poti in njihovo predstavitev. Uvoz in postavitev

tridimenzionalnih objektov je ključnega pomena za učinkovito vizualizacijo kriznega

okolja, iz katerega je možno razbrati različne evakuacijske poti in na podlagi tega

izbrati optimalno. Hkrati je omogočena še vizualizacija potovanja po izbrani poti, kar

doda še dodatno težo učinkovitosti razvite rešitve, saj lahko na ta način krizna ekipa

predvidi morebitne nevšečnosti, ki bi se lahko pojavile na tej poti.

Nadaljnje delo bo potekalo v smeri integracije spletnega vmesnika v sistem za

podporo odločanju v kriznih situacijah (SPOKS). Potrebno bo ustvariti vmesnik, ki

prebere podatke o kriznem okolju in situaciji iz SPOKS-a in jih pretvori v format

KML, primeren za prikaz v razvitem spletnem vmesniku. S tem bomo pridobili

močno vizualizacijsko orodje, ki bo odločilno pripomoglo pri iskanju optimalnih

evakuacijskih poti na kriznih območjih. Za uporabo v realnih situacijah je poleg

omenjenega potrebno nasloviti tudi dostopnost in avtonomnost rešitve v primeru

izpada omrežja.




LITERATURA IN VIRI

Drnovšček, M. (2010). Možnost predstavitve različnih prostorskih podatkov v

Google Earth, diplomsko delo. Univerza v Ljubljani, Fakulteta za gradbeništvo in

geodezijo.

Flanagan, D. (2006). JavaScript – The Definitive Guide. O'Reilly.

Google Code Playground. (21. 7. 2012). Pridobljeno iz

http://code.google.com/apis/ajax/playground/

Google Developers – Google Earth API Developer's Guide. (21. 7. 2012).

Pridobljeno iz https://developers.google.com/earth/documentation/index

Google Developers – Google Earth API Reference. (21. 7. 2012). Pridobljeno iz

https://developers.google.com/earth/documentation/reference/

Google Developers – KML Documentation. (21. 7. 2012). Pridobljeno iz

https://developers.google.com/kml/documentation/

Google Earth Vtičnik. (23. 7. 2012). Pridobljeno iz

http://www.google.com/earth/explore/products/plugin.html

Google Zemlja. (15.7.2012). Pridobljeno iz http://www.google.com/earth/index.html

Heilmann, C. (2006). Beginning JavaScript with Dom Scripting and Ajax: From

Novice to Professional. United States of America: Apress.

Node.js.(1. 8. 2012). Pridobljeno iz http://nodejs.org

Notepad++. (15. 7. 2012). Pridobljeno iz http://notepad-plus-plus.org/

Škraba, A., Stojanović, R., De Amicis, R., Berkowicz, S., Conti, G., Elhanani, D.,

Lekić, N., Dragović, M., Kofjač, D. (2012) Integrating air-pollution dispersion

simulation models and GIS for urban air-pollution emergency management. V:

Breitenecker, F. (ur.), Troch, I. (ur.). 7th Vienna Conference on Mathematical

Modelling, February 15–17, 2012, Vienna University of Technology, Austria.

MATHMOD Vienna 2012: (ARGESIM Report, no. S38). Vienna: ARGESIM, cop.

2012, 4 str. Dostopno

na: http://seth.asc.tuwien.ac.at/proc12/full_paper/Contribution177.pdf (31. 7. 2012).

w3schools CSS. (21. 7. 2012). Pridobljeno iz http://www.w3schools.com/css/

w3schools HTML. (21. 7. 2012). Pridobljeno iz

http://www.w3schools.com/html/default.asp

http://seth.asc.tuwien.ac.at/proc12/full_paper/Contribution177.pdf




w3schools Learn Javascript. (21. 7. 2012). Pridobljeno iz

http://www.w3schools.com/js/

w3schools PHP file upload. (21. 7. 2012). Pridobljeno iz

http://www.w3schools.com/php/php_file_upload.asp

WampServer. (15. 7. 2012). Pridobljeno iz http://www.wampserver.com/en/

Wikipedia CSS. (25. 7. 2012). Pridobljeno iz http://en.wikipedia.org/wiki/Css

Wikipedia HTML. (25. 7. 2012). Pridobljeno iz http://en.wikipedia.org/wiki/HTML

Wikipedia HTML5. (25. 7. 2012). Pridobljeno iz

http://en.wikipedia.org/wiki/HTML5

Wikipedia KML. (25. 7. 2012). Pridobljeno iz

http://en.wikipedia.org/wiki/Keyhole_Markup_Language

Wikipedia Notepad++. (25. 7. 2012). Pridobljeno iz

http://en.wikipedia.org/wiki/Notepad%2B%2B

Wikipedia PHP. (25. 7. 2012). Pridobljeno iz http://en.wikipedia.org/wiki/PHP

Wikipedia SVG. (25. 7. 2012). Pridobljeno iz

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Wikipedia XUL. (25. 7. 2012). Pridobljeno iz http://sl.wikipedia.org/wiki/XUL

Zaveršnik, M. (25. 7. 2012). HTML. Pridobljeno iz http://zaversnik.fmf.uni-

lj.si/gradiva/html/uvod/razlicice.php




PRILOGE

- Programska koda.




KAZALO SLIK

Slika 1: KML-podmape ............................................................................................... 3

Slika 2: Prikaz točke .................................................................................................... 4

Slika 3: Razlika med načini prikaza višine absolute ter relativeToGround ................. 5

Slika 4: Naklon kamere ................................................................................................ 6

Slika 5: Prikaz hitrosti v načinu smooth ...................................................................... 7

Slika 6: Prikaz hitrosti v načinu bounce ...................................................................... 7

Slika 7: Funkcija Tessellate je izklopljena .................................................................. 9

Slika 8: Funkcija Tessellate je vklopljena ................................................................... 9

Slika 9: Zapis barve v KML-formatu .......................................................................... 9

Slika 10: Prikaz načina lookAt

(https://developers.google.com/kml/documentation/images/lookAtRevised.gif,

(21.7.2012) ................................................................................................................. 13

Slika 11: Spletni vmesnik .......................................................................................... 19

Slika 12: Iskalnik lokacij ........................................................................................... 20

Slika 13: Zavihek Objekti .......................................................................................... 21

Slika 14: Decimalni vnos lokacije objekta ................................................................ 22

Slika 15: Vnos lokacije objekta s stopinjami, minutami, sekundami ........................ 22

Slika 16: Prikaz objekta v vtičniku Google Earth ...................................................... 22

Slika 17: Prikaz objekta na seznamu objektov .......................................................... 23

Slika 18: Skica, premik .............................................................................................. 25

Slika 19: Zavihek Kamera ......................................................................................... 26

Slika 20: Seznam pozicij ............................................................................................ 26

Slika 21: Prikaz snemanja animacije ......................................................................... 27

Slika 22: Predvajalnik animacije ............................................................................... 27

Slika 23: Zavihek Poti ................................................................................................ 31

Slika 24: Prikaz primera poti ..................................................................................... 31

Slika 25: Prikaz seznama poti .................................................................................... 32

Slika 26: Točka se premika po izbrani poti ............................................................... 32

Slika 27: Določanje usmejenosti – poti med dvema točkama ................................... 35

Slika 28: Sledenje poti, ko sta x in y negativna ......................................................... 36

Slika 29: Sledenje poti, ko je x pozitiven in y negativen ........................................... 36

Slika 30: Sledenje poti, ko je x = 0 in je y negativen ................................................ 37

Slika 31: Odstopanje pri sledenju poti ....................................................................... 38

Slika 32: Napaka pri vtičniku Google Earth .............................................................. 40

Slika 33: Zavihek Popravi in dodaj ............................................................................ 41

Slika 34: Prikaz števila obnovljenih objektov in poti ................................................ 41

Slika 35: Primer evakuacijskega okolja 1. ................................................................. 45

Slika 36: Primer evakuacijskega okolja 2. ................................................................. 46

Slika 37: Sledenje med zgradbami ............................................................................. 46




KAZALO TABEL

Tabela 1: Sestava KML .............................................................................................. 2

Tabela 2: Bistvene značke za postavitev kamere ......................................................... 6

Tabela 3: Funkcije za pridobitev podatkov o Placemarku ......................................... 11

Tabela 4: Pridobitev podatkov o točki ....................................................................... 12

Tabela 5: Pridobitev podatkov o prvoosebnem pogledu ........................................... 13

Tabela 6: Pridobitev podatkov modela ...................................................................... 14

Tabela 7: Pridobitev podatkov poti ............................................................................ 15

Tabela 8: Sprememba pozicije poti ........................................................................... 15

Programska koda

<html>



<style type="text/css">

h1 {

text-align:center;

font-family:"Trebuchet MS";

font-style:oblique

}

label {


float: left;

text-align: left;

margin-top: 3px;

margin-left: 10px;

color: dark grey;

font-style: bold;

font-size: 10;

}

label.c {


font-size:12;

color:black;

}

input.vnos {

width:40px;

height:20;

font-size:10;

margin:0px;

}

input.button:hover {

background-color:#FF9933;

}

input.button {

width:53px;

height:20px;

margin-left:5px;

border-radius:5px;


font-size: 10;

border-color: #000000;

border-width: 1px;

background-color: # F0F0F0;

}

.center {

margin-left: auto;

margin-right: auto;

width: 1280;

font-size: 10;

}

a.linkP {


text-decoration: none;

font-size: 10;

font-weight: bold;

}

a.linkP:link {

color: #000000;

}

a.linkP:visited {

color:#000000;

}

a.linkP:hover {

color: #FF5500;

}

a.linkP:active {

color: #000000;

}

HR {

width: 220px;

align:left;

}

</style>



<script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js"

type="text/javascript"></script>



<script src="http://www.google.com/jsapi?key=AIzaSyACTr7iV7vf2MvpbHQ9Cw4rvX1GuqqzQlo"

type="text/javascript"></script>



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



<script src="THREEx.KeyboardState.js"></script>

<head></head>

<body onLoad="start()">

<div class="center">



<iframe src="upload_file.php" id="okvir" name="okvir" width="0" height="0"

style="hidden" frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>



<label for="naziv" class="c" style="text-align:right; margin-right:10px">Iskalnik:</label>

<input type="text" id="location" />

<input type="button" class="button" style="vertical-align: 1px" onClick="pojdiNaLokacijo()"

value="Najdi" />

<br>



<div id="map3d" style="float:left; height:800; width:900;"></div>



<a href="#" onclick="div_Objekti();podcrtanMeni=0;meniPodcrtan();return false;"

class="linkP" style="margin-left:10px;" id="menuObjects">OBJEKTI</a>

<a href="#" onclick="div_Animacija();podcrtanMeni=1;meniPodcrtan();return false;"

class="linkP" style="margin-left:5px;" id="menuCamera">KAMERA</a>

<a href="#" onclick="div_Poti();podcrtanMeni=2;meniPodcrtan();return false;"

class="linkP" style="margin-left:5px;" id="menuPath">POTI</a>

<a href="#" onclick="div_Popravi();podcrtanMeni=3;meniPodcrtan();return false;"

class="linkP" style="margin-left:5px;" id="menuRepair">POPRAVI in DODAJ</a>

<hr align="left" />



<div id="div_objekti">

<input type="button" class="button" value="Nov objekt" onClick="novObjekt()"

style="margin-bottom:5px; width:85px;" id="novObjekt" />

<input type="button" style="width:85px;" onClick="kmlModelParse()" value="Osveži"

class="button" />

<br>

<select name="objekti" id="objectList"

style="margin-left:10px; margin-bottom:5px;width:166px; height:120px"

multiple="multiple" ondblclick="pojdiNaObjekt()" onClick="pridobiPodatke()"></select>

<br>

<input type="button" value="Uredi" class="button" onClick="urediObjekt()"

id="uredi" />

<input type="button" value="Shrani" onClick="shraniKml()" class="button"

id="shrani" />

<input type="button" onClick="brisiKML()" value="Briši" class="button"

id="brisi" />

<div id="div_objektiStart">

<form id="formNaziv">

<br>

<label for="naziv" style="width:50px" class="c">Naziv:</label>

<br>

<br>

<input type="text" id="nazivObjekta" style="width:166px; margin-left:10px"

/>

<br>

<br>

<label for="opis" style="width:50px" class="c">Opis:</label>

<br>

<br>

<textarea style="width:166px; resize:none; margin-left:10px" rows="3"

id="opisObjekta"></textarea>

<br>

</form>

<div id="div_radio">

<hr align="left" width="50%" />

<label for="zs" class="c">Stopinje, minute, sekunde:</label>

<input type="radio" name="sirinaRadio"

id="koorSMS" onClick="skrijDecimal()" />

<br>

<br>

<label for="zs" class="c">Decimalno</label>

<input type="radio" name="sirinaRadio" id="koorDec" onClick="prikaziDecimal()"

/>

<br>

</div>


<div id="formSMS">

<form id="formSMS">

<label for="zs" class="c">Zemljepisna širina:</label>

<br>

<br>

<input class="vnos" type="text" id="stopinjes" maxlength=2

onKeyPress="return numbersonly(this, event)"

style="margin-left:10px" />

<input class="vnos" type="text" id="minutes" maxlength=2


/>

<input class="vnos" type="text" id="sekundes"


/>

<select style="width:40px" id="sirina" name="sirina">

<option value="S">S</option>

<option value="J">J</option>

</select>

<br>

<br>

<label for="zd" class="c">Zempljepisna dolžina:</label>

<br>

<br>

<input class="vnos" type="text" id="stopinjed" maxlength=2



<input class="vnos" type="text" id="minuted" maxlength=2


/>

<input class="vnos" type="text" id="sekunded"


/>

<select style="width:40px" id="dolzina">

<option value="V">V</option>

<option value="Z">Z</option>

</select>

</form>

</div>

<div id="formDecimal">

<form id="formDecimal">

<label for="dec" class="c">Zemljepisna širina:</label>

<br>

<br>

<input class="vnos" type="text" id="sirinaDecimal"

style=" margin-left:10px; width:126px"

onKeyPress="return numbersonly(this, event)">

<br>

<br>

<label for="dec2" class="c">Zemljepisna dolžina:</label>

<br>

<br>

<input class="vnos" type="text" id="dolzinaDecimal"

style=" margin-left:10px; width:126px"

onKeyPress="return numbersonly(this, event)" />

</form>

</div>


<label for="usmerjenost" class="c">Usmerjenost:</label>

<br>

<br>

<input type="text" style="margin-left:10px; width:90px" id="heading"


/>

</div>


<div id="div_poslji">

<form action="upload_file.php" method="post" enctype="multipart/form-data"

target="okvir" id="formUpload">

<label class="c" for="file">Datoteka:</label>

<br>

<br>

<input type="file" name="file" id="file" style="margin-left:10px" />

<br>

<br>

<input class="button" type="submit" value="Pošlji" style="margin-left:10px"

onClick="posljiObjekt()" />

<input type="button" value="Prekliči" class="button" onClick="prekliciNovObjekt()"

/>

<br>

</form>

</div>

</div>



<div id="div_popravi">

<textarea style="width:200px; margin-left:10px" rows="8" id="textboxPopravi"></textarea>

<br>

<input type="button" class="button" style="margin-left:10px" value="Prikaži"

onClick="exportKML()" />

<input type="button" class="button" value="Popravi" onClick="importKml()"

/>

<br>

<hr align="left" />



<label for="labelNaloziKml" class="c">Naloži KML datoteko:</label>

<br>

<br>

<label for="barva" class="c">Barva:</label>

<br>

<br>

<input class="color" onChange="kmlPath();applyPath();" id="barvaPoti"


<br>

<br>

<label for="debelina" class="c">Debelina:</label>

<br>

<br>

<input type="text" id="debelinaCrte" style=" width:36px;margin-left:10px;"

/>

<input type="button" value="-" onClick="debelinaCrteMinus()" style="width:20px;"

class="button" />

<input type="button" value="+" onClick="debelinaCrtePlus()" style="width:20px"

class="button" />

<br>

<br>

<input type="button" class="button" value="Shrani spremembo" style="width:100px"

onClick="applyPath()" />

<br>

<br>


<label for="debelina" class="c">Sledenje poti:</label>

<br>

<br>

<input type="button" class="button" value="Začni" onClick="contPath()"

/>

<input type="button" class="button" value="Ustavi" onClick="pausePath()"

/>

<br>

<br>

<label for="debelina" class="c">Hitrost</label>

<br>

<br>

<input type="button" class="button" style="width=30px" value="1"

onClick="hitrost = 0.0000025;"

/>



/>



/>

<br>

<br>

</div>

<label for="narisiPot" id="narisiPot" class="c" style="color:red">Narišite pot!</label>

<br>

<br>

</div>



<div id="div_animacija">

<label for="lblcas" class="c">Čas prehoda:</label>

<br>

<br>

<input type="text" id="tourCas" style="width:116px; margin-left:10px"

maxLength="3" onKeyPress="return numbersonly(this, event)" />

<input type="button" class="button" onClick="tourAnimacija()" value="Posnemi"

/>

<br>

<br>

<select name="objekti" id="tourList"

style="margin-left:10px; margin-bottom:5px;width:166px; height:120px"

multiple="multiple" onClick="izberiTour()" ondblClick="pojdiNaTour()"></select>

<br>

<input type="button" class="button" onClick="urediTour()" value="Shrani"

/>

<input type="button" class="button" id="brisiTour" onClick="brisiTour()"

value="Briši" />

<br>

<br>


<label for="lblcas" class="c">Pavza:</label>

<br>

<br>

<input type="text" id="tourPause" style="width:116px; margin-left:10px"

maxLength="3" onKeyPress="return numbersonly(this, event)" />

<input type="button" class="button" onClick="tourPavza()" value="Dodaj"

/>

<br>


<label for="lblcas" class="c">Predvajalnik:</label>

<br>

<br>

<input type="button" class="button" value="Vstop" id="startTour" onClick="startTour()"

/>

<input type="button" class="button" onClick="stopTour()" value="Izstop"

/>

</div>

</div>

</body>

<title>KML, Google Earth</title>

<script type="text/javascript" src="https://www.google.com/jsapi">

</script>


//zagon Google Earth vtičnika

var ge;

google.load("earth", "1");

function init() {

google.earth.createInstance('map3d', initCB, failureCB);

}

function initCB(instance) {

ge = instance;

ge.getWindow().setVisibility(true);

google.earth.addEventListener(ge.getGlobe(), 'click', eventLokacija);

}

function failureCB(errorCode) {}

google.setOnLoadCallback(init);

</script>


//prikaže polje za vnos koordinat z decimalnimi vrednostmi

function prikaziDecimal() {

document.getElementById("formSMS").style.display = "none";

document.getElementById("formDecimal").style.display = "block";

}

//skrije polje za vnos koordinat z decimalnimi vrednostmi

function skrijDecimal() {

document.getElementById("formSMS").style.display = "block";

document.getElementById("formDecimal").style.display = "none";

}

var podcrtanMeni;

//podčrta zavihek objekti

function meniPodcrtan() {

if (podcrtanMeni == 0) {

document.getElementById("menuObjects").style.textDecoration = "underline";

document.getElementById("menuCamera").style.textDecoration = "none";

document.getElementById("menuPath").style.textDecoration = "none";

document.getElementById("menuRepair").style.textDecoration = "none";

}

//podčrta zavihek kamera


document.getElementById("menuCamera").style.textDecoration = "underline";

document.getElementById("menuObjects").style.textDecoration = "none";



//podčrta zavihek pot

}


return;

}

ge.getFeatures().appendChild(object);

alert("KML datoteka se je uspešno namestila!");

document.getElementById("kmlFetchUrl").value = "";

}

//naloži KML datoteko iz URL

function naloziKML() {

var naslov = document.getElementById("kmlFetchUrl").value;

naslov = naslov.replace("http://", "");

naslov = "http://" + naslov;

google.earth.fetchKml(ge, naslov, kmlTest);

}

//***********************************ZAVIHKI MENIJA*********************//

//odpre zavihek objekti

function div_Objekti() {

if (document.getElementById("div_objekti").style.display == "none" ||

document.getElementById("div_objekti").style.display == "") {

document.getElementById("div_objekti").style.display = "block";


document.getElementById("div_popravi").style.display = "none";

document.getElementById("div_poti").style.display = "none";

} else {

document.getElementById("div_objekti").style.display = "block"

}

}

//odpre zavihek poti

function div_Poti() {

if (document.getElementById("div_poti").style.display == "none" ||

document.getElementById("div_poti").style.display == "") {

document.getElementById("div_poti").style.display = "block";



document.getElementById("div_objekti").style.display = "none";

} else {

document.getElementById("div_poti").style.display = "block"

}

}

//odpre zavihek animacija

function div_Animacija() {

if (document.getElementById("div_animacija").style.display == "none" ||

document.getElementById("div_animacija").style.display == "") {

document.getElementById("div_animacija").style.display = "block";




} else {

document.getElementById("div_animacija").style.display = "block"

}

}

//odpre zavihek popravi

function div_Popravi() {

if (document.getElementById("div_popravi").style.display == "none") {

document.getElementById("div_popravi").style.display = "block";




} else {

document.getElementById("div_popravi").style.display = "block"

}

}

//***********************************OBJEKTI****************************//

///Tipkovnica

var keyboard = new THREEx.KeyboardState(); // upravljanje s tipkovnico

var premikGorDolc; // premik objekta naprej ali nazaj po y osi

var premikGorDols; // premik objekta naprej ali nazaj po x osi

var premikLevoDesnoc; // premik objekta levo ali desno po y osi

var premikLevoDesnos; // premik objekta levo ali desno po x osi

var rezultats; //decimalni zapis zemljepisne širine

var rezultatd; // decimalni zapis zemljepisne dolžine

// začetni del datoteke KML

var kmlZacetek = '<?xml version="1.0" encoding="UTF-8"?>' +


'xmlns:gx="http://www.google.com/kml/ext/2.2">' + '<Document>';

// končni del datoteke KML

var kmlKonec = '</Document>' + '\n' + '</kml>';

var kmlModel; // sestavljena datoteka KML

var parsedkmlModel; //razčlenjena datoteka KML

var i = 0; // števec objektov

var naslovStreznika = "http://localhost/upload/"; //naslov strežnika kjer bo shranjena datoteka

var imeDatoteke; //ime datoteke, ki jo bomo shranili na strežnik

var objektiTabela = new Array(); //podatki o objektih zapisani v KML obliki

var izbrana; //številka izbranega objekta na seznamu (listbox)

var cameralatitude; //pozicija kamere: zemljepisna širina

var cameralongitude; //pozicija kamere: zemljepisna dolžina

var cameraheading; //pozicija kamere: usmerjenost

var cameratilt; //pozicija kamere: naklon

var cameragroundAltitude; //pozicija kamere: višina

var premik = 0.000001; //hitrost premikanja objekta

var model; //izbrani objekt

var placemark;

var eventLokacija = function (event) { //zabeleži koordinate klika

var eventDolzina = event.getLongitude();

var eventSirina = event.getLatitude();

document.getElementById("sirinaDecimal").value = event.getLatitude();

document.getElementById("dolzinaDecimal").value = event.getLongitude();



}

var paused = false; //če je false, potem lahko objekt premikamo

//ko dodamo nov objekt odpremo nekatera polja

function novObjekt() {

document.getElementById("div_radio").style.display = "block";

document.getElementById("div_poslji").style.display = "block";

document.getElementById("div_objektiStart").style.display = "block";

ponastaviVrednostiObjekt();

}

//onemogoci polja za dodajanje objektov

} else {

if (ss == "S") {

rezultats = stopinjes + minutes / 60 + sekundes / 3600;

} else {

rezultats = -(stopinjes + minutes / 60 + sekundes / 3600);

}

if (sd == "V") {

rezultatd = stopinjed + minuted / 60 + sekunded / 3600;

} else {

rezultatd = -(stopinjed + minuted / 60 + sekunded / 3600);

}

}

document.getElementById("sirinaDecimal").value = rezultats;

document.getElementById("dolzinaDecimal").value = rezultatd;

}

/* v tabelo objektiTabela se zabeležijo vsi podatki o objektu.

V seznam listbox se vnese naziv objekta*/

function zabeleziModel() {


var vnos = document.createElement("Option");

var nazivObjekta = document.getElementById("nazivObjekta").value;

var opisObjekta = document.getElementById("opisObjekta").value;

heading = document.getElementById("heading").value;

objektiTabela[i] = '<name>' + nazivObjekta + '</name>' + '<description>' +

opisObjekta + '</description>' + '<Model>' + '<altitudeMode>relativeToGround</altitudeMode>' +

'<Location>' + '<longitude>' + rezultatd + '</longitude>' + '<latitude>' + rezultats +

'</latitude>' + '<altitude>0</altitude>' + '</Location>' + '<Orientation>' +

'<heading>' + heading + '</heading>' + '</Orientation>' + '<Link>' + '<href>' +

naslovStreznika + imeDatoteke + '</href>' + '</Link>' + '</Model>' + '</Placemark>';

vnos.text = nazivObjekta;

vnos.value = imeDatoteke;

listbox.add(vnos);

i += 1;

kmlModelParse();

}

// iz tabele objektiTabela se sestavi KML datoteka ter naloži v Google Earth


premikGorDolc = parseFloat(0.000005 * Math.cos((heading / 180) * Math.PI));

premikGorDols = 0.000005 * Math.sin((heading / 180) * Math.PI);

premikLevoDesnoc = 0.000005 * Math.cos(((heading + 90) / 180) * Math.PI);

premikLevoDesnos = 0.000005 * Math.sin(((heading + 90) / 180) * Math.PI);

if (keyboard.pressed("q")) {

zascita = true;

model.getOrientation().setHeading(model.getOrientation().getHeading() + 1);

document.getElementById("heading").value = model.getOrientation().getHeading();

}

if (keyboard.pressed("e")) {

zascita = true;

model.getOrientation().setHeading(model.getOrientation().getHeading() - 1);

document.getElementById("heading").value = model.getOrientation().getHeading();

}

if (keyboard.pressed("w")) {

zascita = true;

model.getLocation().setLatitude(model.getLocation().getLatitude() + premikGorDolc);

model.getLocation().setLongitude(model.getLocation().getLongitude() + premikGorDols);

document.getElementById("sirinaDecimal").value = model.getLocation().getLatitude();

document.getElementById("dolzinaDecimal").value = model.getLocation().getLongitude();

}

if (keyboard.pressed("s")) {

zascita = true;

model.getLocation().setLatitude(model.getLocation().getLatitude() - premikGorDolc);

model.getLocation().setLongitude(model.getLocation().getLongitude() - premikGorDols);



}

if (keyboard.pressed("a")) {

zascita = true;

model.getLocation().setLatitude(model.getLocation().getLatitude() - premikLevoDesnoc);

model.getLocation().setLongitude(model.getLocation().getLongitude() - premikLevoDesnos);



}

if (keyboard.pressed("d")) {

zascita = true;

model.getLocation().setLatitude(model.getLocation().getLatitude() + premikLevoDesnoc);

model.getLocation().setLongitude(model.getLocation().getLongitude() + premikLevoDesnos);



}

if (zascita == true) {

kameraSledi(model.getLocation().getLatitude(), model.getLocation().getLongitude(),

model.getOrientation().getHeading())

}

}

} catch (err) {}

setTimeout('premikObjekta()', 10);

}

//preveri trenutne podatke o objektu ter jih zamenja s starimi

function shraniKml() {

if (izbrana != undefined && izbrana != -1) {

var izbrana2;


paused = true;

nazivObjekta = document.getElementById("nazivObjekta").value;

opisObjekta = document.getElementById("opisObjekta").value;

rezultats = model.getLocation().getLatitude();

rezultatd = model.getLocation().getLongitude();

imeDatoteke = model.getLink().getHref();


listbox.options[izbrana].text = nazivObjekta;

objektiTabela[izbrana] = '<name>' + nazivObjekta + '</name>' +

'<description>' + opisObjekta + '</description>' + '<Model>' +

'<altitudeMode>relativeToGround</altitudeMode>' + '<Location>' +

'<longitude>' + rezultatd + '</longitude>' + '<latitude>' + rezultats +

'</latitude>' + '<altitude>0</altitude>' + '</Location>' +

'<Orientation>' + '<heading>' + heading + '</heading>' +

'</Orientation>' + '<Link>' + '<href>' + imeDatoteke +

'</href>' + '</Link>' + '</Model>' + '</Placemark>';

izbrana2 = izbrana;

kmlModelParse();

izbrana = izbrana2;

}

}

//omogoči prikaz 3D objektov v Google Earth

function prikazi3D() {

ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);

}

//funkcija namenjena sledenju objekta, ki ga upravljamo s tipkovnico

function kameraSledi(modelS, modelD, modelH) {

ge.getOptions().setFlyToSpeed(5);


la.set(modelS, modelD, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, modelH, 60, 30);


}

//briše izbran objekt

function brisiKML() {


var zascita = false;

for (k = 0; k <= (listbox.options.length - 1); k++) {

if (listbox.options[k].selected == true) {

izbrana = k;

zascita = true;

}

}

if (zascita == true) {

listbox.remove(izbrana);

objektiTabela.splice(izbrana, 1);

i -= 1;

kmlModelParse();

izbrana = -1;

}

if (listbox.options.length == 0 && document.getElementById("div_poslji").style.display == "none") {


}

}

//poišče izbran objekt ter ga prikaže

function pojdiNaObjekt() {




izbrana = k;

}

}

kamera(rezultats, rezultatd, heading);

}

//pridobi podatke o izbranem objektu ter jih prikaže v za to namenjenih poljih na spletni strani

function pridobiPodatke() {




izbrana = k;

}

}

if (izbrana == undefined || izbrana == -1) {

alert("Izberi objekt!");

} else {

placemark = ge.getElementByUrl('#model' + izbrana);

model = placemark.getGeometry();

rezultats = model.getLocation().getLatitude();

rezultatd = model.getLocation().getLongitude();

heading = parseFloat(model.getOrientation().getHeading());

document.getElementById("heading").value = heading;

document.getElementById("dolzinaDecimal").value = rezultatd;

document.getElementById("sirinaDecimal").value = rezultats;

document.getElementById("nazivObjekta").value = placemark.getName();

document.getElementById("opisObjekta").value = placemark.getDescription();

}

}

premikObjekta();

///////////////////////////////////////////TOUR/////////////////////////////////////////////////

//začetek datoteke KML

var kmlTourZacetek = '<?xml version="1.0" encoding="UTF-8"?>' +


'xmlns:gx="http://www.google.com/kml/ext/2.2">' + '<Document>' +

'<name>Animacija</name>' + '<open>1</open>' + '<gx:Tour>' +

'<name>Tour animation</name>' + '<gx:Playlist>';

//konec datoteke KML

var kmlTourKonec = '</gx:Playlist>' + '</gx:Tour>' + '</Document>' + '</kml>';

var kmlTura; //KML datoteka z animacijo kamere

var kmlTuraObject; //razčlenjena KML datoteka

var tour; //v to spremeljivko se prepiše vsebina spremenljivke kmlTuraObject

var tourTabela = new Array(); //KML podatki o pozicijah kamere

var tourPodatki = new Array(); //ločeni podatki o pozicijah kamere


var izbranaTour; //vrednost pozicije kamere, ki je izbrana na seznamu

var g = 0; // števec pozicij kamer

//posname trenutno poziciji kamere ter podatke shrani v tabele. Doda nazive pozicij na seznam listbox

function tourAnimacija() {

if (g < 0) {

g = 0;


}

var listboxTour = document.getElementById("tourList");

var vnosTour = document.createElement("Option");

vnosTour.text = "pozicija" + g;

vnosTour.value = "pozicija" + g;

var cas;

var casPolje = document.getElementById("tourCas").value;

if (casPolje == "") {

cas = 5;

} else {

cas = casPolje;

}

cameralatitude = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getLatitude();

cameralongitude = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getLongitude();

cameraheading = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getHeading();

cameratilt = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getTilt();

cameragroundAltitude = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getAltitude();

tourPodatki[g][0] = cas;

tourPodatki[g][1] = cameralatitude;

tourPodatki[g][2] = cameralongitude;

tourPodatki[g][3] = cameraheading;

tourPodatki[g][4] = cameratilt;

tourPodatki[g][5] = cameragroundAltitude;


listboxTour.add(vnosTour);

tourTabela[g] = '<gx:FlyTo>' + '<gx:duration>' + cas + '</gx:duration>' +

'<gx:flyToMode>smooth</gx:flyToMode>' + '<Camera>' + '<longitude>' + cameralongitude +

'</longitude>' + '<latitude>' + cameralatitude + '</latitude>' + '<altitude>' +

cameragroundAltitude + '</altitude>' + '<heading>' + cameraheading + '</heading>' +

'<tilt>' + cameratilt + '</tilt>' + '</Camera>' + '</gx:FlyTo>';

g += 1;

kmlTour();

}

//v tabelo doda podatke o pavzi med premiki kamer

function tourPavza() {

var tourPavza = document.getElementById("tourPause").value;


var vnosTour = document.createElement("Option");

if (tourPavza == "") {

tourPavza = 1

}

tourPodatki[g][0] = tourPavza;

tourTabela[g] = '<gx:Wait>' + '<gx:duration>' + tourPavza + '</gx:duration>' + '</gx:Wait>';


vnosTour.text = "pavza" + g;

vnosTour.value = "pavza" + g;

listboxTour.add(vnosTour);

g += 1;

kmlTour();

}

//Prebere podatke iz tabel ter sestavi KML datoteko, ki jo potem naloži v Google Earth

if (listboxTour.options[j].selected == true) {

izbranaTour = j;

}

}

document.getElementById("tourCas").value = tourPodatki[izbranaTour][0];

}

//kamera se postavi na izbrano lokacijo, ki smo jo že posneli

function pojdiNaTour() {

var cameraTour = ge.createCamera('');

cameraTour.set(tourPodatki[izbranaTour][1], tourPodatki[izbranaTour][2],

tourPodatki[izbranaTour][5], ge.ALTITUDE_RELATIVE_TO_GROUND,

tourPodatki[izbranaTour][3], tourPodatki[izbranaTour][4], 0);

ge.getView().setAbstractView(cameraTour);

}

//pobriše izbrano pozicijo kamere

function brisiTour() {


izberiTour();

if (g >= 1) {

listboxTour.remove(izbranaTour);

tourTabela.splice(izbranaTour, 1);

tourPodatki.splice(izbranaTour, 1);

kmlTour();

g -= 1;

} else {

g = 0;

}

}

//staro pozicijo kamere zamenja z novo. Vsi podatki o stari poziciji so nadomeščeni z novimi.

function urediTour() {


var casPolje = document.getElementById("tourCas").value;

izberiTour();

var cas;

if (casPolje == "") {

cas = 5;

} else {

cas = casPolje;

}

cameralatitude = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getLatitude();

cameralongitude = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getLongitude();

cameraheading = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getHeading();

cameratilt = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getTilt();

cameragroundAltitude = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND).getAltitude();

tourPodatki[izbranaTour][0] = cas;

tourPodatki[izbranaTour][1] = cameralatitude;

tourPodatki[izbranaTour][2] = cameralongitude;

tourPodatki[izbranaTour][3] = cameraheading;

tourPodatki[izbranaTour][4] = cameratilt;

tourPodatki[izbranaTour][5] = cameragroundAltitude;

tourTabela[izbranaTour] = '<gx:FlyTo>' + '<gx:duration>' + cas + '</gx:duration>' +

'<Camera>' + '<longitude>' + cameralongitude + '</longitude>' + '<latitude>' +

cameralatitude + '</latitude>' + '<altitude>' + cameragroundAltitude +

'</altitude>' + '<heading>' + cameraheading + '</heading>' + '<tilt>' +

cameratilt + '</tilt>' + '</Camera>' + '</gx:FlyTo>';

document.getElementById("tourCas").value = cas;

kmlTour();

}

//**********************LINESTRING****************************//

var pathPaused = false; //če je true, se objekt ne premika po poti

var placemarkPath; //nosilec pina, ki se vozi po poti

var lineColor; // barva poti

var point; //pin, ki se vozi po poti

var tabelaPath = new Array(); //tabela začasnih podatkov poti - koordinate točk

var lineStyle = new Array(); //tabela stila poti - debelina in barva črte

lineStyle[0] = new Array();

tabelaPath[0] = new Array();

var tabelaKoordinateLine = new Array(); //tabela za združene koordinate primerne za KML

var p = 0; // števec točk v trenutni poti

var pathHeading; //usmerjenost med dvema točkama na določeni poti

var nlong = 0; //preporovana pot po zemljepisni dolžini

var nlat = 0; // prepotovana pot po zemljepisni širini

var debelinaCrte; // debelina črte poti

var pathKml; //KML datoteka vseh črt

var parsedPathKml; //razčlenjena KML datoteka

var placemarkCheck; //preveri, če je pin na zemljevidu

var hitrost = 0.000001; //hitrost objekta, ki se vozi po poti

var razlikaLongitude; //razdalja med točkama po x osi

var razlikaLatitude; //razdalja med točkama po y osi

;

//začetek KML datoteke

var pathZacetekKml =

'<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"' +

' xmlns:gx="http://www.google.com/kml/ext/2.2">' + '<Document>';

//začetek KML poti

var pathPlacemarkZacetek = '<LineString>' + '<tessellate>1</tessellate>' +

'<altitudeMode>clampToGround</altitudeMode>' + '<coordinates>';

var pathPlacemarkKonec = '</coordinates>' + '</LineString>' + '</Placemark>'; //konec KML poti

var pathKonecKml = '</Document>' + '</kml>'; //konec KML datoteke

var steviloLineString = 0; //število poti

var eventCheck = false; //preverja, če se posluša klikanje miške

var lineIzbrana; //vrednost izbrane poti

var barvaObratna; //vrednost barve v KML color načinu

//zabeleži podatke o točki na katero smo kliknili z miško ter jih shrani v tabelo

var eventHandler = function (event) {

if (event.getCtrlKey() == true) {

barva(steviloLineString);

var plong = event.getLongitude();

var plat = event.getLatitude();

tabelaPath[p][0] = plong;

tabelaPath[p][1] = plat;

p += 1;

tabelaPath[p] = new Array();

kmlPath();



}

}

//prižge poslušalca klikov ter omogoči polja, ki so potrebna za vnos podatkov o poti

function prizgiEvent() {

eventCheck = true;

google.earth.addEventListener(ge.getGlobe(), 'click', eventHandler);

document.getElementById("potIme").value = "";

document.getElementById("div_potiStart").style.display = "block";

document.getElementById("narisiPot").style.display = "block";

}

//prekliče dodajanje poti

function prekliciPot() {

var linelist = document.getElementById("linelist");

google.earth.removeEventListener(ge.getGlobe(), 'click', eventHandler);


if (lineList.length == 0) {


}

}

//Iz tabel sestavi KML datoteko ter jo naloži v Google Earth

function kmlPath() {

var potIme = document.getElementById("potIme").value;

if (potIme == "") {

potIme = "pot " + steviloLineString;

}

if (steviloLineString > 0 || eventCheck == true) {

lineStyle[steviloLineString][2] = potIme;

tabelaKoordinateLine[steviloLineString] = "";

}

if (parsedPathKml) {

ge.getFeatures().removeChild(parsedPathKml);

barva(steviloLineString);


}

lineStyle[steviloLineString][1] = document.getElementById("debelinaCrte").value;

for (j = 0; j < p; j++) {

tabelaKoordinateLine[steviloLineString] += tabelaPath[j][0] + "," + tabelaPath[j][1] + ",0 "

}

pathKml = "";

if (tabelaKoordinateLine[0] != "") {


for (k = 0; k <= steviloLineString; k++) {

pathKml += '<Style id="style' + k + '">' + '<LineStyle>' + '<color>' + lineStyle[k][0] +

'</color>' + '<width>' + lineStyle[k][1] + '</width>' + '</LineStyle>' + ' </Style>' +

'<Placemark id="path' + k + '">';

pathKml += '<name>' + lineStyle[k][2] + '</name>' + '<styleUrl>#style' + k +

'</styleUrl>' + pathPlacemarkZacetek;

pathKml += tabelaKoordinateLine[k];

pathKml += pathPlacemarkKonec;

}




}

}

//ugasne poslušalca, vnese podatke o poti v seznam linelist

function potrdiLineString() {

if (eventCheck == true) {

var spliceTabela = tabelaPath.getLength;

var linelist = document.getElementById("lineList");

var vnos = document.createElement("Option");

google.earth.removeEventListener(ge.getGlobe(), 'click', eventHandler);

lineStyle[steviloLineString + 1] = new Array();

p = 0;

tabelaPath.length = 1;

vnos.text = lineStyle[steviloLineString][2];

vnos.value = steviloLineString;;

linelist.add(vnos);

eventCheck = false;

steviloLineString += 1;


}

}

//pretvornik zapisa barve v KML color

camera(point.getLongitude(), point.getLatitude(),

parseFloat((360 * pathHeading) / (2 * Math.PI)), 4.99999976);

switch (pathHeading) {

case Math.PI / 2:



} else {


nlong = 0;

nlat = 0;

point.setLongitude(parseFloat(tabelaPath[stevecPath + 1][0]));


stevecPath += 1;


}

}

break;

case Math.PI:

if (Math.abs(razlikaLatitude) >= nlat) {


} else {


nlong = 0;

nlat = 0;



stevecPath += 1;


}

}

break;

case -Math.PI / 2:



} else {


nlong = 0;

nlat = 0;



stevecPath += 1;


}

}

break;

default:

if (Math.abs(razlikaLongitude) >= nlong && Math.abs(razlikaLatitude) >= nlat) {


} else {


nlong = 0;

nlat = 0;



stevecPath += 1;


}

}

}

}

}

//pavza med sledenjem

function pausePath() {

pathPaused = true;

}

//nadaljevanje sledenja poti

function contPath() {

pathPaused = false;

followPath();

}

//naredi pin na začetku izbrane poti

function sprozi() {

placemarkPath = ge.createPlacemark('');

point = ge.createPoint('');

placemarkCheck = true;

point.set(parseFloat(tabelaPath[0][1]), parseFloat(tabelaPath[0][0]), 0,

ge.ALTITUDE_CLAMP_TO_GROUND, 1, 1);

point.setLatitude(parseFloat(tabelaPath[0][1]));

placemarkPath.setGeometry(point);

ge.getFeatures().appendChild(placemarkPath);

}

//kamera se postavi na začetek izbrane poti

function pojdiNaPot() {


la.set(tabelaPath[0][1], tabelaPath[0][0], 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 60, 30);


}

/*kamera za sledenje poti - vnaša se zemljepisna dolžina, zemljepisna širina,

usmerjenost, hitrost letenja*/

function camera(cameraLong, cameraLat, cameraHead, flyspeed) {

ge.getOptions().setFlyToSpeed(flyspeed);

var camera = ge.createLookAt('');

camera.set(cameraLat, cameraLong, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, cameraHead, 60, 60)

ge.getView().setAbstractView(camera);

}

//postavi pin na začetek izbrane poti

function resetPath() {

stevecPath = 0;

point.setLongitude(tabelaPath[0][0]);

point.setLatitude(tabelaPath[0][1]);

nlong = 0;

nlat = 0;

}

//pridobi podatke o izbrani poti

function pridobiLine() {


var velikostTabele = tabelaPath.length;

tabelaPath.splice(1, velikostTabele - 2);

for (k = 0; k <= (linelist.options.length - 1); k++) {

if (linelist.options[k].selected == true) {

lineIzbrana = k;

}

}

if (lineIzbrana != undefined && lineIzbrana != -1) {

var linestring = ge.getElementByUrl('#path' + lineIzbrana).getGeometry();

var lsStVnos = linestring.getCoordinates().getLength();

for (k = 0; k < lsStVnos; k++) {

tabelaPath[k][0] = linestring.getCoordinates().get(k).getLongitude();

tabelaPath[k][1] = linestring.getCoordinates().get(k).getLatitude();

tabelaPath[k + 1] = new Array();

}

if (placemarkCheck == true) {

ge.getFeatures().removeChild(placemarkPath);

}

sprozi();

resetPath();

}

}

//pri ustvarjanju poti razveljavi nazadnje ustvarjeno točko

function razveljaviLine() {

var velikostTabele = tabelaPath.length;

if (velikostTabele > 1 && eventCheck == true) {

tabelaPath.splice(velikostTabele - 2, 1);

p -= 1;

kmlPath();

}

}

//izbriše izbrano pot

function brisiPath() {


linelist.remove(lineIzbrana);

tabelaKoordinateLine.splice(lineIzbrana, 1);

lineStyle.splice(lineIzbrana, 1);

steviloLineString -= 1;

lineIzbrana = -1;

kmlPath();

if (lineList.length == 0) {


}

}

//odebeli črto

function debelinaCrtePlus() {

var debelina = document.getElementById("debelinaCrte").value;

debelina = parseFloat(debelina);

debelina += 2;

document.getElementById("debelinaCrte").value = debelina;

editPath();

}

//stanša črto

function debelinaCrteMinus() {

var debelina = document.getElementById("debelinaCrte").value;

if (debelina !== 0 && debelina > 1) {

debelina = parseFloat(debelina);

debelina -= 2;

document.getElementById("debelinaCrte").value = debelina;

editPath();

}

}

//pridobi podatke o poti ter jih zapiše v za to namenjena polja

function linePodatki() {

var style;

var linestring;

var red, green, blue;

pridobiLine();

style = ge.getElementByUrl("#style" + lineIzbrana).getLineStyle();

linestring = ge.getElementByUrl("#path" + lineIzbrana);

barvaObratna = style.getColor().get();

blue = barvaObratna.substr(2, 2);

green = barvaObratna.substr(4, 2);

red = barvaObratna.substr(6, 2);

barvaObratna = red + green + blue;

document.getElementById("debelinaCrte").value = style.getWidth();

document.getElementById("barvaPoti").value = barvaObratna;

document.getElementById("potIme").value = linestring.getName();

}

//spreminjanje lastnosti poti

function editPath() {

var style;

var linestring;

if (eventCheck == true) {

debelinaCrte = parseFloat(document.getElementById("debelinaCrte").value);

linestring = ge.getElementByUrl("#path" + steviloLineString);

style = ge.getElementByUrl("#style" + steviloLineString).getLineStyle();

style.setWidth(debelinaCrte);

} else {

pridobiLine();

debelinaCrte = parseFloat(document.getElementById("debelinaCrte").value);

linestring = ge.getElementByUrl("#path" + lineIzbrana);

style = ge.getElementByUrl("#style" + lineIzbrana).getLineStyle();

style.setWidth(debelinaCrte);

}

}

//potrditev lastnosti poti

function applyPath() {

if (eventCheck == false) {

var listbox = document.getElementById("lineList");

pridobiLine();

barva(lineIzbrana);

lineStyle[lineIzbrana][1] = document.getElementById("debelinaCrte").value;

lineStyle[lineIzbrana][2] = document.getElementById("potIme").value;

listbox.options[lineIzbrana].text = document.getElementById("potIme").value;

kmlPath();

}

}

//izvozi KML datoteko v textboxPopravi

function exportKML() {

var kmlModelEx, kmlPathEx;

var celotenKML = "";

var zascitaKML = false;

if (objektiTabela.length == 0 && tabelaKoordinateLine.length > 0) {

celotenKML = pathKml;

} else if (tabelaKoordinateLine.length == 0 && objektiTabela.length > 0) {

celotenKML = kmlModel;

} else if (objektiTabela.length == 0 && tabelaKoordinateLine.length == 0) {

alert("Ni vnosa!");

zascitaKML = true;

} else {

kmlModelEx = kmlModel.replace(kmlKonec, "");

kmlPathEx = pathKml.replace(pathZacetekKml, "");

celotenKML = kmlModelEx + kmlPathEx;

}

if (zascitaKML == false) {

document.getElementById("textboxPopravi").value = "";

document.getElementById("textboxPopravi").value = celotenKML;

}

}

//povrne stanje izgubljenega dela

function importKml() {

var kmlVsebina = document.getElementById("textboxPopravi").value;

//lineStyle spremenljivke

var ls_stVnosov;

var ls_stTock;

var ls_Ime;

var ls_Barva;

var listboxLine = document.getElementById("lineList");

var vnosLine;

var model;

//objekti spremenljivke

var model_stVnosov;

var model_nazivObjekta;

var model_opisObjekta;

var model_Latitude;

var model_Longitude;

var model_Link;

var model_Heading;

var listboxModel = document.getElementById("objectList")

var vnosModel = document.createElement("Option");

var linestring;

var style;

//Naložimo kml

kml = ge.parseKml(kmlVsebina);

ge.getFeatures().appendChild(kml);

//---------------------------------LINESTRING------------------------------------------------//

//preštejemo koliko je vnosov linestring

ls_stVnosov = ge.getElementsByType("kmlLineString").getLength();

for (j = 0; j < ls_stVnosov; j++) {

linestring = ge.getElementByUrl("#path" + j);

style = ge.getElementByUrl("#style" + j).getLineStyle();

lineStyle[j][0] = style.getColor().get(); //v tabelo dodamo podatke

lineStyle[j][1] = style.getWidth();

lineStyle[j][2] = linestring.getName();

lineStyle[j + 1] = new Array();

vnosLine = document.createElement("Option"); //vnesemo jih v listbox

vnosLine.text = linestring.getName();

vnosLine.value = linestring.getName();

listboxLine.add(vnosLine);

steviloLineString += 1;

//preštejemo koliko točk ima določen linestring

ls_stTock = linestring.getGeometry().getCoordinates().getLength()

tabelaKoordinateLine[j] = "";

for (k = 0; k < ls_stTock; k++) {

tabelaPath[k][0] = linestring.getGeometry().getCoordinates().get(k).getLongitude()

//vsako točko zabeležimo

tabelaPath[k][1] = linestring.getGeometry().getCoordinates().get(k).getLatitude();

//ustvarimo vrstico

tabelaKoordinateLine[j] += tabelaPath[k][0] + "," + tabelaPath[k][1] + ",0 ";

tabelaPath[k + 1] = new Array();

}

}

//-----------------------------------------------------------------------------------------//

//---------------------------------------OBJEKTI-------------------------------------------//

model_stVnosov = ge.getElementsByType("kmlModel").getLength();


model = ge.getElementByUrl("#model" + j);

model_nazivObjekta = model.getName();

model_opisObjekta = model.getDescription();

model = model.getGeometry();

model_Latitude = model.getLocation().getLatitude();

model_Longitude = model.getLocation().getLongitude();

model_Link = model.getLink().getHref();

model_Heading = model.getOrientation().getHeading();

vnosModel = document.createElement("Option"); //vnesemo jih v listbox

vnosModel.text = model_nazivObjekta;

vnosModel.value = model_nazivObjekta;

listboxModel.add(vnosModel);

i += 1;

objektiTabela[j] = '<name>' + model_nazivObjekta + '</name>' + '<description>' + model_opisObjekta +

'</description>' + '<Model>' + '<altitudeMode>relativeToGround</altitudeMode>' + '<Location>' +

'<longitude>' + model_Longitude + '</longitude>' + '<latitude>' + model_Latitude + '</latitude>' +

'<altitude>0</altitude>' + '</Location>' + '<Orientation>' + '<heading>' + model_Heading +

'</heading>' + '</Orientation>' + '<Link>' + '<href>' + model_Link + '</href>' + '</Link>' +

'</Model>' + '</Placemark>';

}

//------------------------------------------------------------------------------------------------//

ge.getFeatures().removeChild(kml);

//----------------------------LINESTRING KML ------------------------------------------------------//

pathKml = "";

if (tabelaKoordinateLine[0] != "") {


//koordinate

for (k = 0; k < steviloLineString; k++) {

pathKml += '<Style id="style' + k + '">' + '<LineStyle>' + '<color>' + lineStyle[k][0] +

'</color>' + '<width>' + lineStyle[k][1] + '</width>' + '</LineStyle>' + ' </Style>' +

'<Placemark id="path' + k + '">';

pathKml += '<name>' + lineStyle[k][2] + '</name>' + '<styleUrl>#style' + k +

'</styleUrl>' + pathPlacemarkZacetek;

pathKml += tabelaKoordinateLine[k];

pathKml += pathPlacemarkKonec;

}




}

//---------------------------------MODEL KML -----------------------------------------------//

kmlModel = "";





}




alert("Število obnovljenih poti: " + ls_stVnosov + "\n" + "Število obnovljenih objektov: " +

model_stVnosov);

document.getElementById("div_potiStart").style.display = "block";

}

//****************ISKALNIK*************************//

google.load("maps", "2.337");

//Poišče lokacijo v Google Maps ter jo prikaže v Google Earth

function pojdiNaLokacijo() {

var geocodeLocation = document.getElementById('location').value;

var geocoder = new google.maps.ClientGeocoder();

geocoder.getLatLng(geocodeLocation, function (point) {

if (point) {

var lookAt = ge.createLookAt('');

lookAt.set(point.y, point.x, 10, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 60, 200);

ge.getView().setAbstractView(lookAt);

}

});

}

//zaščita vnosa, vnašajo se številke

//vir http://www.htmlcodetutorial.com/forms/index_famsupp_158.html, 18.7.2012

function numbersonly(myfield, e, dec) {

var key;

var keychar;

if (window.event) key = window.event.keyCode;

else if (e) key = e.which;

else return true;

keychar = String.fromCharCode(key);

// control keys

if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))

return true;

// numbers

else if ((("0123456789.-").indexOf(keychar) > -1)) return true;

// decimal point jump

else if (dec && (keychar == ".")) {

myfield.form.elements[dec].focus();

return false;

} else return false;

}

</script>

</html>

RAZVOJ SISTEMA ZA 3D VIZUALIZACIJO EVAKUACIJSKEGA … · Google Earth, ki je hitro rastoča in...

Documents

Transcript of RAZVOJ SISTEMA ZA 3D VIZUALIZACIJO EVAKUACIJSKEGA … · Google Earth, ki je hitro rastoča in...