plik

Jan Zoń

GMAP MVT – DEDYKOWANY BACK-END DLA

POTRZEB WIZUALIZACJI ZJAWISK

METEOROLOGICZNYCH W ŚRODOWISKU

GOOGLE MAPS

praca magisterska

studia dzienne
kierunek studiów: informatyka

specjalność: informatyka stosowana w inżynierii środowiska

promotor: dr inż. Robert Szczepanek
nr pracy: 2137

data złożenia: .........................

R A K Ó W

2 0 0 8

ul. Warszawska 24, 31-155 Kraków

tel/fax (+48 12) 628 20 41

e-mail: sekretariat@iigw.pl

internet: www.iigw.pl

INSTYTUT INŻYNIERII I GOSPODARKI WODNEJ

POLITECHNIKA KRAKOWSKA im. TADEUSZA KOŚCIUSZKI

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

PIS

TRE CI

1. Wprowadzenie...........................................................................................................5

2. Wielkości i pomiary meteorologiczne ....................................................................12

3. Techniki informatyczne w meteorologii....................................................................15

4 . Narzędzia...............................................................................................................20

4.1 Baza danych.....................................................................................................21

4.1.1 Tabele meteorologiczne i informacyjne.....................................................25

4.2 PHP Hypertext Preprocessor............................................................................32

4.3 Extensible Markup Language - XML.................................................................35

4.3.1 Reguły tworzenia dokumentów XML.........................................................36

4.3.2 Hierarchia elementów w dokumencie XML...............................................39

4.3.3 Przetwarzanie dokumentów XML..............................................................41

4.4 JavaScript.........................................................................................................42

4.4.1 Obiektowe podejście do struktury dokumentu HTML - DOM....................46

4.5 Asynchronous JavaScript and XML.................................................................49

4.6 Google Maps Application Programming Interface............................................54

5. Projekt GMAP MVT - implementacja.......................................................................58

5.1 Baza danych.....................................................................................................61

5.2 Format XML – założenia i implementacja.........................................................61

5.2.1 Źródło i zastosowany format danych........................................................62

5.2.2. Tworzenie dokumentów XML przez skrypty PHP.....................................68

5.3 W kierunku Google Maps – JavaScript w połączeniu z AJAX .........................76

5.3.1 Import XML................................................................................................77

5.3.2 Przetwarzanie XML....................................................................................79

5.4 Prezentacja działania systemu GMAP MVT.....................................................82

6. Podsumowanie........................................................................................................89

7. Spis rysunków.........................................................................................................93

8. Spis tabel.................................................................................................................94

9. Spis listingów...........................................................................................................94

10. Bibliografia.............................................................................................................95

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

1. W

PROWADZENIE

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Człowieka od wieków interesowało otaczające go środowisko naturalne,

próbował poznawać mechanizmy i zasady kierujące ekosystemem w którym

przebywa. Zagadnieniami, które są najczęściej kojarzone z osłoną meteorologiczną

są takie zjawiska jak opad atmosferyczny, wilgotność, zachmurzenie, wiatr,

temperatura czy obecność mgły.

Zjawiska atmosferyczne wpływają na człowieka. Wiele lat temu, gdy ludzkość

nie dysponowała skomplikowanymi urządzeniami i aparaturą pomiarową, wiele z nich

pozostawało dla człowieka niewytłumaczalnych. Wraz z postępem cywilizacyjnym

i kolejnymi wynalazkami, człowiek stopniowo uświadamiał sobie prawa kierujące

przyrodą i chętniej korzystał z dobrodziejstw nauki.

W dzisiejszych czasach postęp w dziedzinie meteorologii i prognozowania jest

mocno zaawansowany. Ogólnoświatowe systemy osłony meteo potrafią przewidywać

nadchodzące kataklizmy, ratując życie setek tysięcy ludzi rocznie oraz zapewniając

poczucie bezpieczeństwa. Jednakże pomimo stosowania zaawansowanych technik

w meteorologii, człowiek nie potrafi wpływać bezpośrednio na zjawiska

atmosferyczne.

Możliwe jest natomiast zapobieganie skutkom ich niekorzystnych następstw

poprzez projektowanie i wdrażanie systemów osłony meteorologicznej. Kilka dekad

temu, najpopularniejszym i najbardziej dostępnym medium informujących ludzi

o warunkach pogodowych było radio. Wraz z wynalezieniem technologii

umożliwiającej przesył obrazu za pomocą fal elekromagnetycznych, przekaz

werbalny został uzupełniony o obraz telewizyjny.

W latach 60 ubegłego wieku miał miejsce kolejny przełom w dziedzinie

przesyłania informacji na odległość. Było to podjęcie przez amerykańską Agencja

Bezpieczeństwa Narodowego (RAND) decyzji o rozpoczęciu opracowywawnia

skutecznej metody komunikacji do zastosowań militarnych na wypadek wybuchu

wojny nuklearnej. Projekt przygotowywany przez RAND przy wsparciu Paula

Barana uważa się za poczatki globalnej sieci Internet.

W dzisiejszych czasach klasyczne metody zapisu i interpretacji danych meteo

takie jak dzienniki opadu, temperatur lub stanu wód zastępowane są przez

zautomatyzowane urządzenia i czujniki pomiarowe. Zmierzone wielkości trafiają do

wyspecjalizowanych systemów komputerowych, na których gromadzone są

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

w dedykowanych bazach danych.

Bardzo ważnym jest, aby informacja o potencjalnych zagrożeniach wynikających

z następstw zjawisk atmosferycznych trafiała do zainteresowanego użytkownika

w możliwie jak najkrótszym czasie. Równie ważna z punktu widzenia użytkownika

jest dostępność tych danych oraz możliwość ich prostej i jednoznacznej interpretacji.

Rozwiązaniem zapewniającym ww. warunki jest wykorzystanie globalnej sieci

Internet jako medium służącemu gromadzeniu i publikacji zebranych danych.

Analizując tempo przyrostu liczby zarejestrowanych domen Internetowych

na przestrzeni ostatnich lat można stwierdzić, że Intenet z roku na rok staje się coraz

bardziej globalny i dostępny dla szerokiej rzeszy użytkowników (Rysunek 1).

Rysunek 1. Liczba zarejestrowanych na świecie domen internetowych

źródło: Internet Systems Consortium, [2]

Globalny w przenośni, jak również w dosłownym tego słowa znaczeniu, gdyż

od kilku lat możliwe jest oglądanie powierzchni kuli ziemskiej, dzięki usłudze

stworzonej przez firmę Google, noszącej nazwę Google Maps.

Na podstawie interfejsu programistycznego - udostępnionego przez firmę

Google - Google Maps API (Application Programming Interface), możliwe jest

umieszczanie i wizualizacja na mapach świata rozmaitych obiektów.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Manipulacje mapą Google – przesuwanie, przybliżanie i oddalanie - oparte są

na użyciu JavaScriptu, obiektowego skryptowego języka programowania. Skrypty

JavaScript najczęściej umieszczane są na stronach WWW i służą do zapewnienia

interaktywności poprzez reagowanie na zdarzenia takie jak wciśnięcie przycisku,

przeciągnięcie elementu w inne miejsce ekranu. Ponadto, JavaScript potrafi

wykorzystywać technikę AJAX (ang. Asynchronous JavaScript and XML), stosowaną

do tworzenia aplikacji internetowych w których interakcja pomiędzy użytkownikiem

a serwerem może się odbywać bez przeładowywania całej strony WWW. Dane

przekazywane przez interfejs AJAX mogą być zapisywane w formacie XML.

Istnieje wiele serwisów o różnorodnej tematyce korzystających

z Google Maps.

Przykładowo, jedną z witryn internetowych wizualizujących na mapie Google

położenie sieci hoteli w USA jest

http://www.hotel-map.4hotels.us

, podobną

funkcjonalność posiada polska strona:

http://www.fullinfo.pl/katalog/299info20.html

Do grona obiektów które znalazły się na mapach Google zaliczają się również

między innymi stacje benzynowe:

http://www.fullinfo.pl/katalog/497info20.html

oraz

obiekty turystyczne:

http://www.fullinfo.pl/katalog/12info20.html

– Rysunek 2.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 2. Kopalnia Soli w Bochni przedstawiona na mapie Google

źródło: Lokalizator internetowy, [8]

Jest to jednak tylko mały ułamek tematyki, jaką można zaprezentować na

mapie Google, w zasadzie jedynym ograniczeniem jest wyobraźnia oraz

pomysłowość projektanta.

W niniejszej pracy opisany został system łączący dane zapisane w formacie

XML z interfejsem Google Maps API.

Dane, z których korzysta stworzony system pobierane są z meteorologicznej bazy

danych należącej do krakowskiej firmy Trax Elektronik, a następnie są konwertowane

do postaci dokumentów XML. Jest to podyktowane faktem udostepniania przez

Google Maps API mechanizmów obsługi dokumentów XML.

Informacje zapisane w formacie XML pozwalają na umieszczanie na mapie Google

różnego rodzaju punktów (markerów) wizualizujących sytuację meteorologiczną. Jest

to popularny sposób wizualizacji grup obiektów.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Do umieszczenia punktu na mapie potrzebne są jego współrzędne geograficzne

tj. długość oraz szerokość geograficzna.

W stworzonym systemie wykorzystana została bazy danych, w której

zapisane są informacje o położeniu przestrzennym punktów pomiarowych, co

pozwala na umieszczenie ich na mapie Google.

Wybrany sposób prezentacji danych, a więc wizualizacja obiektów na mapie

jest dużo bardziej atrakcyjna dla użytkownika w porównaniu do przedstawiennia tych

samych danych w tabelach i zestawieniach.

Poza aspektem przejrzystości, istotny jest również również fakt tego, że interfejs

dostarczany przez Google jest bardzo intuicyjny oraz posiada wiele możliwości

i rozmaitych funkcji, które można samodzielnie rozbudowywać aby osiągnąć

zamierzony efekt.

Dostęp do bazy danych możliwy jest dzięki wykorzystaniu języka PHP (ang.

PHP hypertext preprocessor). Jest to obiektowy, działający po stronie serwera język

skryptowy, służący do dynamicznego generowania dokumentów. Posiada on moduły

wyspecjalizowane w kierunku komunikacji skryptu z bazą danych umożliwiające

nawiązanie połączenia oraz wykonywanie zapytań o zawartość bazy i zwracanie ich

wyników do skryptu w postaci zmiennych.

W stworzonym systemie na podstawie danych pobranych z bazy tworzone są

pliki (dokumenty) w formacie XML. Jest to możliwe, podobnie jak pobieranie danych

z bazy, także przez wykorzystanie języka PHP. Pozwala on wygenerować

kompletny i poprawny dokument XML, w którym zapisane są informacje zwrócone

z meteorologicznej bazy danych.

Przygotowana w ten sposób porcja danych następnie zostaje przekazana do

odpowiednio zaprojektowanych aplikacji, przetwarzających dane wejściowe

w formacie XML do formatu zrozumiałego przez interfejs Google Maps.

Aby osiągnąć współdziałanie między zupełnie odrębnymi komponentami

jakimi są format XML oraz mapa Google, konieczne jest użycie narzędzia

pośredniego, w postaci języku JavaScript w którym napisany został autorski zestaw

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

narzędzi programistycznych. Umożliwiają one wyświetlenie na mapie Google

informacji meteorologicznych w swobodny i konfigurowalny przez użytkownika

sposób.

Rysunek 3. Zarys projektowanego zestawu narzędzi

źródło: opracowanie własne

Podsumowując, projektowany system składa się z trzech odrębnych

komponentów. Pierwszym z nich jest meteorologiczna baza danych. Na jej podstawie

dzięki wykorzystaniu języka PHP tworzone są dokumenty w formacie XML.

Następnie ich zawartośc jest wizualizowana na mapie dostarczanej przez interfejs

Google Maps (Rysunek. 3)

Stworzony system GMAP MVT (Google Maps, Ajax and PHP Meteo

Visualization Toolkit) jest zestawem narzędzi służących do wizualizacji zjawisk

meteorologicznych opartym na Google Maps, Ajax oraz PHP. W dalszej części pracy

będę posługiwał się skróconą nazwą – GMAP.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

2. W

IELKO CI

POMIARY

METEOROLOGICZNE

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Meteorologia jest nauką, która zajmuje się badaniem zjawisk fizycznych

i procesów zachodzących w atmosferze kuli ziemskiej. Obserwacje atmosfery

prowadzone są w placówkach pomiarowych zwanych stacjami meteorologicznymi.

Są one także miejscem akwizycji pomiarów.

Urządzenia pomiarowe umieszczane są w tzw. ogródku meteorologicznym – dotyczy

to pomiarów naziemnych.

Przykładowy wygląd ogródka meteorologicznego znajduje się na rysunku 4.

Rysunek 4. Ogródek meteorologiczny

źródło: Instytut Meteorologii i Gospodarki Wodnej, [4]

Do mierzonych w ogródku meteorologicznym wielkości można zaliczyć:

temperaturę powietrza, ciśnienie atmosferyczne, wilgotność powietrza oraz kierunek

i prędkość wiatru. Każda z nich mierzona jest za pomocą specjalnych, odpowiednich

dla danego typu pomiaru instrumentów pomiarowych.

Dla potrzeb systemu GMAP wykorzystywane są dane pochodzące z systemu stacji

meteorologicznych, należących do firmy Trax Elektronik. W ogródkach dokonywany

jest pomiar następujących wielkości:

–

temperatury powietrza: pomiar dokonywany jest za pomocą termometrów

rtęciowych. Umieszczone w ażurowej klatce meteorologicznej, mierzą

temperaturę powietrza na wysokości 2 metrów. Pomiar temperatury na

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

powierzchni gruntu oraz na wysokości 20 centymetrów odbywa się odpowiednio

przy pomocy termometrów gruntowych oraz przygruntowych.

–

wilgotności względnej: wyraża procentową zawartość nasyconej pary wodnej

w powietrzu. Mierzona jest przez urządzenia zwane higrometrami, które

umieszczane są w klatkach meteorologicznych. Coraz powszechniej stosowane

są urządzenia cyfrowe kombinowane – termohigrometry.

–

prędkości oraz kierunku wiatru: Pomiar prędkości wiatru dokonywany jest

urządzeniem zwanym anemometrem. W kontekście omawianego systemu

zastosowane zostały anemometry mechaniczne (rotacyjne). Składają się one

z wirnika złożonego z łopatek zakończonych półkolistymi czaszami. Kierunek

wiatru określany jest za pośrednictwem skrzydła zamontowanego podobnie jak

anemometr na mierzącym kilka metrów maszcie.

–

stanu opadu atmosferycznego: opadem nazywane są produkty kondensacji pary

wodnej zawartej w atmosferze (atmosfera ziemska), spadające na powierzchnię

Ziemi lub unoszące się w powietrzu w postaci wody lub kryształków lodu. Opady

atmosferyczne mogą występować pod postacią:deszczu, śniegu, mżawki, krup,

gradu, mgły lub opadów osiadających – rosy, szronu oraz szadzi. Do pomiarów

opadu atmosferycznego służą deszczomierze (najpopularniejszy – Hellmana)

i pluwiografy. Ilość opadu określana jest wysokością wody wyrażoną

w milimetrach.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

3. T

ECHNIKI

INFORMATYCZNE

METEOROLOGII

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Projektowanie i wdrażanie systemów osłony meteorologicznej jest podstawą

przewidywania klęsk żywiołowych. Straty materialne w wielu przypadkach są

nieuniknione, jednak posiadając odpowiednią infrastrukturę wczesnego ostrzegania

o zbliżającym się huraganie lub powodzi, można je zminimalizować.

Powódź, która dotknęła Polskę w 1997 roku spowodowała śmierć 55 osób

i przyniosła kolosalne straty materialne w skali całego państwa. Całkowicie

zniszczonych zostało kilkaset domów, mostów, wiele setek kilometrów dróg,

wodociągów i studni gospodarczych, infrastruktura energetyczna, ciepłownicza,

kanalizacyjna i oczyszczalnie ścieków. [4].

Stało się jasnym, że potrzebne jest stworzenie od podstaw systemu

wczesnego ostrzegania o klęskach żywiołowych na terenie Polski. Dzięki wsparciu

Banku Światowego, Instytut Meteorologii i Gospodarki Wodnej przygotował i wdrożył

projekt Systemu Monitoringu i Osłony Kraju – SMOK .

SMOK jest nowoczesnym systemem obejmującym monitoring, prognozowanie

oraz ostrzeganie przed groźnymi zjawiskami naturalnymi (powodzie, silne wiatry,

burze) . Do jego zadań należy również rozpowszechnianie informacji o aktualnym

i przewidywanym stanie atmosfery i hydrosfery [4] . W skład SMOK wchodzi blisko

970 posterunków pomiarowych.

Dokonują one takich pomiarów jak:

−

stan wody w rzekach,

−

temperatura wody w rzekach,

−

stan wody gruntowej,

−

opad atmosferyczny ciekły,

−

prędkość oraz kierunek wiatru,

−

temperatura powietrza w klatce i przygruntowa

Posterunki pomiarowe przesyłają swoje pomiary do serwera, który gromadzi je

w bazie danych. W skład systemu teleinformatycznego SMOK wchodzi m .in. duża

grupa serwerów bazodanowych oraz superkomputer obliczający prognozy na

podstawie przeprowadzanych pomiarów – Rysunek 5 .

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 5. Prognozujący superkomputer SGI Origin 3800

źródło: Instytut Meteorologii i Gospodarki Wodnej, [4]

Korzyści płynące z połączenia dziedzin meteorologii oraz informatyki są

długoterminowe i wymierne. Dzięki archiwizacji informacji z wielu punktów

pomiarowych możliwe jest tworzenie dokładnych i przekrojowych zestawień danych.

Możliwe jest również prowadzenie dzienników pomiarowych w czasie rzeczywistym

dzięki wykorzystaniu łączności radiowej i internetowej pomiędzy infrastrukturą

pomiarową a gromadzącą dane.

Niniejsza praca skupia się na zagadnieniach związanych ze sposobem

połączenia wyników pomiarów meteorologicznych z systemem informatycznym,

dedykowanym do ich wizualizacji. Wykorzystano w niej zbiór urządzeń pomiarowych

oraz infrastrukturę teleinformatyczną, w szczególności dostęp do bazy danych

meteorologicznych krakowskiej firmy Trax Elektronik. System stworzony przez firmę

przypomina SMOK IMGW, składa się z meteorologicznych stacji pomiarowych,

punktów akwizycji obrazu (tzw. punktów kamerowych) oraz urządzeń przesyłających

zarejestrowane informacje do wyspecjalizowanej w tym celu bazy danych.

Stacje meteorologiczne firmy Trax Elektronik wyposażone są w urządzenia

rejestrujące, które gromadzą w swojej pamięci wyniki pomiarów (temperaturę,

wilgotność względną, wysokość opadu, prędkość oraz kierunek wiatru). Odbywa się

to w 10-minutowych odstępach czasu.

Do rejestratora podłączony jest modem pracujący w technologii GPRS

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

(General Packet Radio Service), który umożliwia przesyłanie pakietów danych

zawierających wartości zmierzonych wielkości do serwera meteorologicznego.

Pakiety danych są następnie dekodowane i zapisywane w meteorologicznej bazie

danych. Zastosowanie technologii GPRS umożliwia łączność na bardzo dużych

odległościach i w trudno dostępnych lokalizacjach - Rysunek 5.

Rysunek 6. Schemat ideowy podsystemu akwizycji i archiwizacji danych

źródło: opracowanie własne

Zaprojektowany system GMAP zakłada wykorzystanie istniejącej bazy danych

jako źródła niezbędnych informacji związanych zarówno z wielkościami meteo, jak

również tych związanych z aspektami konfiguracyjnymi tworzonego systemu.

Meteorologiczna baza danych traktowana jest w systemie firmy Trax Elektronik jako:

−

magazyn i archiwum danych meteo,

−

magazyn i archiwum obrazów kamerowych,

−

magazyn informacji o komponentach (stacje pomiarowe, punkty akwizycji

obrazu),

−

interfejs udostępniający możliwość pobierania i obróbki uzyskanych wartości.

W systemie GMAP jest ona traktowana w analogiczny sposób. Szczegółowe

informacje dotyczące tej kwestii znajdują się w rozdziale 5.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Stan obecny i perspektywy rozwoju

GMAP ograniczony jest zasięgiem do danych zawartych w meteorologicznej

bazie danych firmy TraxElektronik. GMAP wykorzystuje za pośrednictwem języka

PHP informacje o położeniu geograficznym obiektów (stacji meteorologicznych,

punktów kamerowych) zapisanych w bazie danych. Stan na dzień 1 czerwca 2008r

wynosi ok. 500 stacji meteorologicznych oraz ok. 250 punktów kamerowych. Na

rysunku 7 przedstawione zostały stacje meteorologiczne należące do Generalnej

Dyrekcji Dróg Krajowych i Autostrad (GDDKiA).

W miarę rozwoju systemu i instalowania kolejnych punktów pomiarowych oraz

kamer, liczby te wzrosną, tym samym zwiększy się zasięg GMAP. Liczniejsze stacje

meteo ulokowane w pewnym ograniczonym obszarze pozwalają na dokładniejszą

analizę panujących warunków atmosferycznych.

Rysunek 7. Stacje meteorologiczne GDDKiA w systemie firmy Trax Elektronik

źródło: firma Trax Elektronik, [5]

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

4 . N

ARZ DZIA

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Do stworzenia systemu GMAP niezbędny był komplet narzędzi

programistycznych, dzięki którym możliwe było zamieszczenie informacji

pochodzących z meteorologicznej bazy danych na mapie Google.

Przetransformowanie informacji zapisanych w bazie danych do formatu xml odbyło

się za pośrednictwem skryptów napisanych w języku PHP.

Stworzenie interfejsu umożliwiającego nanoszenie danych meteorologicznych na

mapę Google możliwe było dzięki wykorzystaniu skryptów zapisanych w języku PHP,

JavaScript oraz technologii AJAX.

Narzędzia, języki programowania i technologie wykorzystane do implementacji

systemu GMAP zostały szczegółowo opisane w kolejnych podrozdziałach.

4.1 B

AZA

DANYCH

Baza danych jest zbiorem wzajemnie powiązanych danych, przechowywanych

w pamięci komputerów i wykorzystywanych przez programy użytkowe instytucji lub

organizacji wraz z oprogramowaniem umożliwiającym definiowanie, wykorzystywanie

i modyfikowanie tych danych [1].

W potocznym ujęciu, pojęcie bazy danych obejmuje dane oraz program

komputerowy wyspecjalizowany do gromadzenia i przetwarzania tych danych.

Program taki (często pakiet programów) nazywany jest „Systemem do zarządzania

bazą danych” (ang. DataBase Management System, DBMS).

Historia komputerowych baz danych sięga lat 60' ubiegłego wieku.

Początkowo, bazujące na opracowaniu Charlesa Bachmana systemy

komputerowych baz danych wykorzystywały szeregowy, przez co bardzo wolny

dostęp do zgromadzonych informacji.

Wraz z wprowadzeniem na rynek urządzeń umożliwiających swobodny dostęp do

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

danych, zmienił się sposób implementacji samych baz. W 1970r Edgar Frank Codd

zaproponował relacyjny model, który miał pozwalać na łączenie danych dotyczących

tych samych obiektów przechowywanych w różnych zbiorach.

Nowoczesne relacyjne bazy danych pozwalają na wykonywanie szeregu

operacji na przechowywanych danych, w szczególności na sortowanie według

dowolnie zdefiniowanych kryteriów. Operacje te mogą być dowolnie łączone

i rozbudowywane - służą do tego specjalne języki, z których najpopularniejszymi jest

SQL (ang. Structured Query Language).

Nowoczesne relacyjne bazy danych mogą gromadzić dane różnych typów.

Najpopularniejsze z nich to:

−

bool - wartości bool'owskie (prawda / fałsz)

−

byte, integer, float, double – wartości liczbowe,

−

char, varchar, text - łańcuchy znakowe (string),

−

time, timestamp – data i czas

Nie brakuje również możliwości zapisu danych specjalistycznych typów [6]:

−

bytea – dane binarne,

−

polygon – typ reprezentujący wielokąt,

−

inet – typ reprezentujący adres internetowy,

−

macaddr – typ reprezentujący adres MAC urządzenia,

Wymienione wyżej typy zaimplementowane zostały w relacyjnym systemie

bazodanowym PostgreSQL 8.3.1 [6]. Ich nazwy oraz ilość rezerwowanego na nie

miejsca w pamięci dyskowej różni się między systemami bazodanowymi innych

producentów, dlatego więc projektując bazę danych od podstaw, należy uważnie

zaznajomić się z jej dokumentacją.

Ilość typów danych oraz ich różnorodność pozwala projektować bazy danych

w sposób dostosowany do i odpowiadający wymaganiom funkcjonalnym

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

użytkownika. Duże znaczenie podczas podejmowania decyzji o wykorzystaniu

danego typu ma jego wielkość, czyli rezerwowany dla niego obszar w pamięci

dyskowej komputera.

Wybór nieodpowiednich typów danych może skutkować nadmiernym

zapotrzebowaniem na przestrzeń dyskową w miarę rozrastania się bazy danych.

Bazy danych przechodzą ciągłą ewolucję, kolejne implementacje zyskują na

wydajności, poprawie bezpieczeństwa i niezawodności. Posiadają mechanizmy

umożliwiające zdalną pracę (na przykład programy: PgAdmin,MySqlAdmin, psql,

interfejsy stworzone za pomocą języka PHP – opisane w rozdziale 5.2.2). Typowym

i nieodzownym komponentem nowoczesnych baz danych są możliwości

wielodostępu oraz definiowania użytkowników na wielu poziomach uprawnień. Czyni

je to użytecznymi i godnymi uwagi w wielu dziedzinach zastosowań - Rysunek 8.

Rysunek 8. Perspektywa korzystania z bazy danych z punktu widzenia dostępu oraz

uprawnień użytkowników

źródło: opracowanie własne

W zależności od preferencji lub specyfiki środowiska operacyjnego, pod

kontrolą którego ma pracować baza danych, możliwa jest instalacja odpowiadających

sobie baz danych pracujących na różnych platformach sprzętowych oraz

systemowych (Windows, Linux, Solaris).

Przykładami popularnych i nieustannie rozwijanych relacyjnych baz danych są

MySQL, PostgreSQL oraz Oracle. Dwie pierwsze z nich są darmowe, natomiast

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Oracle jest bazą wymagającą płatnej licencji. Każda z nich do obsługi zapytań oraz

pozostałych operacji wykorzystuje język SQL. Za jego pomocą można tworzyć

również kopie zapasowe danych, które są łatwo przenaszalne pomiędzy różnymi

systemami operacyjnymi. Jest to kluczowe z punktu widzenia bezpieczeństwa

i archiwizacji.

SQL realizuje założenia relacyjnej bazy danych zawarte w akronimie „CRUD”

wymienione w tabeli 1.

Każda relacyjna baza danych musi implementować funkcje tworzenia, odczytu,

aktualizacji oraz usunięcia elementów, które przechowuje.

Tabela 1. Założenia „CRUD”

źródło: opracowanie własne

Polskie tłumaczenie

Odpowiednik SQL

Create

utwórz

insert

Read

odczytaj

select

Update

zaktualizuj

update

Delete (destroy)

usuń (zniszcz)

delete

Zarówno programista jak i użytkownik dysponując potężnym narzędziem jakim

jest baza danych może w sposób bezpieczny i wydajny przechowywać, wstawiać

oraz odczytywać dane w niej zakodowane. Z uwagi na ciągły rozwój oprogramowania

baz danych oraz poszerzania się spektrum ich wykorzystania, pewnym jest, że chcąc

gromadzić dane w sposób nowoczesny i systematyczny – nieuniknione jest

wykorzystanie do tego celu komputerowej bazy danych.

System GMAP wykorzystuje meteorologiczną bazę danych należącą do firmy

Trax Elektronik. Podstawową bazodanową jednostką magazynującą informacje

strukturalnie i logicznie ze sobą powiązane są tabele. W skład każdej z tabel

wchodzą wiersze (krotki). Z kolei każdy wiersz w tabeli składa się z pól. Posiadają

one unikalną w obrębie tabeli nazwę oraz niosą informację o typie danych które są

w nich przechowywane.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

4.1.1 T

ABELE

METEOROLOGICZNE

INFORMACYJNE

Dane w bazie firmy Trax Elektronik przechowywane są w tabelach, które zostały

podzielone na informacyjne oraz meteorologiczne.

Dla lepszego zobrazowania zależności pomiędzy poszczególnymi tabelami, został

stworzony diagram ERD (ang. Entity Relationship Diagram) - diagram związków encji

przedstawiony na rysunku 9.

Rysunek 9. Relacje pomiędzy tabelami bazodanowymi projektowanego systemu

źródło: opracowanie własne

Na rysunku 9 przedstawione zostały kluczowe z punktu widzenia

zaprojektowanego systemu GMAP tabele bazodanowe wraz z polami, które wchodzą

w ich skład. Tabele

meteorologiczne

zostały wyróżnione kolorem niebieskim,

natomiast tabele

informacyjne

zostały wyróżnione kolorem czerwonym. Tabela stacje

jest tabelą informacyjną jednak ze względu na jej szczególny charakter na diagramie

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

zaznaczona została kolorem czarnym.

Ponadto, diagram zawiera relacje między konkretnymi polami w tabelach:

–

relacja 1:1 – oznacza relację jeden do jednego

–

relacja 1:1..n – oznacza relację jeden do wielu

Dodatkowymi oznaczeniami są:

–

PK – klucz podstawowy tabeli (ang. Primary Key)

–

FK – klucz obcy (ang. Foreign Key)

–

PF – klucz podstawowy/obcy (ang Primary/Foreing key)

Klucz podstawowy identyfikuje rekord (krotkę) w sposób unikalny.

Klucz obcy wskazuje na referencję do klucza podstawowego znajdującego się

w innej tabeli.

Jak widać na rysunku 9, aby uzyskać dane pomiarowe pochodzące ze stacji

o wybranym identyfikatorze (stid), należy wykorzystać trzy dodatkowe tabele: pakiety,

pomiary oraz wielkości. Z kolei aby dysponować kompletem informacji o danej stacji

pomiarowej, potrzebne jest dodatkowo połączenie tabel rejony oraz pkamerowe.

ABELE

INFORMACYJNE

Jak już było wspomniane wcześniej w rozdziale 3, w skład systemu firmy Trax

Elektronik wchodzą urządzenia pomiarowe (stacje meteo oraz punkty kamerowe).

Reprezentacja bazodanowa stacji meteorologicznych przedstawia się w sposób

przedstawiony w tabeli 2. Tabela bazodanowa stacje – zawiera informacje

o pracujących w systemie stacjach meteorologicznych.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Tabela 2. Tabela bazodanowa stacje

źródło: opracowanie własne

Nazwa pola

stid (PK)

stacja

szer

dlug

rejid

Typ zmiennej smallint

text

real

integer

inet

przykład

Nowogród 53.231 21.787

213.44.11.6

Objaśnienia poszczególnych pól:

−

stid: numer identyfikacyjny stacji, typ: small int (zapisany na 2 bajtach)

−

stacja: nazwa stacji pod jaką figuruje ona w systemie, typ: text – napis

−

szer: współrzędna określająca szerokość geograficzną na jakiej zlokalizowana

jest stacja, typ: real – wartość zmiennoprzecinkowa zapisana na 4 bajtach

−

dlug: współrzędna określająca długość geograficzną na jakiej zlokalizowana jest

stacja, typ: real

−

rejonid: identyfikator rejonu, do którego stacja przynależy, typ: integer – wartość

całkowita zapisana na 4 bajtach

Tabela rejony

Zawiera ona informację o rejonie do którego przynależy dana stacja. Jej obecność

pomaga w identyfikacji oraz klasyfikacji grupy stacji biorąc pod uwagę kryterium ich

położenia na mapie Polski - tabela 3.

Tabela 3. Tabela bazodanowa rejony

źródło: opracowanie własne

Nazwa pola

rejid (PK)

nadrzedny

rejnazwa

Typ zmiennej

integer

text

przykład

warszawa

PK (Primary Key) – z ang. klucz podstawowy. Jednoznacznie identyfikuje rekord w tabeli,jego
wartość musi być unikalna w obrębie tabeli.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Objaśnienia poszczególnych pól:

−

rejid: unikalny numer identyfikacyjny rejonu, typ: integer – wartość całkowita

zapisana na 4 bajtach,

−

nadrzedny: wskaźnik do numeru identyfikacyjnego rejonu nadrzędnego względem

aktualnie rozpatrywanego, typ: integer – wartość całkowita zapisana na 4 bajtach,

−

rejnazwa: nazwa rejonu, typ: text – napis.

Tabela pkamerowe

W tej tabeli zapisane są informacje potrzebne do przypisania stacji meteorologicznej

odpowiadającego jej punktu kamerowego, oraz wydobycia informacji o położeniu

plików z obrazami zarejestrowanymi przez zainstalowane kamery - tabela 4 .

Tabela 4. Tabela bazodanowa pkamerowe

źródło: opracowanie własne

Nazwa pola

pkamid (PK)

pkamnum

pkamnazwa

pkamdir

Typ zmiennej

serial

smallint

text

przykład

186

Wojtachowice

zielona_gora

Objaśnienia poszczególnych pól:

−

pkamid: unikalny numer identyfikacyjny punktu kamerowegom, typ: serial –

wartość całkowita, autoinkrementująca się, zapisana na 4 bajtach

−

pkamnum: numer punktu kamerowego, jest odnośnikiem do tabeli stacje. Stacje

pomiarowe posiadające punkt kamerowy będą posiadać odpowiadający im wpis

w tabeli pkamerowe. Typ: smallint – wartość całkowita zapisana na 2 bajtach.

−

Pkamnazwa: nazwa punktu kamerowego w systemie, typ: text – napis

−

pkamdir: wskazuje ścieżkę przeszukiwań obrazów zgromadzonych na serwerze,

typ: text – napis

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

ABELE

METEOROLOGICZNE

Do tabel meteorologicznych projektowanego systemu należą: pakiety,

pomiary oraz wielkości. Schemat ich zależności tabelami zaprojektowany został

w sposób umożliwiający przypisanie każdej ze stacji zmierzonych przez nią wartości

wraz z uwzględnieniem czasu w którym zostały one przesłane do bazy danych.

Tabela pakiety

Zawiera informację o pojedynczej porcji danych (pakiecie) przesłanym przez stację

meteo do serwera bazy danych – tabela 5 .

Tabela 5. Tabela bazodanowa pakiety

źródło: opracowanie własne

Nazwa pola

pktid (PK)

stid

measured

Typ zmiennej

integer

smallint

timestamp

przykład

75347943

379

2007-02-08 13:40:00+01

Objaśnienia poszczególnych pól:

−

pktid: unikalny numer pakietu w systemie bazy danych, typ: integer - wartość

całkowita zapisana na 4 bajtach

−

stid: identyfikator stacji meteo, wskazuje na pochodzenie pakietu, typ: smallint -

wartość całkowita zapisana na 2 bajtach

−

measured: czas zmierzenia pakietu, typ: timestamp - znacznik czasowy.

Tabela pomiary

Przyporządkowuje pakietowi o wybranym identyfikatorze pakietu (pktid) wartość oraz

identyfikator pomiaru. Nie zawiera ona klucza podstawowego.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Zamiast niego pomiary identyfikowane są za pomocą dwóch kryteriów: identyfikatora

pakietu pktid oraz identyfikatora pomiaru pomid – tabela 6 .

Tabela 6. Tabela bazodanowa pomiary

źródło: opracowanie własne

Nazwa pola

pktid (PF)

pomid (PF)

value

Typ zmiennej

integer

smallint

real

przykład

75347943

24.6

Objaśnienia poszczególnych pól:

−

pktid: identyfikator pakietu, którego dany pomiar i jego rodzaj dotyczy, typ: integer

- wartość całkowita zapisana na 4 bajtach,

−

pomid: identyfikator wielkości pomiaru, typ: smallint - wartość całkowita zapisana

na 2 bajtach,

−

value: wartość pomiaru - typ real - zmiennoprzecinkowa liczba zapisana na

4 bajtach

Tabela wielkosci – jej poszczególne pola przedstawione są w tabeli 7 .

Tabela 7. Tabela bazodanowa wielkosci

źródło: opracowanie własne

Nazwa pola

pomid (PK)

pomnazwa

jednostka

Typ zmiennej

smallint

text

przykład

T_20

°C

Objaśnienia poszczególnych pól:

−

pomid: unikalny identyfikator wielkości pomiaru,typ: integer – wartość całkowita

zapisana na 4 bajtach

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

−

pomnazwa: nazwa wielkości pomiaru, typ: text – napis,

−

jednostka: jednostka wielkości pomiaru, typ: text – napis

Zaprezentowany w niniejszym rodziale rzeczywisty i pracujący model bazy

danych meteorologicznej jest doskonałym źródłem danych dla projektowanego

systemu GMAP. Pomiary takie jak temperatura powierzni ziemi, temperatura

powietrza, wilgotność, intensywność opadu oraz wiatr są umieszczane w bazie

danych na bieżąco, wraz z momentem ich nadesłania ze zdalnych stacji meteo.

Pozwala to pracować z wykorzystaniem aktualnych i wiarygodnych danych,

ponieważ stacje wyposażone są w profesjonalne czujniki rejestrujące mierzone

wielkości.

Z uwagi na bardzo dużą ilość stacji pomiarowych zarejestrowanych w bazie

danych oraz fakt usytuowania ich w różnych województwach Polski, projektowany

system może posłużyć za miarodajną i dokładną podstawę do wizualizacji

panujących warunków meteorologicznych [10] .

Jednym z interfejsów przystosowanych do współpracy z wykorzystywaną bazą

danych meteorologicznych jest interfejs udostępniany przez język skryptowy PHP,

a w szczególności przez jego rozszerzenie o nazwie php5-pgsql.

Rozszerzenie o którym mowa umożliwia zdalne wykonywanie zapytań

formułowanych w języku SQL, odbiór i dalsze przetwarzanie otrzymanych

rezultatów.

Opis wykorzystania rozszerzenia php5-pgsql znajduje się w rozdziale 5.2.2.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

4.2 PHP H

YPERTEXT

REPROCESSOR

Inspiracją do rozpoczęcia w roku 1994 prac nad projektem PHP (ang. PHP

hypertext preprocessor) przez duńskiego programistę Rasmusa Lerdorfa była chęć

zebrania statystyk użytkowników odwiedzających jego domową stronę WWW.

Stworzył on więc zestaw narzędzi wzbogacających funkcjonalność serwera WWW,

które błyskawicznie zostały zauważone i zdobyły popularność wśród społeczności

internetowej. Po opublikowaniu przez Lerdorfa kodu źródłowego PHP, język ten

zaczął być rozwijany przez programistów na całym świecie.

Z biegiem czasu zaczęły pojawiać się nowe jego wersje, zaimplementowano

w nim obiektowość (od wersji PHP 3.0), uczyniono język modułowym. Programiści

mogli zatem poszerzać możliwości języka poprzez dodawanie do niego własnych

modułów.

Obecnie PHP definiowany jest jako obiektowy, skryptowy język

programowania

zaprojektowany do generowania dynamicznych stron internetowych.

PHP najczęściej stosuje się do przetwarzania skryptów po stronie serwera WWW ale

może być on również używany z poziomu wiersza poleceń (tzw. CLI – Command

Line Interface), wówczas obecność serwera WWW nie jest koniecznością.

Aktualnie najnowszą wersją PHP jest wersja 5.26 z 1 mają 2008r, która

wykorzystuje ponad 180 oficjalnych i nieoficjalnych modułów należących do

repozytorium PECL (ang. PHP Extension Community Library).

Obecne moduły PHP zwane również rozszerzeniami języka umożliwiają między

innymi wykonywanie takich operacji, jak:

−

łączenie się z różnymi rodzajami baz danych ( mySQL, PostgreSQL i inne),

pobieranie z nich informacji i ich prezentację

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

−

dynamiczne generowanie skompresowanych obrazów (obrazy jpg, png, gif

i inne),

−

zdalne otwieranie i wywoływanie plików oraz innych skryptów,

−

autentykację użytkownika,

−

przesyłanie danych zaszyfrowanych,

−

nagrywanie i przetwarzanie dźwięku

Składnia języka PHP przypomina swoim wyglądem znaną z języka C

i podobnych. Cały kod PHP musi zawierać się pomiędzy znacznikami:

<?php oraz

?>, lub <? oraz ?>, w przeciwnym wypadku interpreter

nie wykona kodu.

Aby łatwiej byłoby sobie wyobrazić jak wygląda kod języka PHP, przedstawiam

fragment skryptu, który wykorzystywany jest przeze mnie do generowania

dokumentów w formacie XML - listing 1.

1 <?php
2 header("Content-type: text/xml; charset=iso-8859-2");
3 echo "

<?xml version=

1.0

encoding=

iso-8859-2

.
.
.
5 foreach(

$ra

$stid

$fields

)

6 {
7
8 echo "

<station id=

$stid

9 echo "

<station_info>

.
.
.
10 }
11// To jest tylko komentarz, interpreter pomija go w trakcie
przetwarzania kodu.
12 ?>

Listing 1. Fragment skryptu PHP generującego dokument w formacie XML

źródło: opracowanie własne

Linie 1 oraz 12 wyznaczają odpowiednio początek oraz koniec skryptu.

W linii nr 2 ustawiany jest rodzaj tworzonego dokumentu, w tym wypadku jest nim

text/xml z kodowaniem znaków ISO-8859-2. Przeglądarka internetowa dzięki

Interpreter PHP służy do uruchamiania skryptów PHP. Jest to program, który odczytuje plik z kodem PHP a

następnie przekształca go na kod maszynowy.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

umieszczeniu tej informacji decyduje w jaki sposób interpretować treść dokumentu.

ISO-8859-2 jest stroną kodową języka polskiego, której zastosowanie umożliwia

poprawne wyświetlane znaków charakterystycznych dla naszego języka

(ą,ę,ć,ż,ź,ó,ł,ń).

Linia nr 3 za pomocą dyrektywy języka PHP o nazwie echo umieszcza w ciele

dokumentu deklarację informującą o typie dokumentu. Echo jest dyrektywą, która

wypisuje na ekran treść zawartą pomiędzy znakami cudzysłowów. Jeśli konieczne

jest umieszczenie znaków cudzysłowu wewnątrz wyświetlanej treści, wówczas

muszą być one zamaskowane przy pomocy znaku „\” .

Linia nr 5 przedstawia przykład wykorzystania pętli foreach. Ten rodzaj pętli

wykorzystywany jest do przeszukiwania zawartości tablic w języku PHP.

Wszystkie zmienne, zarówno tekstowe,liczbowe jak i tablicowe muszą rozpoczynać

się znakiem dolara „

”.

Pętla foreach z linii nr 5 pozwala na przeszukanie tablicy wielowymiarowej

$ra

po jej

indeksie zapisywanym w zmiennej

$stid

. Zmienna

$fields

zawiera dane

odpowiadające aktualnie przeszukiwanemu indeksowi. Nie jest wymagane

zwiększanie indeksu podczas kolejnych przebiegów pętli, język PHP robi to

automatycznie.

W linii 8 odbywa się złożenie napisu

<station id=

z zawartością zmiennej

$stid

oraz

znaku

. Wynik złożenia jest następnie wyświetlany na ekranie za pomocą dykertywy

echo.

Jak widać na powyższym przykładzie język PHP jest analogiczny do innych

języków programowania, przez co doświadczony programista nie będzie miał

problemów związanych z poprawnym jego stosowaniem.

Cechą, która przemawia na korzyść PHP względem innych obiektowych języków

programowania (C++, Java) jest sposób tworzenia zmiennych i przechowywania ich

w pamięci maszyny. Stosując PHP, programista unika nieraz kłopotliwego

i czasochłonnego dopracowywania programu pod kątem wykorzystania pamięci

operacyjnej, gdyż wszelkie operacje przydzielania i zwalniania pamięci zajmowanej

przez definiowane zmienne odbywają się automatycznie.

Język PHP stosowany jest w aplikacjach, od których wymaga się dostępności

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

przez Internet, aby móc z niego korzystać potrzebne jest zainstalowanie obsługi

języka w serwerach WWW. Ponieważ PHP jest stabilny, dobrze udokumentowany

oraz rozwijany a także posiada możliwość wykonywania za jego pośrednictwem

zdalnych połączeń z bazami danych, jest on znakomitym wyborem językak który

może posłużyć do zaprogramowania interfejsu umożliwiającego obsługę, pobieranie

oraz obróbkę danych pochodzących z bazy danych.

Popularnym i elastycznym sposobem na przechowywanie informacji

pobranych z baz danych jest wykorzystanie standardu XML – opisane szczegółowiej

w rozdziale 4.3 . Za pomocą skryptów napisanych w języku PHP możliwe jest

tworzenie dokumentów XML.

Język PHP z punktu widzenia projektu GMAP jest elementem łączącym bazę

danych ze standardem XML.

4.3 E

XTENSIBLE

ARKUP

ANGUAGE

– XML

XML(ang. Extensible Markup Language) – Rozszerzalny Język Znaczników

jest uniwersalnym językiem formalnym

, służącym do zapisu różnorodnych danych

w sposób przejrzysty i usystematyzowany.

Z uwagi na sposób prezentacji danych zapisanych za pomocą XML, nadaje się on

do tworzenia usług internetowych niezależnych zarówno od platformy sprzętowej, jak

i innych podsystemów które będą go wykorzystywać. Cechuje się on również tym, że

jest łatwy do zrozumienia z uwagi na wykorzystanie w nim znaczników, a tworzone

w nim dokumenty mogą być łatwe do interpretacji przez niedoświadczonego

użytkownika.

Jego zaletą jest to, że nawet osoba nie znająca zasad tworzenia dokumentów

XML będzie w stanie w znacznym stopniu rozszyfrować zakodowaną w nich

informację. Wynika to z prostoty i harmonii tego języka [3]. Wachlarz zastosowań

języka XML jest bardzo szeroki; począwszy od budowy interaktywnych aplikacji

Język formalny – pojęcie z zakresu logiki, definiuje alfabet wraz z zakresem posługiwania się nim.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

internetowych, przetwarzaniu danych, renderingu witryn WWW na statycznych

interfejsach użytkownika skończywszy [12]. Wspomniana niezależność XML od

platformy sprzętowej, umożliwiła łatwą wymianę dokumentów pomiędzy różnymi

systemami i znacząco przyczyniła się do popularności tego języka w dobie Internetu.

Język XML należy do podzbioru języka SGML.

SGML w odróżnieniu od języków znaczników dedykowanych do konkretnych

zastosowań (takich jak np. HTML (ang. Hypertext Markup Language), nie jest

zbiorem określonych znaczników i reguł ich użytkowania, lecz ogólnym, nadrzędnym

językiem służącym do definiowania dowolnych znaczników i ustalania zasad ich

poprawnego użytkowania [17].

Organizacją, która trzyma pieczę nad ustanawianiem standardów implementacji

i przesyłania witryn WWW, w tym również dokumentów XML jest założona

1 października 1994r przez Tima Berners-Lee, World Wide Web Consortium

(w skrócie W3C).

Każdy człowiek dąży do uporządkowania i usystematyzowania otaczającego go

świata, dlatego format XML dzięki ograniczeniom oraz przejrzystym zasadom

tworzenia w nim dokumentów, jest dziś tak popularnym formatem udostępniania

informacji.

4.3.1 R

EGUŁY

TWORZENIA

DOKUMENTÓW

XML

Każdy język komputerowy, zarówno kompilowany (C, C++, Pascal), jak

również język znaczników XML posiada swoje zasady oraz reguły, których należy

przestrzegać podczas posługiwania się nim.

Dokument XML jest poprawny składniowo (ang. well formed), jeżeli zgodny jest

z regułami składni XML, mianowicie:

−

Na początku każdego dokumentu musi znajdować się deklaracja specyficzna dla

typu XML,

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

−

W dokumencie dopuszczalne jest istnienie dokładnie jednego unikatowego

elementu głównego — korzenia,

−

Wszystkie pozostałe elementy muszą znajdować się w obrębie korzenia,

−

Wszystkie niepuste elementy muszą posiadać znacznik początkowy i końcowy,

−

Pusty element nie musi posiadać znacznika końcowego,

−

dopuszcza się zagnieżdżanie elementów, jednak nie mogą one na siebie

zachodzić,

−

Jeżeli element posiada atrybut, wówczas jego wartość musi być zapisana

w cudzysłowach.

Poprawność strukturalna (ang. structural validity) dokumentu XML osiągnięta jest

wtedy, gdy jest on zgodny ze przypisaną mu definicją dokumentu.

Najpopularniejszym językiem służącym do precyzowania reguł dokumentów

z rodziny SGML jest DTD (ang. Document Type Definition).

Definicja dokumentu obejmuje zasady określane przez użytkownika. Należą

do nich m. in.:

−

opisy dopuszczalnych elementów w zbiorze,

−

lista atrybutów mogących cechować poszczególne elementy,

−

zasady zagnieżdżań poszczególnych elementów.

Przykład dokumentu XML

Przykład dokumentu XML przedstawia Listing 2 .

1 <?xml version=”

1.0

” encoding=”

UTF-8

” standalone=”

yes

”?>

2 <wypozyczalnia-video kategoria=”

filmy przyrodnicze

”>

<film nosnik=”

DVD

”>

<autor>James Attenborough</autor>

<tytul>Africa – unrevealed continent</tytul>

<rok-wydania>2008</rok-wydania>

<uwagi>Nowość</uwagi>

</film>

9
0

<film nosnik=”

VHS

”>

<autor>Mary Crabtree</autor>

<tytul>Galapagos wildlife mysteries</tytul>

<rok-wydania>1993</rok-wydania>

<uwagi/>

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

</film>

16 </wypozyczalnia-video>
17

Listing 2. Przykładowy dokument w formacie XML

źródło: opracowanie własne

Linijka nr. 1 jest deklaracją, informującą o typie dokumentu. W tym przypadku

typem dokumentu jest XML w wersji 1.0 z kodowaniem znaków UTF-8. W przypadku

jej nie umieszczenia, przeglądarka internetowa, bądź też inny program parsujący taki

dokument, może niepoprawnie zinterpretować jego zawartość. W przypadku nie

zaznaczenia w dokumencie systemu kodowania znaków, zamiast oczekiwanych liter,

mogą pojawić się nieczytelne znaki, uniemożliwiając tym samym dalsze, poprawne

przetwarzanie takiego pliku.

Atrybut standalone natomiast określa, czy dokument może występować samodzielnie

czy też będzie on potrzebował odwołania do zewnętrznego DTD.

Jak już było wspomniane w niniejszym rozdziale, aby dokument był poprawny

składniowo, musi istnieć w nim dokładnie jeden element główny – korzeń. Korzeniem

dokumentu - Listing 2 - przykładowego dokumentu XML mogącego opisywać katalog

filmów wypożyczalni wideo jest znacznik wypozyczalnia-video . Posiada on
dodatkowo jeden atrybut: kategoria .

Znaczniki w XML konstruuje się w podobny sposób jak w dokumentach HTML.

Przykładowy znacznik otwierający ma postać <marker> a zamykający

go </marker>. XML zezwala na umieszczanie w dokumentach znaczników pustych

<znacznik_pusty/>, taki znacznik zastępuje treść

<znacznik_pusty>

</znacznik_pusty>. Elementy puste wykorzystuje się najczęściej wtedy, gdy

zawierają one wyłącznie atrybuty. Bardzo ważną kwestią jest rozróżnianie wielkości

liter. Znacznik <marker> nie jest tym samym znacznikiem co <MARKER> czy

<MaRker>, nie można go również zamknąć wstawiając </MARKER> . XML nie

wymaga stosowania jednej, konkretnej wielkości liter, konieczna jest jednak spójność

w wykorzystaniu jednego systemu nazewnictwa znaczników.

Analogicznie do języka HTML, atrybuty w XML określa się w znaczniku otwierającym

element. Wymagane jest, aby były one zamknięte w znaki (') lub cudzysłowy (”).

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Linijki 3 – 9 z Listingu 2. wprowadzają do dokumentu opis elementu film. Zawiera
on subznaczniki niosące informację o autorze, tytule, roku produkcji oraz uwagach na

temat elementu film. Dodatkowo, element film z linijki 3 posiada atrybut
informujący o typie nośnika.

W analogiczny sposób można definiować pozostałe elementy film, umieszczając je
kolejno pod sobą, mając na uwadze, aby znaczniki nie nachodziły na siebie, oraz to

aby wszystkie znalazły się w obrębie korzenia.

Programista ma prawo używać komentarzy w swoich dokumentach XML.

Komentarze nie są przetwarzane przez parsery

. Rozpoczęcie bloku komentarza ma

postać: .

Cały tekst pomiędzy tymi znakami traktowany jako komentarz [Listing 2.,linia 17].

Trzeba mieć na uwadze, że w zasadniczej treści komentarza nie może się znaleźć

sekwencja dwóch myślników (--), wówczas parser zgłosi błąd.

4.3.2 H

IERARCHIA

ELEMENTÓW

DOKUMENCIE

XML

Elementy mogą przechowywać tekst (pomiędzy znacznikami: początkowym

a końcowym), mogą być puste, lub zawierać kolejne elementy zwane

podelementami. Elementy zawierające inne elementy nazywane są elementami

nadrzędnymi. Element film jest nadrzędny wobec elementów autor, tytuł,

rok-wydania, uwagi [ Listing 1., Rysunek 10.].

Parser - analizator składniowy. Dokonuje analizy danych wejściowych, opierając się na
zmodyfikowanych algorytmach analizy języków formalnych.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 10. Przykładowa hierarchia dokumentu XML

źródło: opracowanie własne

Zagnieżdżając jedne elementy w drugich, umieszcza się w dokumencie XML

informację o zależnościach pomiędzy elementami nadrzędnymi a podrzędnymi

(podelementami).

W prosty sposób można uzyskać klarowny opis relacji typu nadrzędny – podrzędny

(np. opis struktury pracowniczej firmy) za pomocą notacji XML. Nie bez przyczyny

XML wykorzystywany jest do zapisu informacji przechowywanych w bazach danych

(rozdział 5.2.1), można bowiem utworzyć za jego pomocą dokument o charakterze

listy odpowiadający krotkom zapisanym w tabeli.

Podsumowując, sposób formułowania dokumentów XML jest bardzo zbliżony

do naturalnych opisów różnych elementów dokonywanych przez człowieka. Z uwagi

na tę cechę, dokumenty XML są łatwe w czytaniu i zrozumieniu. Dodatkowo, istnieją

mechanizmy sprawdzania poprawności tworzonych dokumentów (np. są one

wbudowane w przeglądarki internetowe). Pozwala to ustrzec się błędów

i nieścisłości, które mogą w nich wystąpić na etapie projektowania.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

4.3.3 P

RZETWARZANIE

DOKUMENTÓW

XML

Dokumenty XML mogą być czytane przez użytkownika w zwykłych edytorach

tekstowych (Notatnik, Word – Windows, gEdit, nano – Linux), jednak

w przeważającej większości przypadków są one przetwarzane przez programy

zwane parserami.

Parsery dokonują analizy składniowej dokumentu, czyli sprawdzają czy dany

dokument jest dobrze uformowany. Schemat przetwarzania dokumentu XML przez

parser został zobrazowany na rysunku 11.

Rysunek 11. Schemat przetwarzania dokumentu XML przez parser

źródło: na podstawie [3]

Ogromna większość nowoczesnych przeglądarek internetowych (Firefox,

Netscape, Opera, Internet Explorer) posiadają wbudowane parsery XML

umożliwiające użytkownikowi wyświetlenie w okienku treści dokumentu.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Wyspecjalizowane parsery zajmują się nie tylko wyświetlaniem treści dokumentu,

lecz również potrafią:

−

przekonwertować go na stronę w języku HTML,

−

przetworzyć zawartą w nim treść na polecenia kierowane do bazy danych,

−

wygenerować nowy dokument i zapisać go na twardym dysku,

−

wstępnie zmodyfikować go i przekazać innemu podsystemowi celem dalszego

przetwarzania, na przykład odbiorcą może być program napisany w języku

JavaScript wykorzystujący technologię AJAX.

Wykorzystanie technologii JavaScript w połączeniu z AJAX jest jednym

z komponentów projektowanego systemu GMAP.

4.4 J

AVA

CRIPT

JavaScript to obiektowy skryptowy język programowania, stworzony przez

Brendana Eich, programistę Netscape Communications Corporation w 1995r.

Umożliwiał on zagnieżdżanie swojego kodu w stronach WWW wzbogacając je

o mechanizmy dynamicznego przetwarzania liczb oraz modyfikacji danych

zapisanych w formularzach, bez konieczności przeładowywania całego dokumentu.

JavaScript w wersji 1.0 opublikowano dla użytkowników w 1996r.

Obecną wersją JavaScriptu jest wersja oznaczona numerem 1.5, trwają

jednocześnie prace nad wersją 2.0 wzbogaconą o kilka rozszerzeń dodanych przez

fundację Mozilla (twórcę m. in popularnej przeglądarki internetowej Firefox).

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Kompatybilność.

JavaScript jest obsługiwany przez ogromną większość współczesnych przeglądarek

internetowych m. in Mozilla Firefox, Safari,Internet Explorer, Opera, Netscape.

Aby kod napisany w JavaScript mógł zostać wykonany, należy umieścić

w dokumencie HTML odpowiednie znaczniki oznaczające początek oraz koniec

skryptu. W przypadku, gdy przeglądarka użytkownika nie obsługuje JavaScriptu, lub

jego obsługa jest wyłączona, wówczas do dobrych praktyk programisty należy, aby

ten przypadek obsłużyć. Najczęściej wiąże się to z wyświetleniem alternatywnej

treści przeglądanego dokumentu lub informacji dla użytkownika [ Listing 3., linia 5 ].

Użycie kodu JavaScript w dokumencie HTML.

Osadzanie kodu JavaScript w dokumencie HTML jest nieskomplikowane. Robi

się to poprzez umieszczenie w dowolnym miejscu dokumentu HTML znacznika

otwierającego kod w JavaScript <script>.

W praktyce jednak,umieszcza się go na początku strony - w sekcji HEAD - która jest

wczytywana przez przeglądarki jako pierwsza. Zabieg ten pozwala na uniknięcie

błędów, które mogą mieć miejsce, gdy użytkownik nie czekając na całkowite

załadowanie się strony kliknie na jakiś element, który jest obsługiwany przez

JavaScript.

1 <

html

2 <

head

3 <

script

src

./skrypt.js

type

text/javascript

"> </

script

4 <

script

type

text/javascript

kod skryptu

script

5 <

noscript

Przeglądarka nie obsługuje JavaScript

/noscript

6 </

head

.
.
.
7 <

html

Listing 3. Kod JavaScript w dokumencie HTML

źródło: opracowanie własne

Powyżej przedstawiono bardzo skrócony fragment dokumentu HTML, jego

ideą jest pokazanie w jaki sposób umieszcza się kod JavaScript w HTML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Zaprezentowane są dwa podejścia umieszczania kodu JavaScript w HTML, każde

ma swoje wady oraz zalety.

Podejście nr 1.

Jego ilustracja znajduje się w linii nr 3. Definiowane jest w tej linii źródło, czyli ścieżka

dostępu do skryptu, którego kod ma zostać załadowany. Skrypt źródłowy znajduje się

w bieżącym katalogu pod nazwą

skrypt.js

. Jego typem jest

text/javascript

Deklaracja typu jest niezbędna, w przypadku jej braku przeglądarka internetowa nie

będzie w stanie poprawnie przetwarzać strony HTML.

Podejście nr 2.

Zakłada ono, iż treść (kod) skryptu umieszczony jest pomiędzy znacznikami

scrip

t> </

script

>. Jak widać typ pozostaje identyczny jak w przypadku

podejścia nr 1.

Umieszczanie JavaScript bezpośrednio w treści dokumentu HTML (podejście nr 2.)

ma jedną zaletę. Pozwala na przechowywanie kodu JavaScript i HTML w jednym,

tym samym pliku, ułatwia tym samym dokonywanie zmian w obydwu kodach

jednocześnie, bez konieczności odszukiwania plików źródłowych.

Jednak w przypadku, gdy programista zamierza użyć tego samego kodu

JavaScript w wielu stronach HTML, wówczas wygodniej i rozsądniej jest dołączyć go

w postaci pliku. (podejście nr 1.). Oprócz tego, jeśli zaistnieje warunkowa potrzeba

użycia pewnego kawałka kodu JavaScript (np. w zależności od rodzaju przeglądarki

internetowej użytkownika), wtedy również lepszym rozwiązaniem jest ładowanie

odpowiedniego pliku niż umieszczanie wszystkich przypadków użycia w jednym,

nieraz obszernym kodzie włączanym bezpośrednio do dokumentu HTML.

JavaScript implementuje zaawansowane i złożone techniki wpływania na

zawartość stron WWW. Jest on najczęściej osadzany dokumentach HTML

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

wzbogacając ich funkcjonalność i interaktywność. JavaScript 1.5 wspiera nowy,

złożony standard W3C DOM.

DOM (ang. Document Object Model) czyli obiektowy model dokumentu to API dla

dokumentów HTML oraz XML. Wprowadza strukturalne odwzorowanie dokumentu,

pozwalając modyfikować jego zawartość i warstwę prezentacji. DOM łączy strony

WWW ze skryptami lub innymi językami programowania [15].

DOM specyfikowany przez organizację W3C udostępnia zestaw obiektów

odzwierciedlających dokumenty HTML oraz elementy okna przeglądarki,

w szczególności za jego pomocą:

−

możliwe jest tworzenie, usuwanie i modyfikacja elementów HTML,

−

możliwe jest dodawanie i usuwanie atrybutów wszystkich znaczników HTML,

−

możliwe jest dodawanie i usuwanie stylów, z jakich korzysta dana strona WWW,

−

możliwe jest przypisanie więcej niż jednej procedury w przypadku wystąpienia

zdarzenia

wymagającego obsłużenia przez JavaScript.

Są to istotne udogodnienia, pozwalające na projektowanie bardzo dynamicznych

i interaktywnych aplikacji.

Zdarzenie – w opisywanym kontekście może to być kliknięcie myszką na przycisk znajdujący się na
stronie WWW, bądź najechanie kursorem na element, który posiada przypisaną procedurę obsługi
takiej ewentualności.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

4.4.1 O

BIEKTOWE

PODEJ CIE

STRUKTURY

DOKUMENTU

HTML - DOM

Obiektowość jest bardzo pożądaną cechą nowoczesnych języków

programowania. Pozwala ona na traktowanie zmiennych programowych, tak jakby

były one swego rodzaju kontenerami logicznie zaprojektowanego układu cech

(zwanych zmiennymi wewnętrznymi klasy) wraz z towarzyszącymi nim sposobami

wykorzystania, nazywanych metodami. Zatem mówiąc o klasie pewnego obiektu,

mamy na myśli zestaw zmiennych, które obiekt przechowuje oraz zestaw metod,

które umożliwiają operacje na tych zmiennych.

Jak było wspomniane JavaScript jest językiem programowania, który pozwala

działać na obiektach DOM i manipulować nimi. Innymi słowy, z racji tego, że budowa

DOM jest hierarchiczna (drzewiasta) - możliwe jest przeszukiwanie wgłąb stosując

relację rodzic-dziecko celem odnalezienia określonego elementu dokumentu HTML.

W przypadku skomplikowanych dokumentów, zawierających wiele zagnieżdżonych

elementów (w kontekście HTML są to znaczniki) próba odniesienia się do wybranego

z nich wymaga doskonałej wiedzy o strukturze tego dokumentu. Aby lepiej

uzmysłowić sobie czym jest obiekt DOM oraz jakie są powiązania i zależności

pomiędzy konkretnymi jego składowymi, należy przyjrzeć się rysunkowi 12 .

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 12. Hierarchia obiektów DOM

źródło: na podstawie [7]

Na rysunku 12 zobrazowany jest schemat struktury dokumentu HTML

w ujęciu DOM. Elementy w zacieniowanych prostokątach nazywane są obiektami,

natomiast elementy w białych prostokątach to zbiory / kolekcje.

W kolekcjach zbierane są obiekty danego typu, np. odnośniki, obrazy, arkusze

stylów. Czyli – zawartość strony WWW napisanej w HTML.

JavaScript a obiekty DOM

Język JavaScript wyposażony jest w mechanizmy i funkcje pozwalające na

odwoływanie się do obiektów znajdujących się w obrębie dokumentu HTML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Aby trafnie odróżnić instrukcje języka JavaScript od obiektów DOM, posłużę się

poniższym listingiem kodu:

...
1.

var divTable =

document.getElementsByTagName("div")

;

alert

("Znaleziono +

divTable.length

+ elementów <div>.");

...

Objaśnienia :

Kolor

niebieski

oznacza użycie JavaScriptu,

czerwony

dotyczy DOM.

var divTable

: tworzy zmienną JavaScript o nazwie divTable

document.getElementsByTagName("div") :

Obiekt

document

przechowuje

wszystko, co znajduje się na stronie HTML- struktura dokumentu HTML w ujęciu

DOM przedstawiona została na rysunku 12. DOM definiuje metodę dostępu do

elementów dokumentu poprzez wywołanie metody

getElementsByTagName

rzecz obiektu

document

. Pobiera ona do listy węzłów (NodeList, rodzaj

specyficznej dla DOM tablicy, która przechowuje węzły) wszystkie znaczniki, które

odpowiadają przekazanemu parametrowi (w kolejności występowania w źródle

dokumentu). Zatem zmienna divTable staje się teraz listą węzłów elementów „div”

występujących w dokumencie. Poprawnie sformułowany element „div” powinien

posiadać atrybut „id” będący identyfikatorem w skali dokumentu.

;

: średnik kończy instrukcję JavaScript

alert()

jest metodą DOM, która wyświetla okno dialogowe z przekazanym

parametrem – łańcuchem znakowym. W tym przypadku jest to napis sklejony

z trzech składowych:

łańcucha znakowego

„Znaleziono”,

własności lenght listy węzłów divTable

oraz

łańcucha znakowego

„elementów <div>”.

Własność

lenght

zdefiniowana

w DOM zwraca liczbę całkowitą będącą ilością węzłów przechowywanych w liście

węzłów.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Jeśli dokument HTML w którym wywołano powyższy fragment kodu zawierał

5 elementów typu „div”, wówczas użytkownik ujrzy na ekranie okno dialogowe:

Jak udowadnia wyżej opisany przykład, za pomocą JavaScriptu można

w klarowny i skuteczny sposób odwoływać się do zawartości dokumentu, pod

warunkiem, że nie występują między elementami złożone zależności

i zagnieżdżenia. W tym przypadku, należy użyć bardziej złożonych algorytmów.

4.5 A

SYNCHRONOUS

AVA

CRIPT

AND

XML

AJAX (Asynchronous JavaScript and XML) jest od niedawna używaną nazwą

na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były

pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie

aplikacje, jak Google Suggest i Google Maps. [14]

Dzięki tym cechom można:

−

wysyłać zapytania do serwera bez przeładowywania strony,

−

parsować i pracować z dokumentami XML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Termin AJAX jest akronimem od wyrazów:

Asynchroniczny – oznaczający sposób przesyłania danych. Użytkownik może

korzystać ze strony internetowej która wysyła żądanie pobrania danych bez

konieczności jej przeładowywania.

JavaScript – pochodzi od języka programowania, który implementuje funkcjonalność

asynchronicznych zapytań.

XML – jest formatem przechowywania danych w dokumentach tekstowych.

Łącząc ze sobą wyżej wymienione pojęcia w jedną całość, można otrzymać

kwintesencję zastosowania AJAX. Jak wynika z rozszyfrowania akronimu AJAX, jest

on niczym innym, jak technologią łączącą źródło danych – zapisanych

w dokumentach XML przy wykorzystaniu asynchronicznej transmisji realizowanej za

pomocą odpowiednich obiektów i metod zaimplementowanych w języku JavaScript.

Mówienie tutaj o technologii AJAX może być mylące, bowiem AJAX jest połączeniem

wszystkich wyżej wymienionych składników. Pomimo XML w nazwie, AJAX

niekoniecznie wymaga używania formatu XML do wymiany danych. Poza XML

obsługiwane są między innymi takie metody jak zwykły tekst, sformatowany HTML

(Formatted HTML) oraz format JSON (JavaScript Object Notation). Faktycznie,

programista może się posłużyć dowolnym formatem, przy ograniczeniu, że musi on

być możliwy do obsłużenia przez JavaScript.

Asynchroniczność technologii AJAX jest cechą, która wprowadza nową jakość

w projektowaniu aplikacji internetowych.

Dotychczas, wysłanie zapytania do serwera, które powodowało zwrócenie przez

niego pewnej porcji danych, wiązało się z koniecznością przeładowania aktualnej

strony, celem otrzymania wyników swojego zapytania.

Podejście do projektowania usług internetowych specyficzne dla AJAX jest zupełnie

odmienne. Użytkownik chcący otrzymać pewne dane z serwera jest obsługiwany

asynchronicznie a zarządzaniem transmisją pomiędzy nim a serwerem zajmuje się

silnik AJAX [14] .

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 13. Synchroniczna i asynchroniczna aplikacja internetowa

źródło: opracowane na podstawie [14]

W klasycznym ujęciu – synchronicznej aplikacji internetowej – JavaScript

posługuje się metodami GET/POST

celem pobrania/wysłania nowych danych z/do

serwera i ich prezentacji. To podejście, choć pożądane w pewnych sytuacjach

(np. tworzenie systemu logowania), posiada pewną wadę : wymusza przeładowanie

GET/POST – metody działań na wskazanym zasobie,w tym kontekście dotyczą one żądania
pobrania/wysłania dokumentu właściwych dla protokołu HTTP.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

całej strony lub ramki znajduje się pobierająca dane część kodu celem odświeżenia

zawartości.

Najważniejszym argumentem przemawiającym za korzystaniem z AJAX

jest możliwość uzyskania wysokiego poziomu interaktywności w aplikacjach

internetowych. Aplikacje internetowe zaprojektowane z wykorzystaniem technologii

AJAX są nowoczesne, atrakcyjne dla użytkownika oraz szybkie, gdyż ograniczana

jest ilość pobieranych przez klienta danych do tych, które faktycznie są jemu

potrzebne - z serwera pobierane są zatem tylko te dane, których żąda użytkownik lub

które są niezbędne. Pozwala to na zaoszczędzenie przepustowości łącz.

Korzystanie z aplikacji opartej na AJAX przypomina pracę z tradycyjną

aplikacją stacjonarną. Jest to bardzo pożądana cecha, ponieważ większość ludzi

przyzwyczajonych jest do pracy z takimi właśnie programami.

AJAX można również zdefiniować jako metodę wykorzystania JavaScriptu do

komunikacji z serwerem niezależnie od tradycyjnych żądań GET i POST.

Z technicznego punktu widzenia, podstawą pracy AJAX-a jest obiekt implementujący

odpowiednie metody obsługi wykonywania zapytań i pobierania XML-a ze zdalnego

serwera. Obiekt ten przyjął nazwę XMLHttpRequest. Bez jego obecności nie byłoby

możliwe korzystanie z dobrodziejstw AJAX.

Steven Holzner, autor książki „Ajax Bible” napisał:

„It’s not just JavaScript that makes Ajax tick, it’s the XMLHttpRequest object inside

JavaScript.” [11].

(To nie tylko sam JavaScript pozwala działać Ajax-owi. Robi to obiekt

XMLHttpRequest należący do JavaScript-u.)

XMLHttpRequest

jest wyspecjalizowanym obiektem wbudowanym

w język JavaScript nowoczesnych przeglądarek internetowych, którego fizyczna

implementacja zależy od konkretnej przeglądarki. Dla przeglądarek Firefox oraz

Safari jest on wewnętrznym obiektem JavaScript-u, natomiast dla Internet Explorer-a

jest on wbudowanym obiektem ActiveX. W obydwu przypadkach jego funkcjonalność

jest jednak taka sama. Ponieważ obiekt XMLHttpRequest różni się pomiędzy

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

przeglądarkami szczegółami implementacji, programista tworzący wykorzystujący go

kod musi pamiętać żeby sprawdzić z którą implementacją ma do czynienia

i zastosować odpowiednią procedurę obsłużenia każdego z przypadków użycia –

Listing 4 .

function

loadXmlDocument

(url)

2 {
3 // Firefox, Opera, Safari
4

(window.XMLHttpRequest) {

xmlReguestObject

= new XMLHttpRequest();

xmlReguestObject

.open(

"GET"

, url, true);

}

10 // Windows' Internet Explorer
11 }

else

(window.ActiveXObject) {

xmlReguestObject

= new

ActiveXObject("

Microsoft.XMLHTTP

");

xmlReguestObject

.open(

"GET"

, url, true);

16 }
17}

Listing 4. Dodawanie obsługi AJAX w zależności od wykorzystywanej przeglądarki

internetowej

źródło: opracowanie własne

Fragment kodu z Listingu 4 ma za zadanie sprawdzić z jakiej przeglądarki

korzysta klient (linie 4, 11), stworzyć odpowiadający dla każdej z nich obiekt

(linie 5, 12) oraz wysłać żądanie o dokument url metodą

GET

(linie 6, 13).

Pomimo różnic w nazewnictwie (XMLHttpRequest – dla przeglądarek Firefox,

Opera, Safari; Microsoft.XMLHTTP jako obiekt ActiveX – dla Internet Explorer),

funkcjonalności obiektów w obydwu przypadkach są identczne.

Dla porządku będę posługiwał się nazwą XMLHttpRequest.

XMLHttpRequest udostępnia API pozwalające wysyłać do serwera żądania HTTP

metodami GET oraz POST. Są to te same metody jak w przypadku klasycznej

(synchronicznej) aplikacji internetowejj (rysunek 13), z tą różnicą, że ich obsługą

w przypadku AJAX-a zajmują się specjalne funkcje stowarzyszone

z XMLHttpRequest. Z punktu widzenia serwera, są to zwyczajne zapytania od

przeglądarki. Od strony JavaScript-u, XMLHttpRequest udostępnia treść oraz
nagłówki wysyłanych komunikatów, przez co programista może na bieżąco

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

sprawdzać i informować użytkownika o postępie połączenia.

Przekazaną przez serwer w odpowiedzi na żądanie klienckie treść można

odebrać jako zwykły tekst (typ mime text/plain) lub dokument XML (typ mime

text/xml). Najczęściej wykorzystywany jest model XML. Nie stoi jednak nic na

przeszkodzie, aby odbieraną treść traktować jak zwykły tekst, trzeba jednak pamiętać

aby jego format dawał się przetworzyć na poziomie JavaScript-u.

responseAsXML

= xmlReguestObject.responseXML;

responseAsText

= xmlReguestObject.responseText;

W dwóch powyższych 1-linijkowych fragmentach kodu przedstawione zostały metody

uzyskania odpowiedzi serwera na zapytanie klienta. Zmienna

responseAsXML

zawiera dokument w formacie XML, zmienna

responseAsText

zawiera dokument

w formacie tekstowym. Dalszym przetwarzaniem danych zawartych w tych dwóch

zmiennych może zajmować się JavaScript.

W zależności od struktury zwróconego dokumentu, programista projektuje

odpowiednie procedury jego przetwarzania i decyduje o jego przeznaczeniu.

4.6 G

OOGLE

APS

PPLICATION

ROGRAMMING

NTERFACE

Google Maps to jeden z serwisów oferowanych przez firmę Google. Jest on

bazą danych map oraz zdjęć satelitarnych i lotniczych pochodzących z całego

świata. Zdjęcia można oglądać na stronie internetowej w różnych skalach, przy czym

maksymalne przybliżenie dostępne jest w wybranych, największych miastach globu -

rysunek 14. Użytkownik posiada również możliwość przesuwania mapy we

wszystkich kierunkach.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 14. Zamek Wawelski w Krakowie oglądany na mapie Google

źródło: opracowanie własne

Mapy Google można oglądać zarówno na stronie internetowej producenta

www.maps.google.com

, jak również możliwe jest projektowanie własnych witryn

WWW wyposażonych w funkcjonalność i interfejs użytkownika wzorowaną na

oryginale.

Google Maps API to interfejs programowania aplikacji dostarczony przez firmę

Google, który umożliwia wstawienie mapy na własną stronę internetową. API

umożliwia zintegrowanie ze stroną internetową w pełni fukcjonalnej mapy,

z naniesionymi na nią własnymi danymi oraz funkcjami przeznaczonymi do obsługi

zdarzeń. Wszystkie czynności związane z mapami Google i Google API realizowane

są przy użyciu języka JavaScript.

Korzystanie z Google Maps API uwarunkowane jest dołączeniem do kodu

strony WWW na której ma być umieszczona mapa Google pliku skryptu źródłowego

JavaScript, dostarczanego przez firmę Google. Plik ten posiada w swojej nazwie

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

identyfikator, tzw. Google Maps API key, który można uzyskać rejestrując się

w portalu Google [9].

Poprzez dołączenie ww. skryptu źródłowego, developer

uzyskuje dostęp do bibliotek

programistycznych dostarczanych przez Google Maps API.

Biblioteki te zaimplementowane są w języku JavaScript i obejmują narzędzia

pozwalające na [9]:

Uwaga wstępna: kolorem

czerwonym

zaznaczone są fragmenty kodu specyficzne dla

Google Maps Api,

niebieskim

natomiast JavaScriptu.

1. Utworzenie i umieszczenie mapy Google na stronie WWW.

var map

= new

GMap2

(document.getElementById("map"));

W powyższej linii kodu tworzony jest obiekt JavaScript o nazwie

map

, który

reprezentuje mapę. Argument konstruktora

stanowi obiekt DOM o identyfikatorze

"map".

2. Wycentrowanie utworzonej mapy, poprzez określenie punktu startowego

map

setCenter

(new

GlatLng

(19.9352073936, 50.0538526648), 17);

Jest to zabieg konieczny do właściwego funkcjonowania mapy stworzonej

w punkcie nr 1.

Efekt osiągany jest poprzez wywołanie na rzecz obiektu

map

metody

setCenter

przyjmującej dwa argumenty. Pierwszym z nich jest obiekt typu

GlatLng

reprezentujący położenie geograficzne punktu, drugim jest liczba

oznaczająca przybliżenie mapy. Liczby

19.935207366936

oraz

50.053859826648

to odpowiednio długość i szerokość geograficzna.

W przykładzie środek mapy wskazuje na zamek królewski na Wawelu w Krakowie.

developer – człowiek rozwijający pewną dziedzinę, w tym kontekście programista

konstruktor – w kontekście programowania obiektowego, konstruktor to specjalna metoda
wywoływana w celu utworzenia obiektu

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

3. Utworzenie i umieszczenie na istniejącej mapie punktów (markerów).

var markerManager =

new

GmarkerManager

(

map

);

var marker

= new

Gmarker

(point, icon);

markerManager

addMarker

(

marker

);

markerManager

refresh

();

Powyższe cztery linie kodu odnoszą się do obiektów stworzonych w punktach

1. oraz 2. Obrazują w jaki sposób stworzyć zarządcę markerów (linia nr 1) oraz

marker (linia nr 2). Zarządca markerów -

GmarkerManager

posiada bardzo

korzystną cechę, potrafi on nadać każdemu markerowi właściwość poziom

przybliżenia, po przekroczeniu którego będzie on widzialny na mapie. Jest to bardzo

pomocne w przypadku umiejscawiania bardzo dużej (300 i więcej) ilości markerów,

bo pozwala pokazywać jedynie te, które mają poziom przybliżenia większy lub równy

aktualnemu mapy. Do utworzenia markera potrzebne są dwie informacje: argument

point niosący informację o jego położeniu geograficznym oraz icon będący

graficznym znacznikiem reprezentującym go na mapie.

Argument point może być obiektem typu

GlatLng

opisanym powyżej. Icon

tworzony jest za pomocą konstruktora

GIcon

. Aby marker został naniesiony na

mapę, należy go umieścić w zarządcy metodą

addMarker

a następnie

zaktualizować zarządcę metodą

refresh

(linia nr 4).

Przedstawione w niniejszym rozdziale klasy, obiekty i metody należące do

Google Maps API są zestawieniem interesującym z punktu widzenia projektu GMAP.

Opis dedykowanych dla GMAP rozwiązań opisany jest w rozdziale 5.4 .

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

5. P

ROJEKT

GMAP MVT -

IMPLEMENTACJA

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Zaprojektowany system GMAP ma na celu dostarczenie użytkownikowi -

programiście konfigurowalnego zestawu narzędzi potrzebnych do wizualizacji

wielkości meteorologicznych na mapie Google. System wykorzystuje

meteorologiczną bazę danych (rozdziały 5.1 oraz 4.1), pobierane z niej informacje

stanowią po dalszym ich przetworzeniu podstawę treści wizualizowanych przez

użytkownika.

Podczas projektowania systemu GMAP staram się wykorzystywać najnowsze

i szeroko dostępne technologie, mając na uwadze atrakcyjność końcowego produktu.

Projektowany system z założenia ma pozwalać na odczyt aktualnych danych

meteo z bazy danych i przygotowanie narzędzi programistycznych umożliwiających

umieszczenie tych danych na mapie.

Przetwarzanie informacji pobranych z bazy danych przebiega dwustopniowo.

W pierwszym kroku są one pobierane z bazy danych oraz konwertowane do postaci

dokumentów XML przy użyciu skryptów napisanych w języku PHP (rozdział 5.2).

Dokumenty w formacie XML stanową punkt wyjścia do osiągnięcia celu, jakim jest

przedstawienie danych w postaci zmiennych języka JavaScript. Mechanizm,

odpowiedzialny za konwersję danych z XML do JavaScript opiera się na

wykorzystaniu technologii AJAX służącemu do pobrania XML oraz autorskiego

zestawu narzędzi JavaScript, które odpowiadają za poprawne jego przetworzenie

(rozdział 5.3). Przygotowane w ten sposób gotowe do wykorzystania zmienne

JavaScript stanowią komplet danych potrzebnych do umieszczenia ich na mapie

Google (rozdział 5.4) przez użytkownika systemu GMAP. Od użytkownika wymaga

się wyłącznie sprecyzowania parametrów pracy GMAP. Schemat ideowy systemu

GMAP przedstawiony został na rysunku 15 .

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 15. Schemat ideowy systemu GMAP MVT

(niebieskie strzałki wyznaczają kierunek przepływu danych, przerywane strzałki wskazują na

miejsca ingerencji użytkownika w system)

źródło: opracowanie własne

Objaśnienia do rysunku 15:

Kolorem

niebieskim

(strzałki oraz podpisy pod nimi) zaznaczony jest kierunek

przepływu danych oraz narzędzia, za pomocą których stworzone zostały

podsystemy realizujące go. Zobrazowany na środku rysunku 15 symbol dokumentu

XML stanowi formę przejściową danych pomiędzy miejscem ich pobrania – bazą

danych a celem – wizualizacją na mapie Google. Strzałki przerywane wskazują na

miejsca wpływu

użytkownika

na działający system.

Do podsystemów tworzących GMAP zalicza się:

−

baza danych meteorologicznych,

−

parametryzowalne skrypty napisane w języku PHP,

−

dokumenty XML tworzone w trakcie pracy systemu,

−

autorskie narzędzia napisane w języku JavaScript wykorzystujące technologię

AJAX,

−

szablon narzędzi służących wizualizacji danych na mapie Google (konfiguracja

wizualizacji)

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

5.1 B

AZA

DANYCH

Zaprojektowanie wydajnego i skalowalnego sposobu przechowywania danych

jest kluczowym problemem, który należy rozwiązać podczas projektowania wysoko

dostępnych systemów działających w czasie rzeczywistym. O tym jak ważny jest

krótki czas reakcji oraz dostępność w przypadku systemu osłony meteorologicznej –

nie trzeba przekonywać.

System osłony meteo, aby móc spełniać swoją rolę musi posiadać możliwość

archiwizacji danych (niejednokrotnie ogromnych ich ilości) celem analizy bądź

prognozowania zmieniających się warunków atmosferycznych na podstawie

dostępnych w systemie informacji. Użycie specjalnie zaprojektowanej bazy jest

bardzo rozsądnym sposobem na gromadzenie danych, spełniającym wyżej

postawione warunki.

Opis wykorzystywanej na potrzeby systemu GMAP bazy danych (tabel, pól,

relacji) oraz ich znaczeń znajduje się w rozdziale 4.1.

Projektowanie tabel bazodanowych, dobór typów pól w tabelach, wyznaczanie

relacji pomiędzy tabelami wykracza poza ramy opisu systemu i korzysta z gotowego

rozwiązania w postaci meteorologicznej bazy danych firmy Trax Elektronik.

Wszystkie istotne kwestie związane z implementacją systemu zawarte zostały

w rozdziale 4.1 .

5.2 F

ORMAT

XML –

ZAŁO ENIA

IMPLEMENTACJA

Aby możliwe było naniesienie informacji na mapę Google konieczne jest

wstepne przetransformowanie ich z postaci pobranej z meteorologicznej bazy danych

do formatu XML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Wykorzystanie standardu XML jako sposobu do zapisu i udostępniania danych

jest powszechne i szeroko stosowane. Istnieje szereg systemów wykorzystujących

go zarówno jako źródła danych, jak również zapisujących je w tym standardzie.

Do takich systemów należy również system GMAP, który w swej pierwszej

fazie implementacji tworzy pliki w formacie XML, aby następnie wykorzystać je jako

źródło danych.

Wybór formatu XML jako swoistego rodzaju łącznika między bazą danych,

a mapą Google jest uzasadniony, gdyż w miarę wzrostu liczby usług

wykorzystujących standard XML, staje się on coraz bardziej rozpoznawalny, a co za

tym idzie – rośnie liczba ludzi wykorzystujących go na co dzień i projektujących

różnego rodzaju oparte na nim usługi.

Sprawia to, że system GMAP jest system otwartym dla większej rzeszy

programistów, co daje mu szanse rozwoju.

W kolejnych podrozdziałach opisany został przyjęty w systemie GMAP format

danych XML (rozdział 5.2.1) oraz implementacja pozwalająca na

przetransformowanie danych z bazy możliwa dzięki skryptom PHP (rozdział 5.2.2).

Wykorzystanie stworzonych dokumentów XML jako źródła danych opisane

zostało w rozdziale 5.3.

5.2.1 Ź

RÓDŁO

ZASTOSOWANY

FORMAT

DANYCH

W systemie GMAP dane zapisywane w formacie XML pozyskiwane są

z meteorologicznej bazy danych. Zawiera ona informacje o położeniu stacji

pomiarowych a więc o długości i szerokości geograficznej. Wszystkie punkty pomiaru

zlokalizowane są w obrębie granic Polski, zatem nie jest potrzebna informacja

o półkuli na której znajdują się interesujące nas obiekty. Każda stacja oprócz

informacji o położeniu, posiada skojarzone z nią rodzaje prowadzonych pomiarów

oraz ich wielkości i wartości.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Umieszczane w dokumentach XML tworzonych na potrzeby systemu GMAP

wielkości meteorologiczne to:

−

temperatura powietrza na powierzchni ziemi [

℃],

−

temperatura powietrza na wysokości 20cm [

℃],

−

temperatura powietrza na wysokości 50cm [

℃],

−

temperatura powietrza na wysokości 2m [

℃],

−

wysokość opadu atmosferycznego z okresu 10 minut [mm],

−

kierunek wiatru, podany w stopniach [

ᵒ] licząc od kierunku północnego,

poruszając się zgodnie ze wskazówkami zegara,

−

prędkość wiatru [m/s]

Stacje pomiarowe różnią się między sobą typem, zatem zestaw mierzonych

przez nie wielkości jest różny dla poszczególnych punktów pomiarowych. Oprócz

wyżej wymienionych wielkości specyficznych dla systemu meteorologicznego,

dokumenty XML zawierają również informację o nazwie stacji, jej lokalizacji

i zarządcy któremu podlega dany punkt.

Dodatkową informacją zapisaną w XML jest wspomniana wcześniej obecność

punktów kamerowych. Podgląd lokalizacji stacji pomiarowej na podstawie zdjęć jest

bardzo przydatny z punktu widzenia użytkownika przeprowadzającego wizualizację

przy pomocy GMAP. Pomaga to w błyskawicznej ocenie analizy sytuacji

meteorologicznej.

System GMAP zakłada również uwzględnienie podziału terytorium Polski na

rejony. Przewiduje on możliwość generowania dokumentów XML zawierających

informacje jedynie o tych stacjach, które należą do wybranych rejonów.

W przypadku, gdy w danym rejonie umieszczony jest punkt kamerowy

, informacja ta

również uwzględniana jest przy tworzeniu dokumentów XML.

punkt kamerowy – urządzenie lub grupa urządzeń rejestrująca nieruchomy obraz.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Tworzone w systemie dokumenty XML ściśle odwzorowywują zawartość bazy

i zawierają wyżej wymienione atrybuty specyficzne dla każdego z punktów

pomiarowych.

Wpis w dokumentach o każdym punkcie pomiarowym zawiera odpowiednio

usystematyzowane pod kątem logicznym elementy. Ich zestaw składa się na

indywidualny dla każdego z punktów komplet informacji. Można powiedzieć, że

wygenerowany każdorazowo dokument XML jest uporządkowaną listą. Jest to

możliwe dzięki wykorzystaniu odpowiednich znaczników.

W systemie GMAP przyjęty został format przedstawiony na Listingu 5,

stworzony na z uwzględnieniem struktury logicznej wykorzystywanej

meteorologicznej bazy danych.

<elements>

<station id="

<station_info>

<name>Jana Pawła II</name>
<maintainer>Kraków</maintainer>
<longitude>20.0526</longitude>
<latitude>50.0685</latitude>

</station_info>
<cameras>krakow</cameras>
<station_measurements pktid="

67429455

<krw>291.2</krw>
<prw>0</prw>
<opad>0</opad>
<T_0>17.4</T_0>
<T_2>13.9</T_2>
<T_20>14.2</T_20>
<wilg>87.1</wilg>

</station_measurements>

</station>
<station id="

463

<station_info>

<name>Cewice</name>
<maintainer>RDLP Gdańsk</maintainer>
<longitude>17.73</longitude>
<latitude>54.44</latitude>

</station_info>
<cameras>na</cameras>
<station_measurements pktid="

67431132

<krw>48.2</krw>
<prw>0</prw>
<T_50>0</T_50>

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

<wilg>85.3</wilg>

</station_measurements>

</station>

</elements>

Listing 5. Struktura zaprojektowanego dokumentu XML na przykładzie stacji pomiarowych

Cewice oraz Jana Pawła II

źródło: opracowanie własne

Korzeniem tworzonych dokumentów jest znacznik o nazwie elements.

W jego obrębie znajdują się wszystkie pozostałe znaczniki. Nazewnictwo większości

znaczników jest anglojęzyczne. Cały dokument mógłby zawierać tylko i wyłącznie

polskie wyrazy, jednakże każdemu projektantowi zależy na tym, aby jego praca była

jak najbardziej przejrzysta i dostępna dla szerokiego grona odbiorców, również

użytkowników zagranicznych.

Bez tłumaczenia na nazwy angielskie pozostawiono elementy opisujące

rodzaje mierzonych wielkości. Ma to na celu zachowanie precyzyjnej informacji

o rodzaju pomiaru przeprowadzanego przez czujnik określonego typu.

Elementem języka XML rozpoczynającym opis punktu pomiarowego jest

znacznik <station>. Posiada on jeden atrybut o nazwie id . Atrybut ten jest
unikalny dla każdej ze stacji i pozwala na jej identyfikację w systemie bazodanowym.

Więcej na temat struktury bazy danych wykorzystywanej przez GMAP można

znaleźć w rozdziale który szczegółowo ją opisuje – rozdział 4.1.1

Informacje nie związane z meteorologią zostały oddzielone od meteorologicznych

celem uzyskania większej przejrzystości zaprojektowanego dokumentu - rysunek 16.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 16. Schemat hierarchii oraz podziału elementów w zaprojektowanym

dokumencie XML
źródło: opracowanie własne

Elementy znajdujące się pomiędzy znacznikami <station> </station> należy
interpretować jako treść opisu danego punktu pomiarowego oraz odpowiadające mu

mierzone wielkości i ich wartości.

Opis znaczników wykorzystywanych w GMAP

−

station_info - jest to subelement względem station. Zawiera on

nie związane z meteorologią informacje o danym punkcie pomiarowym takie jak:

−

name – nazwa punktu pomiarowego, zapis tekstowy,

−

maintaner – w wolnym tłumaczeniu 'zarządca', niekiedy oznacza region do

kórego punkt przynależy, zapis tekstowy,

−

longitude – długość geograficzna wschodnia – wielkość liczbowa,

−

latitude – szerokość geograficzna północna – wielkość liczbowa.

−

cameras – subelement względem station, niesie informacje o nazwie

kartoteki w której znajdują się aktualne obrazy kamerowe z danego punktu

pomiarowego wyposażonego kamerę, zapis tekstowy,

−

station_measurements – subelement względem station. Zawiera

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

informacje meteorologiczne do których należą:

−

krw – kierunek wiatru, wielkość wyrażona w stopniach, liczona od kierunku

północnego poruszając się zgodnie ze wskazówkami zegara,

−

prw – prędkość wiatru, wielkość wyrażona w metrach na sekundę,

−

T_0 – temperatura nawierzchni/temperatura powietrza na wysokości 0 cm

mierzona w stopniach Celsjusza

−

T_20 – temperatua powietrza na wysokości 20 cm, mierzona w stopniach

Celsjusza

−

T_50 – temperatua powietrza na wysokości 50 cm, mierzona w stopniach

Celsjusza

−

T_2 – temperatua powietrza na wysokości 2 m, mierzona w stopniach

Celsjusza

−

Opad – wartość pomiaru wysokości opadu atmosferycznego z okresu 10 minut

podawana w mm

−

Wilg – wilgotność względna, podana w procentach

Struktura oraz rodzaj danych zapisanych w dokumencie XML pozwalają

użytkownikowi na prostą i jednoznaczną interpretację. Dodatkowe zapisy takie jak

długość oraz szerokość geograficzna czynią z dokumentów solidną i wystarczającą

podstawę do umieszczenia danych w nich zapisanych na mapie Google.

Struktura dokumentów XML została zorganizowana w sposób przejrzysty

i zgodny z zasadami ich tworzenia [por rozdział 4.3.1]. Sposób jej tworzenia opisany

został w rozdziale 5.2.2.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

5.2.2. T

WORZENIE

DOKUMENTÓW

XML

PRZEZ

SKRYPTY

PHP –

PERSONALIZACJA

PARAMETRYZACJA

Zaprojektowane na potrzeby systemu GMAP dokumenty XML generowane są

w sposób dynamiczny za pośrednictwem języka PHP na podstawie danych

pobranych z rzeczywistej bazy meteorologicznej [por rozdział 4.3.1].

Język PHP jest wykorzystywany tam, gdzie wymagana jest potrzeba tworzenia

dokumentów z dynamicznie generowaną zawartością, w skład których wchodzą

również te, których treść oparta jest na zawartości bazy danych.

W systemie GMAP generowane dokumenty XML są konfigurowalne przez

użytkownika. Posiada on możliwość wyboru lokalizacji i rodzajów pomiarów. Opis

tego zagadnienia znajduje się w dalszej części pracy.

Po określeniu parametrów wywołania skryptu uruchamiany jest mechanizm

odpowiedzialny za pobieranie rekordów z bazy. Jest to realizowane poprzez

wykorzystanie odpowiednich bibliotek i funkcji udostępnianych przez język PHP

opisanych w niniejszym rozdziale.

Personalizacja

Użytkownik posiada możliwość edycji parametrów pracy systemu poprzez

wybór zakresu lokalizacji (rejony) oraz pomiarów których użyje do swojej

wizualizacji za pośrednictwem GMAP. Swoboda w powyższych kwestiach czyni

GMAP uniwersalnym systemem przystosowanym do różnych zastosowań i wymagań

użytkownika.

Wybór zakresu rejonów oraz pomiarów sprowadza się do modyfikacji odpowiedniego

skryptu PHP - getxml.php. Skrypt ten generuje dokumenty XML wymagane przez

pozostałe komponenty GMAP.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rejony

Zaprojektowany system umożliwia użytkownikowi wybór zakresu stacji

meteorologicznych przeznaczonych do wizualizacji. Sposób oraz szczegóły

implementacyjne wizualizacji leżą w gestii użytkownika, ponieważ GMAP ma za

zadanie jedynie dostarczyć narzędzia , które to zadanie umożliwią.

Przyjęto, że najmniejszą jednostką, którą wykorzystuje silnik GMAP jest rejon.

Wybór rejonu determinuje listę należących do niego stacji meteo i punktów

kamerowych.

Zatem decyzja mająca wpływ na końcową ilość i rozmieszczenie wizualizowanych

obiektów podejmowana jest przez użytkownika na samym początku.

Rejon utożsamiany jest w kontekście niniejszej pracy z jego zarządcą. Dla

przykładu: rejon o nazwie g_krakow podlega pod zarządcę GDDKiA (Generalna

Dyrekcja Dróg Krajowych i Autostrad) Kraków. Z kolei rejon krakow podlega

zarządowi dróg miasta Kraków.

Nic nie stoi na przeszkodzie, aby użytkownik wykorzystywał do swojej wizualizacji

kilka, bądź kilkanaście rejonów jednocześnie, ma w tej kwestii pełną swobodę

wyboru.

Wybór rejonów przez użytkownika odbywa się za pośrednictwem zmodyfikowania ich

listy.

Pomiary

Stacje meteo różnią się między sobą ilością i rodzajem zainstalowanych

czujników pomiarowych. Można spotkać się ze stacjami mierzącymi wyłącznie

kierunek oraz siłę wiatru, są również takie, które oprócz parametrów wiatrowych

zbierają również dane o temperaturze, wilgotności oraz intensywności opadu.

Z uwagi na różnorodność stacji meteo, GMAP udostępnia użytkownikowi możliwość

wyboru rodzajów pomiarów przeznaczonych do wizualizacji. Wybór pewnego

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

zakresu pomiarów odnosi się do wszystkich stacji meteo przynależących do

wybranych wcześniej przez użytkownika rejonów.

Punkty kamerowe

GMAP wyposażony jest w mechanizm sprawdzania, czy dana stacja

meteorologiczna wyposażona jest w kamerę. Dodawanie informacji o punkcie

kamerowym realizowane jest automatycznie na poziomie skryptu getxml.php.

W tym miejscu systemu GMAP, użytkownik nie ma wpływu na umieszczanie, czy też

nie informacji o punktach kamerowych.

Parametryzacja

W poprzedniej części niniejszego rozdziału opisany został sposób

konfigurowania parametrów skryptu generującego dokumenty XML.

Parametry te można podzielić na dwie grupy:

−

parametry konfiguracyjne określające rejon(y) dla których generowane mają być

dokumenty XML,

−

parametry konfiguracyjne określające pomiary dla których generowane mają być

dokumenty XML.

Poniżej opisany jest sposób wykorzystania przez skrypt PHP obu grup parametrów.

Implementacja w oparciu o parametry konfiguracyjne określające rejon(y) dla których

generowane mają być dokumenty XML.

Na listingu 6 przedstawiona jest implemenatcja mechanizmu związanego z obsługą

zapytań do bazy danych, uwzględniająca parametry konfiguracyjne określające

rejon(y), dla których generowany ma być dokument XML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

$dbase

= new db();

$dbase

-> conn(

$host

$port

$user

$password

$dbname

);

$result

$dbase

-> performQuery("

select

stacje.stid,

stacja as nazwa_stacji,

rejony.rejnazwa as zarzadca,

dlugosc,

szerokosc

from stacje natural join

rejony where rejonid in(3,11,15) order by stid ASC

");

Listing 6. Połączenie z bazą danych i wybór rejonów w systemie GMAP MVT

źródło: opracowanie własne

Objaśnienia:

Linia nr 1. - Tworzony jest obiekt $dbase, będący reprezentacją połączenia

z bazą danych. Na potrzeby projektu GMAP została napisana specjalna klasa

o nazwie db, która obsługuje połączenie z meteorologiczną bazą danych – Linia nr 2.
Ponadto możliwe jest wykonywanie zapytań do bazy danych za pomocą przynależnej

jej metody o nazwie performQuery() - linia nr 3. Klasa db posiada mechanizm
sprawdzający czas wykonania się zapytania. W przypadku przekroczenia wartości

krytycznej (30 sekund) zapytanie jest anulowane, a użytkownik otrzymuje

o tym fakcie zwrotną informację.

Pod zmienną  $result  podstawiony zostanie rezultat zapytania SQL zwróconego
przez metodę performQuery(). Jest nim tabela której format został  przedstawiony
w  tabeli 8.

Treścią zapytania jest tekst:

„

select stacje.stid,stacja as nazwa_stacji,rejony.rejnazwa as

zarzadca,dlugosc,szerokosc from stacje natural join rejony
where rejid in(3,11,15) order by stacje.stid ASC

Z punktu widzenia użytkownika najważniejsze w powyższym zapytaniu są liczby

3,11,15 będące identyfikatorami rejonów – zarządców do których przynależą

stacje.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Proces przebiegu tego zapytania w systemie GMAP odbywa się w sposób

przedstawiony na rysunku 17 .

Rysunek 17. Plan zapytania do bazy danych łączącego tabele stacje i rejony

źródło: opracowanie własne

Wydobycie z bazy danych listy stacji meteo, przynależących do rejonów

o identyfikatorach 3,11,15 odbywa się na zasadzie łączenia ze sobą dwóch tabel:
stacje oraz rejony. Kryterium łączenia jest występowanie w kolejnych wierszach tabeli

stacje pola rejoinid o wartości będącej liczbą 3,11 lub 15.Łączenie tabel metodą

natural join jest możliwe w przypadku występowania w obu łączonych ze sobą

tabelach pola o tej samej nazwie i typie. W naszym przypadku tym polem jest rejid.

Łączenie tabel stacje i rejony odbywa się przy użyciu specjalnych tabel haszujących

(stąd krok Hash Join na planie zapytania). Tabele haszujące rezydują w pamięci

i bardzo efektywnie skracają czas wykonywania zapytań – dla przykładu zwrócenie

400 wierszy będących wynikiem złączenia tabel stacje i rejony zajęło łącznie 273ms.

Ostatnim krokiem na planie zapytania jest posortowanie wyników w sposób rosnący -

ASC względem pola stid z tabeli stacje.

Wykonanie się powyższego zapytania zwraca tabelę danych o formie przedstawionej

w tabeli 8 .

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Tabela 8. Przedstawienie wyników zapytania do bazy danych łączącego tabele stacje
i rejony

źródło: opracowanie własne

Widoczne jest w jaki sposób poszczególnym rejonom – zarządcom –

przyporządkowane zostały odpowiadające im stacje meteo.

Podsumowując, użytkownik korzystający z GMAP musi dysponować informacją

o rejonach i odpowiadających im identyfikatorach rejid. Wiedza ta wystarcza do

skonfigurowania GMAP pod kątem doboru zakresu przetwarzanych przez niego

stacji meteorologicznych.

Implementacja w oparciu o parametry konfiguracyjne określające pomiary dla których

generowane mają być dokumenty XML

System GMAP obsługuje następujące rodziny pomiarów:

−

temperaturowe

−

T_0,

−

T_20,

−

T_50,

−

T_2

−

związane z wiatrem:

−

krw,

−

prw

−

wilgotność:

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

−

wilg

−

opad:

−

opad

Objaśnienia rodzajów pomiarów należących do poszczególnych rodzin znajdują się

w rozdziale 5.2.1 .

Użytkownik definiuje je na początku pliku getxml.php poprzez przypisanie do

zmiennej $wykorzystywane_pomiary ich listy. Każdy rodzaj pomiaru oddzielany
jest on sąsiedniego za pomocą przecinka.

Przykład:
$wykorzystywane_pomiary = ”T_0,T_2,krw,prw”

System GMAP odpowiada za to, żeby każdej stacji meteo należącej do wybranych

przez użytkownika rejonów (Personalizacja) przyporządkowane zostały

odpowiadające jej rodzaje pomiarów. W przypadku, jeśli pewna stacja meteo nie

prowadzi jakiegoś z typów pomiaru, wówczas nie zostanie on w ogóle uwzględniony

w generowanych dokumentach XML.

Reasumując, od użytkownika GMAP wymaga się jedynie określenia listy

rejonów oraz listy pomiarów. Stanowią one dane wejściowe dla skryptu getxml.php.

Tworzenie dokumentów XML odbywa się w oparciu o dane pobierane z bazy

danych i można je podzielić na kilka stadiów – rysunek 18.

Poszczególne stadia są od siebie uzależnione, dlatego więc dokumenty XML

generowane są w ściśle określony sposób:

Poniższe punkty dotyczą schematu generowania dokumentów XML stanowiąc jego

opis.

Następujące po sobie stadia oznaczone zostały na rysunku 18 liczbami znajdującymi

się w szarych kółkach. Wstępem do pracy jest przygotowanie zakresu danych

wejściowych (

wybór rejonów, wybór pomiarów

). Po tej operacji kolejno następują:

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Przyporządkowanie stacji do rejonów

wynik: stworzenie listy stid, zawiera ona zbiór informacji o przyporządkowanych

stacjach,

Przyporządkowanie poszczególnym stacjom meteorologicznym na liście stid

przesłanych przez nie najnowszych – nie starszych niż 10 minut pakietów,

wynik: lista stid z powiązanymi identyfikatorami pakietów pktid

Wyodrębnienie zdefiniowanych przez użytkownika pomiarów

wynik: lista stid z powiązanymi identyfikatorami pakietów pktid z uwzględnieniem

wybranych przez użytkownika pomiarów

Dodanie do struktury opisanej w pkt. 3 informacji związanej z rodzajami

wielkości reprezentowanymi przez pomiary

wynik:lista stid z powiązanymi identyfikatorami pakietów pktid z uwzględnieniem

wybranych przez użytkownika pomiarów. Pomiary mają nadane im wielkości.

Uzupełnienie struktury informacją o występowaniu punktu kamerowego

przypisanego do danej stacji meteo.

Wynik: komplet informacji potrzebnej do generowania dokumentów XML

Generowanie dokumentów XML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Rysunek 18. Schemat generowania dokumentów XML w systemie GMAP MVT

źródło: opracowanie własne

W wyniku wykorzystania na potrzeby GMAP języka PHP jako interfejsu do

łączenia się z bazą danych oraz wykonywania na niej zapytań uwzględniających

konfigurację określoną przez użytkownika otrzymano poprawne i w pełni wartościowe

dokumenty XML.

5.3 W

KIERUNKU

OOGLE

APS

– J

AVA

CRIPT

POŁ CZENIU

AJAX

Wygenerowanie dokumentów w formacie XML zawierających dane dotyczące

stacji meteorologicznych (rozdział 5.2) stanowi punkt wyjścia dla podsystemu

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

należącego do GMAP, który zajmuje się ich konwersją do zmiennych języka

JavaScript. JavaScript jest jedynym językiem programowania, który może zostać

wykorzystany do wizualizacji obiektów na mapie Google.

Pracę tego podsystemu można podzielić na dwa etapy:

1. pobranie zawartości dokumentu XML, zaimplementowane jest ono

z wykorzystaniem technologii AJAX,

2. przetworzenie pobranej zawartości za pośrednictwem autorskiego zestawu

narzędzi JavaScirpt

Etap nr 1. obejmuje obsługę żądania pobrania dokumentu XML z serwera, następnie

importuje go,

Etap nr 2. obejmuje wykonanie konwersji wejściowego pobranego przy

wykorzystaniu technologii AJAX dokumentu XML do zmiennych języka JavaScript.

5.3.1 I

MPORT

XML

Pobieranie zawartości utworzonych przez system GMAP dokumentów

w formacie XML odbywa się na poziomie języka JavaScript za pośrednictwem funkcji

loadXmlDocument

(url). Przyjmuje ona jeden argument, jest nim tekst

w formacie URL

. Funkcja ta została zaprojektowana w sposób który umożliwia

identyfikację przeglądarki z której korzysta użytkownik i stworzenie odpowiadającego

jej obiektu AJAX. Obiekt ten nosi w systemie GMAP nazwę xmlReguestObject
i jest odpowiedzialny za pobranie dokumentu XML z lokalizacji wskazywanej przez

url. Opisywana funkcja

loadXmlDocument

(url)

ma za zadanie

przekonwertować pobrany dokument XML do postaci zmiennej JavaScript, będącej

jego nieprzetworzoną reprezentacją.

URL - (ang. Uniform Resource Locator) - ujednolicony format zasobów . Służy między innymi do
identyfikowania zasobów dostępnych w internecie.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Przykładowe użycie funkcji

loadXmlDocument

(url) może mieć postać:

sposób nr 1.

loadXmlDocument

("http://www.xml.com/xmldoc.xml");

Wywołanie powyższej linii kodu spowoduje, że system GMAP podejmie próbę

połączenia się z adresem internetowym http://www.xml.com/ celem pobrania
statycznego dokumentu o nazwie xmldoc.xml .

Innym sposobem wywołania opisywanej funkcji jest:

sposób nr 2.

loadXmlDocument

("http://www.xml.com/php_xmldoc_generator.php")

Przedstawia odmienne podejście w kontekście przechowywania dokumentu XML na

serwerze. W odróżnieniu od sposobu nr 1. który zakładał załadowanie statycznego

dokumentu, sposób nr 2. obrazuje możliwość pobrania dokumentu XML

wygenerowanego w sposób dynamiczny przy użyciu skryptu PHP o nazwie

php_xmldoc_generator.php. System GMAP obsługuje obydwa wyżej

wymienione sposoby pozyskiwania dokumentów XML.

W momencie udanego nawiązania połączenia z serwerem z którego ma

zostać pobrany wyznaczony dokument XML, system GMAP rozpoczyna jego

pobieranie za pomocą procedur zaimplementowanych przez AJAX. W międzyczasie

monitorowany jest postęp tego zadania.

Rozróżniane są 3 stany oparte o właściwość obiektu AJAX xmlReguestObject
reprezentującego połączenie nawiązane w celu pobrania dokumentu XML. Określają

one postęp w imporcie dokumentu:

−

data loading : oznacza on udaną inicjalizację,

−

data partially (available) : oznacza on, że część dokumentu XML została już

poprawnie zaimportowana,

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

−

data ready : oznacza on, że dokument w całości został poprawnie zaimportowany

i jest gotowy do wykorzystania.

Umieszczenie na stronie WWW użytkownika systemu GMAP pól stanu

importu dokumentów XML jest dostępne przy użyciu funkcji JavaScript

o nazwie

showProgressCells

(dom_object). Przyjmuje ona jako argument

obiekt typu DOM, przy założeniu że może on zawierać w sobie znacznik języka

HTML <div>.

5.3.2 P

RZETWARZANIE

XML

Po poprawnym pobraniu dokumentu, informacja o tym fakcie wraz

z nieprzetworzonym dokumentem XML przekazywana jest do funkcji JavaScript

należących do autorskiego zestawu narzędzi. Bazuje on na wykorzystaniu

nieprzetworzonego dokumentu XML znajdującego się w postaci zmiennej JavaScript.

Proces przetwarzania opiera się na rozbiciu całości dokumentu na mniejsze

jednostki. Każda z jednostek opisuje jedną stację meteorologiczną i zawiera

specyficzne dla niej informacje (położenie geograficzne, nazwa, rejon/zarządca) oraz

dane meteorologiczne.

Funkcją należącą do autorskiego zestawu narzędzi JavaScript która realizuje

dekompozycję dokumentu XML do mniejszych jednostek jest

processXMLtoGM

(js_xml_document). Przyjmuje ona jeden argument wejściowy,

jest nim nieprzetworzony dokument XML - js_xml_document.

Funkcja ta stanowi punkt połączenia pomiędzy systemem GMAP a aplikacją

użytkownika, który otrzymuje możliwość wizualizacji na mapie Google punktów

będącymi odzwierciedleniem stacji meteorologicznych.

Istotę działania oraz domyślny format zapisu jednostek wytwarzanych przez funkcję

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

processXMLtoGM()

przedstawia rysunek 19.

Rysunek 19. Konwersja dokumentu XML przez system GMAP MVT do zmiennych JavaScript

źródło: opracowanie własne

Objaśnienia:

−

Niebieskie

strzałki zwrócone są w kierunku jednostek powstałych na bazie danych

pochodzących z tabel informacyjnych meteorologicznej bazy danych,

czerwone

dane meteorologiczne. Opis elementów można znaleźć również

w rozdziale 4.1.1 .

−

_name_element : zapisane są w niej informacje o nazwie stacji meteorologicznej,

−

_maintainer_element : zapisane są w niej informacje o rejonie/zarządcy stacji

meteorologicznej,

−

_longitude_element : zawiera liczbę będącą wartością długości geograficznej

stacji meteorologicznej,

−

_latitude_element : zawiera liczbę będącą wartością szerokości geograficznej

stacji meteorologicznej,

−

var_camdir : przechowywuje informację o przynależności do stacji punktu

kamerowego,

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

−

var_station_measurements : przechowuje listę złożoną z rodzajów pomiarów

i odpowiadających im wartości. Format listy jest następujący:

rodzaj_pomiaru_1:wartość_1,rodzaj_pomiaru_2:wartość_2, . . .

przykład:

T_20:15.7,opad:2,krw:234.1,prw:1.8

Znaki dwukropka „ : ” oddzielają rodzaj pomiaru od jego wartości, przecinki „ , ”

dzielą następujące po sobie pary rodzaj_pomiaru:wartość .

Każdy zestaw jednostek:_name_element, _maintainer_element, _longitude_element,

_latitude_element, var_camdir, var_station_measurements stanowi opis pojedynczej

stacji meteorologicznej.

System GMAP umożliwia użytkownikowi ingerencję w nazewnictwo jednostek

oraz format listy rodzajów pomiarów i odpowiadających im wartości. Odbywa się to

poprzez przedefiniowanie ciała funkcji

processXMLtoGM()

. Zmiana nazw

zmiennych polega na zastąpieniu w kodzie funkcji starych (domyślnych) na nowe.

Zmiana formatu listy ogranicza się do skorygowania separatorów „ ; ” oraz „ , ”. Nie

zaleca się zmiany rodzaju pomiaru, gdyż niesie on ze sobą informację

o wykorzystywanym przez daną stację meteorologiczną rodzaju czujnika.

Podsumowując, dzięki wykorzystaniu technologii AJAX do pobierania

dokumentów XML oraz stworzonemu autorskiemu zestawowi narzędzi, który

przetwarza je do postaci jednostkowych – użytkownik GMAP otrzymuje dane

w formie która umożliwia umieszczenie ich na mapie Google. Sposób implementacji

aplikacji użytkownika ma wpływ na końcowy efekt przeprowadzanej wizualizacji, gdyż

zarówno GMAP jak i Google Maps API są konfigurowywalne.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

5.4 P

REZENTACJA

DZIAŁANIA

SYSTEMU

GMAP MVT

System GMAP MVT jest zbiorem narzędzi służących do wizualizacji wielkości

meteorologicznych opartym na Google Maps, Ajax oraz PHP. We wcześniejszych

rozdziałach opisane zostały zasady według kórych funkcjonuje GMAP oraz narzędzia

programistyczne umożliwiające współpracę użytkownika z systemem. Ostatnim

i docelowym komponentem systemu GMAP jest warstwa prezentacji oparta

o wizualizację działania systemu na mapie Google.

Wizualizacja została zaimplementowana przy wykorzystaniu interfejsu Google

Maps API. Do jej obsługi zaprojektowane zintegrowane z GMAP funkcje JavaScript,

stanowiące szablon wizualizacyjny dla użytkowników systemu. Każda z opisywanych

w niniejszym rodziale funkcji wykorzystujących API Google może być modyfikowana

i dostosowywana do potrzeb i wymagań użytkownika. Stacje meteorologiczne

symbolizowane są na mapie za pomocą markerów. Po kliknięciu na marker otwiera

się okienko informacyjne zawierające dane dotyczące stacji.

Warstwa prezentacji GMAP wykorzystuje do wizualizacji dane przechowywane

w zmiennych języka JavaScipt. Sposób ich uzyskania opisany jest w rozdziale 5.3.2 .

Mechanizm wizualizacji w systemie GMAP wykorzystujący Google Maps API można

podzielić na następujące etapy:

1. Utworzenie mapy Google i umieszczenie jej na stronie WWW,

2. stworzenie specjalnego obiektu Google Maps API o typie GMarkerManager,

będącego zarządcą umieszczanych na mapie danych,

3. przygotowanie i utworzenie markerów,

4. wyświetlenie markerów.

Szczegółowy opis każdego z etapów znajduje się w dalszej części pracy.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

1. Utworzenie mapy Google i umieszczenie jej na stronie WWW.

Mapa Google umieszczona jest wewnątrz znacznika <div>

dokumentu

HTML. Wymaganym jest zdefiniowanie atrybutu id będącym jego unikalnym
identyfikatorem w obrębie dokumentu oraz wymiarów tego znacznika tj. jego

szerokości oraz wysokości – podawanej w pikselach bądź procentowo w odniesieniu

do rozdzielczości ekranu. Tworzona mapa ma wielkość taką samą jak znacznik

<div> w której się znajduje.

Wykorzystana do przeprowadzenia prezentacji systemu mapa ma wymiary:

−

szerokość: 80% rozdzielczości poziomej ekranu,

−

wysokość: 550 pikseli.

Są to wartości dobrane w sposób umożliwiający wygodne korzystanie z mapy

w najpopularniejszym zakresie rozdzielczości ekranu podanej w pikselach: 800x600,

1024x768 oraz 1280x1024 .

Mapę Google umieszczona została w dokumencie HTML w następujący sposób:

−

stworzony został znacznik <div> będący kontenerem dla mapy (język HTML):

−

do utworzonego znacznika dodany został obiekt mapy (język JavaScript, Google

Maps API):

map = new

Gmap2

(document.getElementById("map_div"));

2. Stworzenie specjalnego obiektu Google Maps API o typie GMarkerManager,

będącego zarządcą umieszczanych na mapie danych.

Obiekt typu GmarkerManager służy do umieszczania w nim zbioru zbioru

markerów. Sposób w jaki jest on tworzony został opisany w rozdziale 4.6.

W GMAP obiekt GmarkerManager występuje on pod nazwą markermanager.

<div> - znacznik oferujący ogólny mechanizm dodawania struktury do dokumentów, grupuje inne
znaczniki. [15]

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

3. Przygotowanie i utworzenie markerów.

Przyjęto, że każdy marker odzwierciedla na mapie Google dokładnie jedną

stację meteorologiczną. Marker składa się z ikony oraz okienka informacyjnego.

Rola okienka informacyjnego polega na wyświetleniu dodatkowych treści w oknie

mapy. Odbywa się to poprzez kliknięcie lewym przyciskiem myszy na ikonę markera

znajdujacego się na mapie.

W kontekście konfiguracji pojedyńczego markera system GMAP umożliwia

użytkownikowi:

1. Utworzenie markera.

Za tworzenie markera w systemie GMAP odpowiedzialna jest funkcja

createTabbedMarker

(coords,icon,t1t,t1c,t2t,2tc,caminfo)

Zwraca ona do systemu GMAP obiekt typu GMarker reprezentujący pojedyńczą

stację meteorologiczną. Wywoływana jest ona z następującymi argumentami:

−

coords : współrzędne geograficzne w postaci obiektu typu GLatLng – więcej

informacji na jego temat można znaleźć w rozdziale 4.6 .

−

icon : obiekt typu GIcon, zawierający parametry ikony symbolizującej tworzony

marker. Ikona musi być wcześniej utworzona za pomocą funkcji

setIconAppearance()

opisanej w dalszej części pracy.

−

t1t : tytuł zakładki nr. 1 w okienku informacyjnym,

−

t1c : treść zawartości okienka informacyjnego nr 1.

−

t2t : tytuł zakładki nr. 2 w okienku informacyjnym,

−

t2c : treść zawartości okienka informacyjnego nr 2.

−

caminfo : informacja o tym, czy stacja meteorologiczna wyposażona jest

w punkt kamerowy.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

2. Utworzenie ikony.

Do utworzenia i zmiany wyglądu ikony w systemie GMAP służy funkcja

o nazwie:

setIconAppearance

(imageURL, width, height, anchorx, anchory)

Zwraca ona do systemu GMAP obiekt typu GIcon będący reprezentacją ikony.

Wywoływana jest ona z argumentami

−

imageURL : adres zasobu URL opisujący ścieżkę dostępu do pliku obrazu ikony.

−

width : szerokość obrazu ikony, podawana w pikselach

−

height : wysokość obrazu ikony, podawana w pikselach

−

anchorx : zakotwiczenie ikony na mapie w poziomie, licząc od jej górnego

lewego rogu

−

anchory : zakotwiczenie ikony w pionie na mapie, licząc od jej lewego górnego

rogu

3. Zdefiniowanie zawartości okienka informacyjnego.

GMAP jest zestawem narzędzi dedykowanym do wizualizacji zjawisk

meteorologicznych, zatem na zawartość okienka informacyjnego składają się dane

pobrane z meteorologicznej bazy danych, uprzednio odpowiednio przetworzone.

Sposób tworzenia tych danych oraz ich reprezentacja zostały szczegółowo opisane

w rozdziale 5.3.2 .

Zawartość okienka informacyjnego definiowana jest we wspomnianej

wcześniej funkcji tworzącej marker :

createTabbedMarker()

. Funkcja ta jest

zaprojektowana w sposób pozwalający na intuicyjne wpływanie na wygląd

i zawartość okienka informacyjnego, wymaga ono zgodności treści w nim

umieszczanych z językiem HTML.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Wywołanie funkcji

createTabbedMarker()

createTabbedMarker

(

new

GlatLng

(_longitude_element,_latitude_element),

'info',

_name_element,
'pomiary',

var_station_measurements,

var_camdir)

Za odpowiednie argumenty funkcji podstawione zostają dane odpowiadające

jednej stacji meteorologicznej. Ich format oraz znaczenia wyjaśnione są w rozdziale

5.3.2 .Zakładki okienka informacyjnego przyjęły nazwy odpowiednio info oraz

pomiary. Treścią zakładki info jest nazwa stacji, natomiast treścią zakładki

pomiary jest lista przejrzyście sformatowanych przez funkcję rodzajów pomiarów

i ich wartości. Umieszczona jest również informacja o punkcie kamerowym.

Przykładowy wygląd okienka informacyjnego przedstawiony został na rysunku 20 .

Rysunek 20. Przykładowy wygląd okienka informacyjnego na przykładzie stacji

meteorologicznej Dobrodzień

źródło: opracowanie własne

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Kliknięcie myszką na napis

obraz kamerowy

powoduje otwarcie się w nowym oknie

witryny WWW zawierającej obraz zarejestrowany w punkcie kamerowym stacji

Dobrodzień – rysunek 21.

Rysunek 21. Obraz kamerowy, punkt kamerowy Dobrodzień

źródło: opracowanie własne

4. Wyświetlenie markerów.

Wyświetlanie markerów realizowane jest przy pomocy obiektu typu

GMarkerManager. Kolejne markery dodawane są do obiektu markermanager za
pomocą metody addMarker.

markermanager.addMarker(marker);

Po dodaniu ostatniego markera, są one wyświetlane na mapie Google:

markermanager.refresh();

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

System GMAP umożliwia wizualizację bardzo dużej ilości markerków na jednej

mapie. Fakt ten czyni go skalowalnym, dając tym samym szerokie możliwości

rozwoju [10]. Na rysunku 22 przedstawiona została wizualizacja 256 stacji

meteorologicznych należących do systemu fiirmy Trax Elektronik.

Rysunek 22. Wizualizacja systemu stacji meteorologicznych przy użyciu

systemu GMAP MVT

źródło: opracowanie własne

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

6. P

ODSUMOWANIE

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Inspiracją do napisania niniejszej pracy była chęć stworzenia systemu

korzystającego z nowoczesnych technologii teleinformatycznych dla potrzeb osłony

meteorologicznej.

Celem pracy było stworzenie zestawu narzędzi do wizualizacji zjawisk

meteorologicznych GMAP MVT (Google Maps Ajax and PHP Meteo Visualization

Toolkit). Źródło danych stanowi meteorologiczna baza danych będąca własnością

firmy Trax Elektronik. Zaprojektowany system obejmuje pobieranie, przetwarzanie

oraz prezentację danych na internetowych mapach Google.

Reprezantację informacji dotyczących stacji oraz pomiarów meteorologicznych

pobieranych z bazy danych stanowią dokumenty w formacie XML. Są one tworzone

przy użyciu języka skryptowego PHP. Dokumenty zawierają aktualne pomiary tzn.

nie starsze niż 10 minut od czasu ich zarejestrowania. Wynika to ze specyfiki pracy

systemu stacji meteorologicznych firmy Trax Elektronik. Dalsza konwersja danych

pomiędzy formatem XML a ich odpowiednikiem dla interfejsu wizualizacyjnego –

Google Maps API – zrealizowana została przy pomocy autorskiego zestawu narzędzi

programistycznych. Fundament narzędzi stanowią skrypty napisane w języku

JavaScript wykorzystujące technologię AJAX. Wizualizacja danych znajdujących się

w postaci zmiennych języka JavaScript odbywa się na mapach Google Maps.

Stworzone narzędzia umożliwiają rozbudowaną konfigurację systemu GMAP

MVT. Korzystający z nich użytkownik posiada możliwość ingerencji w pracę systemu

na poziomach dostępu do danych oraz warstwy prezentacji – wizualizacji.

Rekonfiguracja odbywa się poprzez parametryzację lub modyfikację plików

źródłowych wchodzących w skład systemu.

Wdrażanie internetowych systemów wizualizacji zjawisk meteorologicznych

jest korzystne z kilku względów:

−

wizualizacja danych na mapach jest sposobem na przejrzystą i atrakcyjną

prezentację danych meteorologicznych,

−

umożliwiają one szybką ocenę panujących warunków pogodowych,

−

systemy internetowy dostępny są dla szerokiego grona użytkowników.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

Ostatni element listy wskazuje na ograniczenia czasowe, które musi spełniać

zaprojektowana aplikacja. GMAP MVT jest systemem (internetowym) działającym

online, stąd ważne jest aby pracował w sposób wydajny i stabliny. Wymaga się od

niego możliwie jak najkrótszych, najwyżej kilku-kilkunasto sekundowych opóźnień

pomiędzy wysłaniem żądania wizualizacji a uzyskaniem efektu w oknie przeglądarki.

Aby zagwarantować płynną pracę, system GMAP MVT umożliwia wybór sposobu

dostępu do źródła informacji - bazy danych. Ma to szczególne znaczenie w

przypadku instalacji na serwerach pracujących pod dużym obciążeniem.

Za pomocą GMAP MVT przeprowadzona została wizualizacja blisko 350 stacji

meteorologicznych na mapach internetowych Google. Oferowane przez interfejs

Google Maps API wsparcie dla technologii AJAX jest doskonałym sposobem

przetwarzania dużych ilości danych do celów prezentacyjnych.

Pewnym mankamentem wynikającym ze specyfiki JavaScript na którym oparte

jest Google Maps API było spowolnienie pracy systemu wizualizacji

w przypadku szczególnie wysokiej liczby obiektów (typowo 500, zależna od

konfiguracji sprzętowej użytkownika) prezentowanych na mapie Google. Problem ten

można w pewnym stopniu rozwiązać stosując tzw. zarządcę markerów

dostarczanego przez Google Maps API. Wadą okazał się również brak możliwości

definiowania własnych podkładów rastrowych dla map, taka funkcjonalność

umożliwiłaby np. tworzenie map izobarycznych i termicznych na określonych

obszarach.

Użyte podczas projektowania systemu popularne oraz dobrze

udokumentowane technologie (AJAX), format danych (XML) i języki programowania

(PHP, JavaScript) czynią go otwartym na ewentualne modyfikacje w przyszłości.

Już w chwili obecnej może on pełnić funkcję źródła danych dla odrębnych systemów,

wykorzystujących format XML. Zastosowanie GMAP MVT nie musi ograniczać się do

wizualizacji zjawisk meteorologicznych. Po dokonaniu kilku zmian w systemie m.in.

struktury bazy danych oraz struktury dokumentów XML - może on zostać

wykorzystany do prezentacji informacji o zupełnie odmiennym charakterze.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

GMAP MVT może zostać w perspektywie dalszego rozwoju uzupełniony

o mechanizmy identyfikujące użytkownika np. metodą login/hasło. Pozwoliłoby to na

zdefiniowanie różnych poziomów dostępu do systemu oraz dalszą jego

personalizację i dostosowanie do wymogów użytkownika.

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

7. S

PIS

RYSUNKÓW

Rysunek 1. Liczba zarejestrowanych na świecie domen internetowych .....................7

Rysunek 2. Kopalnia Soli w Bochni przedstawiona na mapie Google..........................9

Rysunek 3. Zarys projektowanego zestawu narzędzi.................................................11

Rysunek 4. Ogródek meteorologiczny........................................................................13

Rysunek 5. Prognozujący superkomputer SGI Origin 3800.......................................17

Rysunek 6. Schemat ideowy podsystemu akwizycji i archiwizacji danych.................18

Rysunek 7. Stacje meteorologiczne GDDKiA w systemie firmy Trax Elektronik ......19

Rysunek 8. Perspektywa korzystania z bazy danych z punktu widzenia dostępu oraz

uprawnień użytkowników.......................................................................23

Rysunek 9. Relacje pomiędzy tabelami bazodanowymi projektowanego systemu....25

Rysunek 10. Przykładowa hierarchia dokumentu XML...............................................40

Rysunek 11. Schemat przetwarzania dokumentu XML przez parser.........................41

Rysunek 12. Hierarchia obiektów DOM......................................................................47

Rysunek 13. Synchroniczna i asynchroniczna aplikacja internetowa.........................51

Rysunek 14. Zamek Wawelski w Krakowie oglądany na mapie Google....................55

Rysunek 15. Schemat ideowy systemu GMAP MVT..................................................60

Rysunek 16. Schemat hierarchii oraz podziału elementów w zaprojektowanym

dokumencie XML....................................................................................66

Rysunek 17. Plan zapytania do bazy danych łączącego tabele stacje i rejony..........72

Rysunek 18. Schemat generowania dokumentów XML w systemie GMAP MVT......76

Rysunek 19. Konwersja dokumentu XML przez system GMAP MVT do zmiennych

JavaScript...............................................................................................80

Rysunek 20. Przykładowy wygląd okienka informacyjnego na przykładzie stacji

meteorologicznej Dobrodzień.................................................................86

Rysunek 21. Obraz kamerowy, punkt kamerowy Dobrodzień....................................87

Rysunek 22. Wizualizacja systemu stacji meteorologicznych przy użyciu

systemu GMAP MVT..............................................................................88

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

8. S

PIS

TABEL

Tabela 1. Założenia „CRUD” .......................................................................................24

Tabela 2. Tabela bazodanowa stacje...........................................................................27

Tabela 3. Tabela bazodanowa rejony..........................................................................27

Tabela 4. Tabela bazodanowa pkamerowe.................................................................28

Tabela 5. Tabela bazodanowa pakiety.........................................................................29

Tabela 6. Tabela bazodanowa pomiary.......................................................................30

Tabela 7. Tabela bazodanowa wielkosci......................................................................30

Tabela 8. Przedstawienie wyników zapytania do bazy danych łączącego tabele

stacje i rejony...............................................................................................72

9. S

PIS

LISTINGÓW

Listing 1. Fragment skryptu PHP generującego dokument w formacie XML .............33

Listing 2. Przykładowy dokument w formacie XML.....................................................38

Listing 3. Kod JavaScript w dokumencie HTML..........................................................43

Listing 4. Dodawanie obsługi AJAX w zależności od wykorzystywanej przeglądarki

internetowej..................................................................................................53

Listing 5. Struktura zaprojektowanego dokumentu XML na przykładzie stacji

pomiarowych Cewice oraz Jana Pawła II....................................................65

Listing 6. Połączenie z bazą danych i wybór rejonów w systemie GMAP MVT..........71

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

10. B

IBLIOGRAFIA

[1] Internetowa Encyklopedia PWN. 3 kwietnia 2008,

http://www.encyklopedia.pwn.pl

[2] Internet Systems Consortium (2008): Internet Domain Survey. 24 maja 2008,

http://www.isc.org

[3] Przemysław Kazienko, Krzysztof Gwiazda. XML na poważnie.

Wyd. Helion, 2006,

[4] Instytut Meteorologii i Gospodarki Wodnej: Własne projekty rozwojowe – Projekt

SMOK. 1 czerwca 2008,

http://www.imgw.pl

[5] Trax Elektronik (2008): Kamery na drogach Polski. 23 maja 2008,

http://www.traxelektronik.pl

[6] PostgreSQL Database Project (2008): PostgreSQL Documentation. maja 2008,

http://www.postgresql.org/docs

[7] Jennifer Madden (2007): Introduction do dynamic HTML . 1 maja 2008.

http://www.jennifermadden.com

[8] Lokalizator internetowy Fullinfo (2008): Turystyka w Polsce, 3 maja 2008,

http://www.fullinfo.pl

[9] Google Maps API (2008): Google Maps API Reference, 17 stycznia 2008,

http://code.google.com/apis/maps/documentation/

[10] Marta Zwolska. System Wizualizacji Informacji Meteorologicznych SWIM

wykorzystujacy interfejs Google Maps. Praca magisterska.
Politechnika Krakowska, 2008

[11] Steve Holzner. Ajax Bible. John Wiley & sons. Wyd 2007

[12] Steve Holzner. XML – Vademecum Profesjonalisty. Wyd. Helion, 2001

[13] Steve Holzner. Ajax for Dummies. Wyd. Wiley Publishing Inc, 2006

OŃ

GMAP MVT –

DEDYKOWANY

BACK

END

DLA

POTRZEB

WIZUALIZACJI

PRACA

MAGISTERSKA

ZJAWISK

METEOROLOGICZNYCH

RODOWISKU

OOGLE

APS

__________________________________________________________________________________________

[14] Encyklopedia i słownik informatyczny (2008). 21 maja 2008,

http://www.i-slownik.pl

[15] World Wide Web Consortium. W3C Document Object Model, 23 kwietnia 2008,

http://www.w3c.org

[16] Fabian Guiset: DOM i JavaScript, 25 kwietnia 2008,

http://www.developer.mozilla.org

[17] Wikipedia, Wolna Encyklopedia, 13 kwietnia 2008,

http://www.wikipedia.org