Univerzita Palackého v Olomouci Přírodovědecká fakulta Katedra geoinformatiky
Filip JUNG
ANIMOVANÉ MAPY MĚSTSKÉ HROMADNÉ DOPRAVY PŘEROVA
bakalářská práce
Vedoucí práce: Prof. RNDr. Vít Voženílek, CSc.
Prohlašuji, že jsem zadanou diplomovou práci řešil sám a že jsem uvedl veškerou literaturu. Všechna poskytnutá vstupní digitální data nebudu bez souhlasu školy poskytovat. Olomouc, 27.května 2008
…….………………………..
OBSAH 1. 2. 3. 4.
Úvod....................................................................................................... - 6 Cíl práce................................................................................................. - 7 Metody a postup zpracování .................................................................. - 8 Vytvoření aplikace................................................................................. - 9 4.1. Definování požadavků na aplikaci................................................. - 9 4.2. Použité technologie...................................................................... - 10 4.2.1. MySQL ................................................................................ - 10 4.2.2. PHP ...................................................................................... - 13 4.2.3. Scalable Vector Graphics..................................................... - 14 4.2.4. JavaScript............................................................................. - 17 4.2.5. DOM .................................................................................... - 18 4.2.6. Ajax...................................................................................... - 19 4.3. Data a jejich příprava ................................................................... - 20 4.3.1. Optimalizace a ochrana dat.................................................. - 22 4.4. Nastavení aplikace - formuláře .................................................... - 23 4.5. Databáze....................................................................................... - 23 4.6. Vytvoření SVG dokumentu ......................................................... - 24 4.6.1. Vytvoření animace............................................................... - 25 4.7. GUI .............................................................................................. - 26 5. Výsledky .............................................................................................. - 29 6. Současné použití animací v kartografických dílech ............................ - 30 6.1. Prostředky pro tvorbu animací..................................................... - 30 6.1.1. Animovaný GIF ................................................................... - 30 6.1.2. Java Applety ........................................................................ - 31 6.1.3. Flash..................................................................................... - 32 6.1.4. Ostatní.................................................................................. - 32 6.2. Existující kartografické projekty s animacemi ............................ - 33 6.2.1. Animated Atlas of Flight Traffic over North America ........ - 33 6.2.2. Map24 .................................................................................. - 34 6.2.3. Animated atlas of African History (AAAH)........................ - 34 6.2.4. Animated atlas – The Growth of a Nation ........................... - 35 6.2.5. Simulace systému BART v San Franciscu .......................... - 36 7. Diskuze ................................................................................................ - 38 8. Závěr .................................................................................................... - 41 9. Zdroje................................................................................................... - 42 10. Summary.............................................................................................. - 44 Přílohy.......................................................................................................... - 45 -
-5-
1. Úvod S příchodem multimédií se kartografům (a nejen jim) dostali do rukou nebývale bohaté možnosti ve vytváření nových způsobů vizualizace. Omezení papírových map ve světě digitálních produktů neexistují, ovšem i počítačová tvorba map má své bariéry. Mapa má schopnost názorně vyjadřovat na relativně malé ploše velké množství informací. A to nejen o poloze jednotlivých objektů v prostoru ale také o jejich vlastnostech. Tyto vlastnosti jsou vyjádřeny vhodnými kartografickými zobrazovacími prostředky. Počítačová kartografie nám vedle klasických metod nabízí i dynamické alternativy. Jedním z mnoha přínosů počítačové kartografie jsou i nové možnosti vyjadřování obsahu mapy pomocí dynamických prostředků, mezi něž řadíme zvuk, dynamické znaky, animaci a virtuální realitu. Mapa nemusí nutně obsahovat dynamické, v čase se měnící, jevy, aby bylo možné použít některý z uvedených prostředků. U dynamických jevů je to pak především animace, která představuje silný nástroj pro přiblížení jevu a větší názornost jeho vyjádření. Doprava obecně je bezpochyby časově proměnný, prostorově založený jev, který je proto lépe zobrazovat digitálně než na papírových mapách. Klasické mapy nabízí pouze omezené prostředky pro znázornění dynamiky. Mezi ně můžeme počítat například stuhové diagramy, směrové liniové znaky, kartodiagramy vázané na linii. Ty jsou limitovány hlavně omezeným znázorněním změny jevu v čase. Pro jiné časové období je potřeba vytvořit novou mapu, případně přidat do jedné mapy více diagramů apod. Animace nám dává nástroje tyto stávající možnosti vylepšit, a co více vytvářet také nové vhodné prostředky.
-6-
2. Cíl práce Cílem této práce bylo použít moderní prostředky počítačové kartografie k vizualizaci městské hromadné dopravy v Přerově. Pomocí vhodných programových prostředků byla vytvořena aplikace umožňující zobrazovaní interaktivních animovaných map městské hromadné dopravy. Jako nejvhodnější médium pro tento účel byl vybrán internet, hlavně pro svou rozšířenost a nenáročnost na softwarové vybavení koncového uživatele. Při vývoji aplikace se bude dbát na dodržování standardů použitých formátů a technologií, dále také na platné kartografická pravidla a zásady. Výsledné mapy budou vznikat dynamicky, tj. na základě voleb uživatele. Nakonec bude provedena diskuze nad současnými možnostmi v tvorbě kartografických animací a jejich použití v kartografii.
-7-
3. Metody a postup zpracování Pro vývoj a běh aplikace byly použity internetové technologie, při jejichž volbě bylo třeba zohlednit požadavky na aplikaci. Po předchozích zkušenostech a četných referencích o webových aplikacích obsahujících mapy bylo v podstatě několik možností. První byla využít mapový server pro uložení podkladových dat a vytvořit nadstavbu, která by zajišťovala zobrazování animací. Toto řešení nebylo shledáno jako vhodné z důvodu složitého zakomponování animací do mapy. Další možností bylo vytvořit aplikaci vlastní, která by byla vhodná pro zobrazení animací a podkladových dat. Tady se opět nabízelo více řešení. Jako nejvhodnější bylo zhodnoceno použití technologie Flash od firmy Adobe, a nebo využití standardizované formy jazyka XML (eXtensible Markup Language), konkrétně SVG (Scalable Vector Graphics)
ve
spojení
s technologií
SMIL
(Synchronized
Multimedia
Integration Language) a programovacím jazykem JavaScript. Konečná volba padla na otevřenější variantu, tedy na SVG definované jako standard institucí World Wide Web Consortium. V kapitole diskuze jsou zhodnoceny výhody a nevýhody jednotlivých metod. Nejprve tedy proběhlo nastudování potřebné literatury, jak už kartografické tak i zaměřené na použité technologie. Současně byly zkoumány stávající kartografické aplikace využívající animace. Ze získaných poznatků potom začala vznikat aplikace. Vývoj se skládal z několika kroků: 1. zpracování podkladových dat poskytnutých z Magistrátu města Přerova a jejich úprava pro potřeby aplikace pomocí programu ArcGIS 9.2, 2. tvorba struktury databáze MySQL a její naplnění daty, 3. tvorba webového prostředí pro přístup k aplikaci, 4. programování funkcí aplikace ve skriptovacím jazyce PHP, pro psaní kódu byl použity programy Notepad++ v4.8.5 a PSPad v4.5.2, 5. testování a optimalizace aplikace.
-8-
4. Vytvoření aplikace 4.1. Definování požadavků na aplikaci Při plánování celkové struktury bylo nutno nejprve definovat cíle, uživatele a účel aplikace. Rozlišení uživatelských skupin je zvláště důležité při vytváření designu rozhraní, jenž musí splňovat potřeby a přání uživatele. Možné uspořádání jednotlivých prvků může být následující: úvodní webová stránka – výběrová stránka – hlavní stránka, obsahující interface (Voženílek, 2005). Toto schéma je použito i v případě vyvíjené aplikace. V prostředí internetu mají uživatelé určitá očekávání. Jde především o interaktivitu, protože pokud uživatel a stránka vzájemně nekomunikují, zhodnotí uživatel stránku jako nudnou a pravděpodobně odejde. Musíme předpokládat že uživatelé jsou netrpěliví a chtějí mapy vidět rychle, což klade omezení na velikost stahovaného souboru (Kraak, 2004). Webová mapa má některé výhody, které jsou společné s ostatními digitálními mapami. Jedná se změnu měřítka, posun, vypínání či zapínání vrstev a dotazovaní. Klepnutí na symbol může otevřít přístup do databáze schované za mapou. Mohou být provedeny jednoduché operace jako například měření vzdáleností a ploch (Kraak, 2004). Hlavní výhodou takovýchto map a aplikací jsou již zmíněné minimální nároky na softwarové vybavení uživatele, čili mapa může být přístupná odkudkoli a kýmkoli. Mapa může také fungovat jako rozhraní k dalším geografickým i negeografickým informacím na internetu. Ze všech těchto předpokladů vycházel návrh vytvářené aplikace. Uživatelé Mezi uživatele aplikace se řadí kartografové, zajímající se o problematiku mapových animací, zájemci o implementace formátu SVG, ale také zájemci o městskou hromadnou dopravu v Přerově. K nim lze počítat například Magistrát města Přerova, který je zároveň poskytovatelem podkladových dat, Krajský
-9-
úřad Olomouci, jenž byl o vznikající aplikaci informován, a v neposlední řadě také občané města Přerova. Dále byl osloven Tomáš Brada, student Univerzity Pardubice, který spravuje hojně navštěvované neoficiální stránky o MHD v Přerově, a odkaz na vytvořenou aplikaci bude na těchto stránkách umístěn, což zaručí propagaci a využití aplikace. Funkce Hlavní funkcí aplikace je vizualizace městské hromadné dopravy v Přerově ve webovém prostředí. Aplikace je interaktivní a dynamická. Uživatel tedy bude moci ovlivnit přenášenou zprávu tak, aby získal danou informaci co nejefektivněji. Tímto procesem se mapa mění z předpřipravené prezentace k vizualizaci, kde uživatel může provádět změny (Voženílek, 2005). Lze ovlivnit zobrazované linky, počáteční čas, den, zrychlení animace a podkladové vrstvy. Tvorba aplikace byla zdlouhavá a provázela ji řada problémů souvisejících především s nekompatibilitou webových prohlížečů. Ve výsledku aplikace funguje korektně pouze v prohlížeči Opera, jenž ze všech nejlépe dodržuje použité standarty. V následujícím textu je popsáno jak aplikace vznikala a jak vlastně pracuje.
4.2. Použité technologie Při volbě použitých technologií se vzcházelo hlavně z předchozích zkušeností a pozitivních referencí při použití daných technologií v podobných případech, dále také byly vybrány otevřené technologie, aby byly minimalizovány nároky na pořizování vývojových prostředí. 4.2.1. MySQL Při volbě databáze byla použita MySQL, nyní už od firmy Sun Microsystems. MySQL je rychlý a stabilní databázový systém. Nabízí bohatý a velmi užitečný soubor funkcí. Je podporován skripty PHP, CGI nebo ASP dle
- 10 -
zvolené platformy virtuálního serveru. Databázi MySQL mohou využívat virtuální servery běžící na platformě Linux/Unix i Windows 2000 (Dobešová 2004). Je považován za úspěšného průkopníka dvojího licencování – je k dispozici jak pod bezplatnou licencí GPL, tak pod komerční placenou licencí. MySQL je multiplatformní databáze a komunikace s ní probíhá pomocí jazyka SQL. Podobně jako u ostatních SQL databází se jedná o dialekt tohoto jazyka s některými rozšířeními. Pro svou snadnou implementovatelnost, výkon a především díky tomu, že se jedná o volně šiřitelný software, má vysoký podíl na v současné době používaných databázích. Jak je uvedeno ve referenčním manuálu, MySQL je opatřen prostorovými nadstavbami
(spatial
extensions)
podle
specifikací
Open
Geospatial
Consortium (OGC). V roce 1997 OGC zveřejnilo OpenGIS® Simple Features Specifications For SQL, dokument, který navrhuje několik konceptů jak rozšířit relační databázové systémy využívající SQL tak, aby podporovaly prostorová data. MySQL zahrnuje podmnožinu prostředí SQL s geometrickými typy. To znamená, že SQL prostředí bylo rozšířeno o sadu geometrických typů. Pro reprezentaci geometrie v dotazech jsou používány tyto standardní datové formáty: - Well-Known Text (WKT) format - Well-Known Binary (WKB) format Uvnitř databáze je geometrie uložena ve formátu, který se nepodobá WKT ani WKB. Formát WKT Formát WKT je navrhnut pro výměnu dat v ASCII. Zde je několik příkladů reprezentace geometrických objektů ve formátu WKT: Bod: POINT(15 20)
- souřadnice bodu nejsou odděleny čárkou.
- 11 -
Linie (LineString), zde se čtyřmi body: LINESTRING(0 0, 10 10, 20 25, 50 60)
– dvojice souřadnic jsou
odděleny čárkou Polygon, zde s jedním vnitřním a vnějším okrajem: POLYGON((0 0,10 0,10 10,0 10,0 0),(5 5,7 5,7 7,5 7, 5 5))
MultiPoint, zde s třemi body: MULTIPOINT(0 0, 20 20, 60 60)
Složená linie (MultiLineString), zde tvořena dvěma liniemi: MULTILINESTRING((10 10, 20 20), (15 15, 30 15))
Multipolygon, zde složený ze dvou polygonů: MULTIPOLYGON(((0 0,10 0,10 10,0 10,0 0)),((5 5,7 5,7 7,5 7, 5 5)))
Kolekce geometrie (GeometryCollection), zde složena ze dvou bodů a jedné linie: GEOMETRYCOLLECTION(POINT(10 10), POINT(30 30), LINESTRING(15 15, 20 20))
Formát WKB Reprezentace geometrických hodnot formátem WKB jde definována specifikací OpenGIS, a také v ISO SQL/MM Part 3: Spatial standard. WKB je používán pro výměnu dat jako binárních proudů reprezentovaných datovým typem BLOB, který obsahuje geometrickou WKB informaci. WKB používá jednobitová neznačená celá čísla, čtyřbitová neznačená celá čísla a osmibitová čísla s dvojitou přesností (ve formátu IEE 754). Například hodnota WKB která je shodná s hodnotou WKT POINT(1 1) se skládá z této sekvence 21 bajtů: 0101000000000000000000F03F000000000000F03F
Sekvenci můžeme rozdělit na tyto komponenty: Byte order WKB type X Y
: : : :
01 01000000 000000000000F03F 000000000000F03F
Přičemž byte order značí jestli se jedná Network Data Representation (NDR) nebo External Data Representation (XDR). Část WKB type rozhoduje o jaký typ geometrie se jedná, hodnoty od 1 do 7 indikují Point, LineString, Polygon,
MultiPoint,
MultiLineString,
- 12 -
MultiPolygon,
a Geometry-
Collection.
Hodnota bodu se potom skládá z x-ové a y-ové souřadnice, každá
reprezentovaná hodnotou o dvojité přesnosti. Hodnoty pro ostatní typy geometrie jsou reprezentovány komplexnějšími datovými strukturami, což je rozebráno ve specifikaci OpenGIS. MySQL má k dispozici sadu funkcí pro operace na prostorových datech. Podle operací které provádějí je můžeme rozdělit do čtyř hlavních kategorií: -
funkce provádějící konverze geometrie mezi různými formáty,
-
funkce
poskytující
přístup
ke
kvalitativním
a
kvantitativním
vlastnostem geometrie, -
funkce popisující vztahy mezi dvěma geometriemi,
-
funkce které vytvářejí novou geometrii z už existující.
Funkce pro prostorové analýzy mohou být využity například v kontextu: -
s jakýmkoli interaktivním SQL programem jako například mysql nebo MySQL Query Browser,
-
nebo s aplikačním programem napsaném v jakémkoli jazyce podporujícím MySQL client API.
V aplikaci je databáze využita pro uložení geometrie a atributů podkladových dat i linek a také jízdních řádů jednotlivých spojů. Jako výstupní formát z databáze byl zvolen Well-Known Text. Funkce pro prostorové analýzy s geometrií nebyly použity. Podle četných referencí je pro uložení a analýzy geometrie silnějším nástrojem databáze PostgreSQL, ale na základě předchozích zkušeností byla zvolena databáze MySQL. 4.2.2. PHP Hypertextový preprocesor (původně Personal Home Page) je skriptovací programovací jazyk, určený především pro programování dynamických internetových stránek. Nejčastěji se začleňuje přímo do struktury jazyka HTML, XHTML či WML, což je velmi výhodné pro tvorbu webových
- 13 -
aplikací. PHP lze ovšem také použít i k tvorbě konzolových a desktopových aplikací. PHP skripty jsou prováděny na straně serveru, k uživateli je přenášen až výsledek
jejich
činnosti.
Syntaxe
jazyka
kombinuje
hned
několik
programovacích jazyků (Perl, C, Pascal a Java). PHP je nezávislý na platformě, skripty fungují bez úprav na mnoha různých operačních systémech. Obsahuje rozsáhlé knihovny funkcí pro zpracování textu, grafiky, práci se soubory, přístup k většině databázových serverů (mj. MySQL, ODBC, Oracle, PostgreSQL, MSSQL), podporu celé řady internetových protokolů (HTTP, SMTP, SNMP, FTP, IMAP, POP3, LDAP, …) PHP se stalo velmi oblíbeným především díky jednoduchosti použití a tomu, že kombinuje vlastnosti více programovacích jazyků a nechává tak vývojáři částečnou svobodu v syntaxi. V kombinaci s databázovým serverem (především s MySQL nebo PostgreSQL) a webovým serverem Apache je často využíván k tvorbě webových aplikací. S verzí PHP 5 se výrazně zlepšil přístup k objektově orientovanému programování podobný Javě. V jazyku PHP jsou napsány všechny skripty v aplikaci běžící na straně serveru. Konkrétně jde o funkce zpracovávající formuláře, dále získávající data z databáze a následně vracejí kód SVG nebo JavaScriptu. Jazyk PHP byl zvolen na základě předchozí zkušenosti s tímto vývojovým prostředím, a také proto, že je široce podporován v hostingových službách. 4.2.3. Scalable Vector Graphics XML EXtensible Markup Language (XML) tvoří základ všech nejnovějších webových standardů. Základní myšlenka není nijak zvlášť nová ale odvozena ze SGML (Structured Generalized Markup Language). XML je snadno čitelný a platformě nezávislý formát s přísným oddělením obsahu, popisu syntaxe
- 14 -
a validace, formátování a výstupu. Na XML je založeno několik dalších základních technologií, například pro transformaci formátu souboru (XSLT), pro popis syntaxe (DTD and Schema), pro odkazování (XLL a XPOINTER) a další. Na základě těchto technologií byly uvedeny různé XML dialekty. Patří mezi ně například CML (Chemical Markup Language), GML (Geography Markup Language), SMIL (Multimedia), SVG (2D vektorová grafika) a X3D (3D grafika, nástupce to VRML) (Neumann, 2001). Jedna z výhod použití XML je to, že všechny budoucí implementace a dialekty budou založeny na stejných pravidlech syntaxe (Neumann, 2001). SVG Scalable
vector
graphics
(SVG)
je
tedy
jazyk,
který
popisuje
dvojrozměrnou grafiku pomocí XML. Na první pohled se však XML pro přenos grafických aplikací nehodí – grafická data bývají objemná a textový formát jako XML nenabízí možnost data ukládat dostatečně úsporně. To je jistě pravda pro rastrové (bitmapové) obrázky, ale pro mnoho aplikací jsou vhodnější a úspornější vektorové formáty. Obraz je v nich reprezentován pomocí základních grafických objektů jako jsou úsečky, obdélníky, mnohoúhelníky apod., u kterých zaznamenáváme pouze jejich základní charakteristiky (Dobešová, 2004). Zápis SVG je strukturou podobný HTML, ovšem se specifickými grafickými elementy. Jak HTML, tak SVG jsou vlastně v moderním pojetí speciálními případy. SVG definuje tři základní typy grafických objektů, a to vektorové tvary, rastrové obrazy a textové objekty. Tyto objekty mohou být různě seskupeny, formátovány pomocí atributů nebo stylů CSS a polohovány pomocí obecných prostorových transformací Objekty uvnitř elementu SVG jsou vykreslovány ve stejném pořadí, ve kterém jsou zapsány ve zdrojovém textu, přičemž mohou mít přesně definovanou průhlednost, ořezovou cestu (clip mask) nebo bitmapovou masku (alpha masks). Významných úspor paměti lze dosáhnout použitím symbolů,
- 15 -
kdy se jednou definovaný vzorový objekt použije mnohonásobně pomocí odkazů (Hejral, 2003). Textové informace uvnitř SVG grafiky zůstávají, stejně jako v HTML dokumentech, stále textem s možností fulltextového vyhledávání, nebo třeba kopírování vybraného textu do textového editoru. Na rozdíl od HTML lze ovšem velmi přesně zachovat tvar a formátování písma tak, že typografie bude stejná na libovolném počítači. Používat lze samozřejmě také různé exotické způsoby psaní, jako zprava doleva a podobně (Hejral, 2003). Podporováno je i univerzální kódování UNICODE. Kartografové očekávají že SVG se stane novým standardem pro popis grafiky založené na XML. V blízké budoucnosti budou mapy na internetu budou ve formátu SVG (Voženílek 2005). To se ovšem vyplnilo jen částečně a to z toho důvodu nedokonalé podpory tohoto standardu u webových prohlížečů. Například nejrozšířenější prohlížeč Internet Explorer vyžaduje instalaci speciálního pluginu, který umožňuje SVG zobrazovat. Animace a interaktivita Je možno definovat tzv. deklarativní animace. To v praxi znamená, že je možno mít k dispozici pohybující se grafiku, kterou není potřeba ošetřovat žádným programovým kódem, obdobně jako animovaný GIF v HTML běží bez dalších programových zásahů (Hejral 2003). Tento způsob animace je kompatibilní se standardem SMIL (Synchronised Multimedia Integration Language). Deklarativní animace, jež jsou použité v aplikaci, byly zavedeny podle požadavků grafiků z praxe a mimo jiné umožňují naprosto bezproblémové přenášení animací mezi různými editačními aplikacemi. Skripty na straně prohlížeče mohou pomocí standardního rozhraní (DOM) libovolně měnit nebo dokonce vytvářet
nové grafické objekty.
Taktéž
fungují
standardní
mechanismy událostí (events). Můžeme říci, že jde o obdobu HTML techniky, které se někdy říká dynamické HTML (Hejral 2003).
- 16 -
SVG prohlížeče V současné době jsou dvě možnosti prohlížení SVG na internetu. První je pomocí pluginu nainstalovaného do prohlížeče. To je nutné pokud používáme Internet Explorer. Pro něj je nejrozšířenější prohlížeč SVG formátu Adobe SVG viewer, jehož vývoj však byl ukončen, a to z pochopitelných důvodů. Formát SVG je totiž konkurentem pro technologii Flash vyvíjenou touto firmou. Vývojáři nové verze Internet Exploreru 8 zatím nevyvrátili, ani nepotvrdili nativní podporu SVG. Druhou možnost, tedy nativní podporu, mají ve své výbavě oblíbené, ovšem ne tak rozšířené prohlížeče Mozilla Firefox a Opera. V porovnání těchto dvou vychází lépe Opera, která plně podporuje i standart SMIL, jež je používán pro vytváření deklarativních animací. Standart SVG je grafickým formátem použitým pro zobrazení prostorových dat v aplikaci. Díky tomu, že se jedná o vektorový formát a díky možnosti vytváření animací byl zvolen jako formát ideální. Jeho jediným konkurentem mohla být technologie Flash. 4.2.4. JavaScript JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk, jehož autorem je Brendan Eich z tehdejší společnosti Netscape. Nyní se zpravidla používá jako interpretovaný programovací jazyk pro WWW stránky, často vkládaný přímo do HTML kódu stránky. Jsou jím obvykle ovládány různé interaktivní prvky GUI (tlačítka, textová pole) nebo tvořeny animace a efekty obrázků. Jeho syntaxe patří do rodiny jazyků C/C++/Java. Slovo Java je však součástí jeho názvu pouze s marketingových důvodů a s programovacím jazykem Java jej vedle názvu spojuje jen podobná syntaxe. JavaScript byl v červenci 1997 standardizován asociací ECMA (Europen Computer Manufacturers Association) a v srpnu 1998 ISO (International Organization for
- 17 -
Standardisation). Standardizovaná verze JavaScriptu je pojmenována jako ECMAScript a z ní byly odvozeny i další implementace, jako je například ActionScript. Program v JavaScriptu se obvykle spouští až po stažení WWW stránky z Internetu (tzv. na straně klienta), na rozdíl od ostatních jiných interpretovaných programovacích jazyků (např. PHP a ASP), které se spouštějí na straně serveru ještě před stažením z Internetu. Z toho plynou jistá bezpečností omezení, JavaScript např. nemůže pracovat se soubory, aby tím neohrozil soukromí uživatele. Využití ECMAScriptu v aplikaci se vztahuje na veškeré akce na straně klienta. Tedy změnu zobrazení, tj. přiblížení, oddálení, posun, dále pro práci s vrstvami, zobrazovaní nápovědy, zobrazovaní času a ovládání animace. ECMAScript je také použit jako součást technologie AJAX. 4.2.5. DOM Document object model (DOM) je specifikace W3C pro na platformě a jazyku nezávislý způsob přístupu k obsahu a struktuře dokumentu. Je to v podstatě běžný způsob prezentace a manipulace s dokumentem HTML nebo XML. Návrh DOM je založen na specifikacích od Object Management Group, což dovoluje jeho použití v jakémkoli programovacím jazyku. Původně byl považován za způsob, jakým udělat JavaScript přenositelným mezi prohlížeči, rozrostl se však za tyto hranice (R. Alesson, N. T. Schutta, 2006). Dokument Object Model ve skutečnosti představuje objektový model v objektově orientovaném smyslu. DOM definuje objekty potřebné pro reprezentaci a modifikaci dokumentů, chování a atributů těchto objektů a vztahu mezi těmito objekty. Můžeme na DOM pohlížet jako na stromovou reprezentaci dat a strukturu stránky., ale přirozeně nemusí být doopravdy tímto způsobem implementována (R. Alesson, N. T. Schutta, 2006).
- 18 -
Strukturu jednoduchého SVG kódu z výpisu 4.1. je možno znázornit jako na obr 4.1. Výpis 4.1 Jednoduchý SVG kód <svg>
<polygon/> <svg>
Obr. 4.1 Jednoduchý DOM v SVG
4.2.6. Ajax Protože je internet synchronním systémem typu požadavek/odpověď, musela se celá stránka v prohlížeči neustále obnovovat, pokud chtěl uživatel získat další informace. Proto byla snaha vytvořit jednoduché nástroje pro tzv. vzdálené skriptování, které je schopné měnit obsah části stránky bez nutnosti načítat stránku celou znovu, jak je to běžné u klasických webových aplikací. Asynchronous JavaScript and XML (Ajax) je spíše technika než specifická technologie a dříve zmíněný JavaScript je jeho primární komponentou. Další využívané jsou Cascading Styling Sheet (CSS) a DOM. Ajax pracuje ve většině moderních webových prohlížečů a nevyžaduje žádný proprietální software nebo hardware a je nezávislý na serverové technologii (Alesson, Schutta 2006).
- 19 -
Pomocí objektu xmlHttpRequest (XHR) a asynchronní komunikace se serverem je tedy možno vytvářet webové aplikace, které jsou mnohem dynamičtější (Alesson, Schutta 2006). Využití v mapových aplikacích je tedy zřejmé. Například načítání podrobnějších mapových podkladů při přiblížení mapy, zobrazení informací o objektu v mapě jež je uložena v databázi apod. Vytvářená aplikace některé tyto funkce využívá. Například zobrazení linek obsluhujících určitou zastávku a názvy významných míst.
4.3. Data a jejich příprava Podkladová data byla poskytnuta od Magistrátu města Přerova ve formátu ESRI shapefile a v souřadnicovém systému S-JTSK. Tyto byla převedena do připravené geodatbáze, aby s nimi bylo možné lépe pracovat. Dodaná data bylo třeba generalizovat a upravit hodnoty některých jejich atributů. Toto bylo provedeno v programu ArcMap. Největší změny bylo nutné provést s vrstvou obsahující půdorysy budov, které byly pro potřeby aplikace příliš podrobné. Proto na nich byly aplikovány metody generalizace dat v prostředí aplikace ArcMap, který disponuje nástroji pro generalizace v toolboxu data management tools. Byly použity funkce spojení polygonů (Aggregate Polygons), kde vzdálenost byla zadána 5 m a budovy s plochou menší než 100 m2 byly odmazány. Samozřejmostí bylo zatrhnutí volby pro zachování pravoúhlého tvaru polygonu. Dalším krokem byla aplikace funkce pro zjednodušení budovy (Sipmlify Buliding), s parametrem tolerance zjednodušení (simplification tolerance) 5 m, jež vyhladila časté výstupky na budovách. Geometrie linek byla potom upravena tak, aby vyhovovala nárokům na tvorbu animací – tj. počáteční a konečný bod linie byly ve směru jízdy autobusu. Dále také linie, které byly původně zakresleny zvlášť pro každý směr pomocí tzv. snappingu, naloženy na sebe, aby bylo dosaženo lepšího vizuálního výsledku.
- 20 -
Atributová část dat byla pro potřeby aplikace opět příliš podrobná, a proto byly nepotřebné atributy odmazány. U vrstev s vazbou na MHD bylo naopak potřeba některé atributy přidat nebo upravit. U linek MHD se jednalo o aktualizaci tras některých spojů a vytvoření identifikátorů používaných při propojení na jízdní řády a vytváření animací. U zastávek proběhlo odmazání některých přebytečných bodů a to v případě, že zastávky obou směrů byly u sebe příliš blízko. Liniová vrstva použitá pro zobrazení pozemních komunikací vznikla z os polygonů, a proto byla příliš komplikovaná a složená ze zbytečného množství drobných úseků. Ty bylo potřeba pospojovat do větších celků a opravit geometrii. K tomu opět posloužil systém ArcMap Takto upravené vrstvy byly exportovány do formátu .shp a v programu shp2mysql z nich byly vytvořeny .sql soubory. Vzniklá data bylo potřeba převést do kódování UTF-8, které je použito v databázi. Tyto pak sloužily jako vstupní data, jež byla naimportována do MySQL databáze.
Obr 4.1. Schéma aplikace
- 21 -
4.3.1. Optimalizace a ochrana dat Geometrie dat uložených v databázi je v souřadnicovém systému S-JTSK, jehož hodnoty souřadnic jsou poměrně vysoká čísla, a proto by byl výsledný dokument příliš velký. Z tohoto důvodu byla provedena optimalizace. Při vykreslování geometrie jsou souřadnice zmenšeny přepočítáním na relativní vzdálenost od levého horního rohu, což značně snižuje množství přenesených dat ze serveru k uživateli, a také urychluje výpočty při vykreslování grafiky v prohlížeči. Porovnáním ukázalo, že velikost výsledného dokumentu je přibližně o 30 % menší. Upravení souřadnic společně s odstraněním atributové části data značně znehodnocuje, čímž vytváří ochranu proti případnému zneužití.
Obr. 4.2. Formulář nastavení aplikace
- 22 -
4.4. Nastavení aplikace - formuláře Formulář nabízí volbu počátečního a času animace, dne dále také požadované časové zrychlení, jež je omezeno výběrem na 1x, 10x, 100x, 500x. Poslední volbou jsou podkladové vrstvy, které mají být načteny z databáze.
4.5. Databáze Veškerá podkladová data, včetně jízdních řádů, jsou uložena v databázi MySQL. Do databáze byla vložena importem z SQL dotazů vytvořených pomocí programu shp2mysql. Geometrie polygonů a linií je v tabulkách uložena jako ogcGeom. Bodové vrstvy byly vytvořeny z shapefile přidáním x-ové a y-ové souřadnice do dbf tabulky, která byla následně převedena na .csv soubor a importována do databáze. MySQL potom na základě dotazu SELECT AsText(ogc_geom)
vrátí geometrii ve formátu WKT.
Jízdní řády Jízdní řády musely být speciálně upraveny. Protože byly k dispozici pouze v podobě pdf dokumentu, byla potřeba data získat pomocí Optical Character Recognition (OCR) programu, konkrétně tedy AbbyFine Readeru, který je k dispozici zdarma ve zkušební verzi. Takto získané tabulky jízdních řádů byly dále upravovány v tabulkovém procesoru MS Excel. Přidání identifikátorů jednotlivých úseků zajistilo následné propojení s grafickou reprezentací linek při vytváření animací. Identifikátor je ve tvaru číslo linky + pořadí úseku v trase linky, např. identifikátor 523 značí příslušnost k 23. úseku linky číslo 5. Soubory byly uloženy a nahrány do databáze MySQL. Z důvodu vytváření animací byla pro každou linku byla vytvořena tabulka (viz tab. 1) a navíc, pokud linka měla dva směry, byly vytvořeny tabulky dvě. Jedna pro směr tam, druhá pro směr zpět. V tabulce se zastávkami bylo potřeba přidat pole zajišťující korektní zobrazení popisu. Je zde možnost volby odsazení v x-ovém a y-ovém směr.
- 23 -
Tab. 4.1. Struktura tabulky jízdních řádů pole
hodnoty
ID
celočíselná hodnota, primární klíč
Jede
rozlišení pracovních dnů (1) sobot, neděl a svátků (2) 30, 31, 64 – pro případné rozlišení kdy spoj nepojede (24.12. ,31.12.) 1 – jedná se bezbariérový spoj, 0 - nejedná se o bezbariérový spoj čas odjezdu, např.: 15:23
Nejede Bezbar identifikátor úseku např. 101 102 …
4.6. Vytvoření SVG dokumentu Kresba mapy je vytvářena dynamicky načítáním z databáze, s výjimkou prvků dokumentu obsahujících grafiku symbolů, ovládacích prvků a prostředí. Podle vstupních dat z formuláře jsou vykresleny požadované vrstvy. Geometrii, uloženou v databázi ve formátu ogcGeom, je potřeba určitým způsobem převést do formátu SVG grafiky. Dotazem z databáze obdržíme geometrii ve formátu WKT (Well Known Text), s nímž pak obslužný PHP skript pracuje jako s řetězcem a získává z něj požadovaná data. Geometrie jsou následně vykreslena jako elementy SVG dokumentu. Toto zajišťují PHP funkce uvedené v tabulce 2. Tab. 4.2 Funkce pro vykreslení grafiky z databáze funkce
parametry
vrací
drawSVGpolygon
vrstva, element
polygon nebo path
drawSVGpath
vrstva
path
drawStops
-
use, text
drawLabels
vrstva
text
drawAnimationPath
linka
path
- 24 -
drawAnimation drawTrain drawPOIs
linka, zrychlení, počáteční čas, den číslo tratě, doba jízdy, počet vozů -
use, animateMotion animateMotion use
Přičemž funkce parseSVGpolygon má mimo názvu vrstvy jako vstupní parametr také typ SVG elementu, jímž budou entity vykresleny. Možnosti jsou dvě: buď polygon nebo path. Funkce pracují tak, tak že načtou do řetězcové proměnné geometrii a pomocí funkcí pro práci s řetězci extrahují x-ové a y-ové souřadnice, jež pak následně vypisují jako parametry SVG elementů. 4.6.1. Vytvoření animace Funkce drawAnimation, jež má na starost spojení s databází jízdních řádů a vykreslení animací má také několik vstupních hodnot. První je číslo linky, pro kterou se bude animace vytvářet. Dalšími parametry jsou zrychlení s jakým bude animace probíhat, počáteční čas a den animace. Tyto parametry jsou funkci předány z dat odeslaných formulářem. Samotná funkce pracuje tak, že postupně prochází tabulku s jízdními řády pro danou linku a počítá časové rozdíly mezi jednotlivými zastávkami a upravuje je podle zvoleného časového zrychlení. Tyto rozdíly jsou ukládány do datového pole a následně je z nich vytvořena animace za použití objektů <use/>,
a <mpath/> jež vidíme na příkladě v následujícím výpisu. Výpis 4.2. Příklad objektů nesoucích animace <use xlink:href="#autobus5"> <mpath xlink:href="#l501"/> <mpath xlink:href="#l502"/> <mpath xlink:href="#l503"/>
- 25 -
Objekt <use/> svým parametrem xlink:href odkazuje na objekt který bude použit pro animaci. Konkrétně jde tedy o symbol pro autobus příslušné linky. Objekt potom nese, kromě svého identifikátoru, atribut pro začátek animace begin, jenž je počítán od vstupního počátečního času u prvního animovaného úseku v každém spoji, a u dalších animace začne pokud skončí animace předcházející. To je zabezpečeno hodnotou begin = "identifikatorAnimace.end". dur,
Trvání každé animace určuje další atribut
jenž má hodnotu zadanou v sekundách. Hodnota atributu repeatCount
určuje kolikrát se má animace provést, zde protože spoj dále pokračuje ve své cestě je jeho hodnota 1, což zaručí že autobus projede úsekem právě jednou. Posledním atributem je fill jehož hodnota remove odstraní výsledek animace a tudíž autobus nezůstane stát na konci úseku trasy ale zmizí, načež se ihned objeví autobus jedoucí na následujícím úseku. Prvek <mpath/> odkazuje na úsek cesty po které má animace probíhat. Nepodařilo se ovšem odladit všechny podmínky pro nepravidelnosti v jízdních řádech. Kvůli menší velikosti souboru animace probíhá pouze do konce zvoleného dne.
4.7. GUI Uživatelské rozhraní a jeho většina funkcí byly převzaty z předlohy Andrease Neumanna jež je k dispozici pod GNU licencí na adrese: http://www.carto.net/papers/svg/navigationTools/. Nejdříve samozřejmě proběhly pokusy vytvořit si takovéto prostředí vlastní, ale po prozkoumání řešení A. Neumanna, jež je komplexní a odladěné, bylo od tohoto záměru ustoupeno. Jedná se o funkce a prvky k ovládání zobrazení, tj. změna měřítka, posun mapy, ovládání viditelnosti vrstev a zobrazování aktuálních souřadnic. Některé funkce bylo potřeba pro potřeby aplikace upravit a přidat. Stejně tak doznal změn i vzhled a rozmístění ovládacích prvků a tlačítek. V oblasti navigace zde nalezneme funkce popsané v tabulce 4.3., dále pak přehledovou mapu jež také slouží pro posun zobrazovaného výřezu mapy a
- 26 -
posuvný ovladač měřítka. Dalším oddílem jsou zaškrtávací pole pro zapnutí či vypnutí zobrazení vrstev. Základními kompozičními prvky mapy jsou název, legenda, měřítko, tiráž a mapové pole. Základní kompoziční prvky musí až na výjimky obsahovat každá mapa (Voženílek, 2004). Toto bylo dodrženo i při tvorbě aplikace viz obr. 4.3.
Obr. 4.3. Uživatelské rozhraní aplikace 1. mapové pole, 2. název, 3. přehledová mapa s prvky přiblížení a posuvníkem, 4. ovládací prvky navigace a zobrazení souřadnic, 5. panel s údaji o animacích a ovládacími prvky, 6. vypínání a zapínání vrstev, 7. horizontální měřítko, 8. vertikální měřítko, 9. tiráž Tab. 4.3 Funkce ovládání mapy tlačítko
funkce přiblížení oddálení
- 27 -
infomód – po kliknutí na objekt (zastávka, POI) se načtou z databáze informace o tomto objektu celkový pohled posun pomocí myši definování nového středu mapy předchozí zobrazení další zobrazení
Obr. 4.4. a 4.5. Ovládání animace. Po stisknutí velkého tlačítka se spustí animace. Tu je pak možno řídit pomocí semaforu.
Infomód Z databáze nejsou načítány všechny informace o objektech na mapě, což zajistí, že počáteční soubor stahovaný do uživatelova počítače je možná co nejmenší. Pro dodatečné dotázání je použita technologie Ajax popsaná dříve. Pokud se tedy kurzor myši dostane nad znak zastávky nebo významného místa, dojde k dotazu na databázi a k vrácení odpovědi a následnému zobrazení informací. Ovladač události onmousemove zabezpečí, že se po najetí myši na objekt spustí funkce ziskejLinky(id), případně ziskejPoi(id), která odešle požadavek na server, kde je zpracován příslušným skriptem. Ten provede dotaz do databáze a vrátí prohlížeči výsledek ve formátu XML. S tímto výsledkem pak ECMAScript pracuje pomocí rozhraní k přístupu k DOM a včlení jej na příslušné místo do kódu SVG, aby mohl být následně zobrazen. Podobně funguje také bublinová nápověda, ovšem zde nedochází k dotazu
do
databáze,
ale
pouze
ke
změně
atributu
prvku
z visibility="hidden" na visibility="visible" při najetí myší na objekt a naopak při odjetí myši.
- 28 -
5. Výsledky Aplikace
je
umístěna
na
internetové
adrese
http://gislib.upol.cz/
dprace/bakalarske/jung08/ ,případně odkaz na verzi s aktuálním jízdním řádem je na adrese http://mhdprerov.ic.cz/. Pro aplikaci byl zvolen název AniBUS a logo pro její snadnější zapamatování a propagaci viz obr.
Obr. 5.1. Logo aplikace
Výsledkem je tedy aplikace umožňující dynamicky, na základě voleb uživatele, zobrazovat MHD v Přerově. Její hlavní předností je tedy to že se nejedná o předem připravenou ale o dynamicky generovanou mapu. Samotné prostředí aplikace je i pro málo zkušené uživatele snadno pochopitelné a přehledné. Pomocí ovládacích prvků lze změnit zobrazovaný výřez mapy a také ovládat animaci. Během vývoje aplikace stálo v cestě mnoho problémů hlavně s vzájemnou nekompatibilitou jednotlivých prohlížečů. Ve výsledku tedy „živá“ aplikace funguje pouze v prohlížeči Opera od verze 9. Ta je ke stažení zdarma, stejně tak jako její USB verze, která dokonce nevyžaduje instalaci. Původní záměr, aby aplikace fungovala i v dalších dvou nejpoužívanějších prohlížečích nevyšel. Mozilla Firefox totiž nepodporuje standart SMIL potřebný pro deklarativní animace, i když verze 3 beta má podporu SVG vylepšenou než verze předchozí. U Internet Exploreru, kde zobrazování zajišťuje plugin Adobe SVG viewer, je problém s tím že nemá schopnost posílat HTTP hlavičky a nemůže přijímat data z formulářů. Pro uživatele Internet Explorer byly přidány statické animace.
- 29 -
6. Současné použití animací v kartografických dílech V následujících dvou kapitolách jsou stručně shrnuty možnosti tvorby kartografických animací a příklady jejich aplikací. Popis formátu SVG nebyl zahrnut, protože jej dostatečně popisují předchozí kapitoly.
6.1. Prostředky pro tvorbu animací 6.1.1. Animovaný GIF Nejjednodušší možností, jak vytvářet animace, je použití rastrového formátu Graphics Interchnage Format (GIF) v jeho animované verzi. Jedná se vlastně o sekvenci rastrových obrazů střídajících se po sobě s určitými časovými prodlevami. Tím se dosáhne například efektu pohybu. Animované GIFy jsou použity tam, kde jsou vstupní data rastrová a nebo pro jednoduché neinteraktivní
animované
mapy,
případně
pro
tvorbu
animovaných
kartografických znaků. Vytváření takových map není složité, ale často časově náročné, protože je potřeba vytvořit každý obraz zvlášť, a pak jej pomocí editoru spojit dohromady a nastavit požadované časování. Programy, které umožňují tvorbu animovaných GIFů jsou například Microsoft GIF Animator, Zoner GIF Animator nebo produkty firmy Adobe, jako je například ImageReady. Místo animovaného GIFu je často použito skriptu který řídí zobrazovaní obrazů, což například přidává možnost zrychlování či zpomalování animace. To je použito například při zobrazování radarových dat na stránkách Českého hydrometeorologického ústavu. Příkladem jednoduchého využití animovaného GIFu může být například mapa vývoje podzemní dráhy v New Yorku, která je k nahlédnutí na http://very-appealing.com/misc/subwayhistory/.
- 30 -
6.1.2. Java Applety Java je silným programovým nástrojem a její pomocí mohou vzniknout složité aplikace obsahující animace. Může se jednat pouze o řízené střídání statických obrázků, nebo také o využití vektorového formátu a jeho ovládání pomocí specializovaných knihoven Javy. Java zvládá i zobrazování formátu SVG a to pomocí rendereru Batik. Příkladem použití Javy pro animované mapy mohou být například Animované mapy vegetační změny vyvinuté na University of Oregon jež zobrazují šíření pylů více jak padesáti druhů rostlin. Pro zobrazování byl vytvořen Java applet nazvaný Pollen Viewer. Aplikace je dostupná na: http://www.geo.brown.edu/georesearch/esh/QE/Research/VegDynam/VegAni ma/VegAnima.htm
Obr. 6.1. Aplikace Poolen Viewer
- 31 -
6.1.3. Flash Flash je grafický vektorový program, momentálně ve vlastnictví společnosti Adobe (dříve Macromedia). Používá se především pro tvorbu (převážně internetových) interaktivních animací, prezentací a her. Rozšíření Flashe na internetu pomohla malá velikost výsledných souborů, protože se uchovávají ve vektorovém formátu. Flash animace se vytváří ve Flash editoru - zde se nakreslí (vloží) obrázky, umístí se do určitých vrstev, nadefinují se jejich pohyby a transformace v časové ose, mohou se přidat zvuky a skripty a nakonec se celá animace exportuje do formátu SWF, který je možno přehrát. Výsledná animace může být
ovlivňována
ActionScriptem
(programovací
jazyk
odvozený
z JavaScritpu), jenž zabezpečuje vysokou interaktivitu. Výhoda tohoto formátu pro mapové animace je tedy hlavně v interaktivitě a kvalitě vektorové grafiky. Na internetu lze naleznout velké množství aplikací využívající Flash pro animované mapy. V kapitole 6.2. je uvedeno několik příkladů. Rozdíl Flash a SVG Kromě toho že Flash je komerční formát je mezi ním a SVG další podstatný rozdíl. Způsob animování objektů použitý v SVG se označuje jako „time-based“ – můžeme tedy definovat přesně načasovanou změnu parametru grafiky. To je hlavní rozdíl oproti SWF formátu, kde se časování animací vždy odvíjí od jednotlivých klíčových snímků – anglicky „frame-based“. Důležitý rozdíl je v tom, že jednotlivé deklarativní animace v SVG mohou být na sobě zcela nezávislé a mít jinou dobu trvání nebo počet opakování a podobně (Hejral 2003). 6.1.4. Ostatní Další možností je použití programů pro vytvořené některého z video formátů jako je například AVI, MPEG nebo QuickTime. Některé programy pro
- 32 -
tvorbu map jsou schopné takovéto animace definovat a exportovat. Jedním z nich je například ArcGIS 9.2 společnosti ESRI. Takto vzniklé soubory jsou však pouze statické prezentace nabízející nízkou interaktivitu. Jejich výhodou jsou ovšem minimální nároky na softwarové vybavení, protože přehrávače videí různých formátů jsou velice rozšířené.
6.2. Existující kartografické projekty s animacemi 6.2.1. Animated Atlas of Flight Traffic over North America Desktopová aplikaci, jejímž autorem je Michael Peterson z Omaha Univerzity, obsahuje mapy zobrazující leteckou dopravu nad Severní Amerikou. Jedná se o statické animace ve formátu .avi, jež byly vytvořeny programem FlyteTrax, který zaznamenával polohu letadel v průběhu 24 hodin každou minutu, a který umožňuje rozlišení letadel podle typu, letecké společnosti a domovského letiště. Animace tak slouží ke zpětné vizualizaci hustoty letecké dopravy nad Severní Amerikou. Aplikace umožňuje spuštění sedmdesáti animací s různým obsahem. Ovšem stále se jedná jen o statické video soubory pouze s možností změny rychlosti. Ukázka je dostupná na: http://maps.unomaha.edu/AnimatedFlightAtlas/ExampleAnimation.html
Obr. 6.2. Ukázka z animace v Animated Atlas of Flight Traffic over North America
- 33 -
6.2.2. Map24 Oblíbený vyhledávač tras, umožňující mimo klasické funkce mapového portálu animovat vyhledanou trasu. Systém je poháněn výkonným WMS serverem poskytujícím podkladová data. Pomocí dalších funkcí je možná změna na 3D náhled na mapu a animování spojení mezi zadanými místy,což je zabezpečováno Java appletem. Animaci trasy lze pozastavit, zrychlit či vrátit zpět. Celkově je aplikace velice rychlá a její hlavní výhoda spočívá v použití pro mobilní zařízení, protože je zdarma a tak může sloužit jako alternativa drahým mapovým podkladům.
Obr. 6.3. Mapové okno mapového portálu map24
6.2.3. Animated atlas of African History (AAAH) Webový AAAH byl vyvinut mezi lety 2004 a 2006 na Brown Univerzity v Providence (USA). U jeho zrodu stáli prof. Jacobs a Rolando Peñate. AAAH zobrazuje politické změny, konflikty, demografická a ekonomická data a jejich změnu v čase. Pro zobrazování je použita technologie Flash. Vyznačuje se jednoduchým ovládáním. Po startu animace je možno ji zrychlit,
- 34 -
zastavit, pustit pozpátku, případně zadat rok, na který se má přejít. Samozřejmostí je vypínání a zapínání tématického obsahu. Zajímavě je řešena legenda, která je formou pravidelných n-úhelníků a je ji možno libovolně posouvat po obrazovce. Atlas je umístěn na adrese: http://www.brown.edu/Research/AAAH/.
Obr. 6.4. Prostředí animovaného atlasu africké historie
6.2.4. Animated atlas – The Growth of a Nation Animated atlas – The Growth of a Nation je dalším dílem používající animace pro změnu v čase. Jde o komerční dílo Petera Maye zobrazující historii USA, jež bylo vytvářeno jako pomůcka pro výuku historie na školách. Je poháněn opět technologií Flash za kterou běží databáze. Navíc je doplněn o zvukový doprovod v podobě komentáře k právě probíhajícím událostem na mapě. Animace může být, zastavena, a restartována, zároveň je možné se posouvat po časové ose. Po kliknutí na určitý stát jsou zobrazeny podrobnější informace. Atlasu vyšlo několik dílů, každý se zaměřením na jinou část americké historie. Ukázka je dostupná na http://animatedatlas.com/.
- 35 -
Obr. 6.5. Ukázka z animace Growth of a Nation ze série Animated atlas
6.2.5. Simulace systému BART v San Franciscu Tento Java applet zobrazuje spoje systému Bay Area Rapid Transit (BART), městského vlaku v San Franciscu. Animace běží ve zrychlení 60:1 a začíná ráno ve 4:00. Uživatel má možnost zadat požadovaný čas a spoje se podle něj aktualizují. Také je možná změna zrychlení animace. Vlaky jsou reprezentovány obdélníky pohybujícími se podél jejich tratí a jednotlivé linky jsou rozlišeny barvou. V legendě jsou také zároveň zobrazovány počty souprav jednotlivých linek které jsou právě v provozu. Aplikace je dostupná na: http://acs.lbl.gov/~davidr/vbart/.
- 36 -
Obr. 6.6. Okno aplikace zobrazující linky BART v San Franciscu
- 37 -
7. Diskuze Standardy a kompatibilita Standarty v internetovém prostředí by měli zajistit přístup a korektní zobrazení informací umístěných na webu z různých uživatelských prostředí. Avšak Neumann a Winter (2000) upozorňují, že na internetu můžeme mluvit o standardu, jen pokud většina společností uzná nebo aplikuje technologii, která je právě používaná návštěvníky a tvůrci webových stránek. Lze definovat dva typy standardů: de facto a de jure (Neumann a Winter 2003). Za standard de facto se považuje takový, jenž je vyvíjen a implementován firmami a je široce používán. Standard de jure je takový, který je vyvinut a potvrzen mezinárodní organizací nebo konsorciem. Z toho plyne, že použití schválených standardů nemusí nutně znamenat bezproblémový chod ve všech prohlížečích, protože jimi standardy nejsou plně podporovány. To je bohužel případ i aplikace vyvíjené v rámci této bakalářské práce.
Prostředky vhodné pro tvorbu kartografických animací Vhodnost prostředků je potřeba posuzovat z několika pohledů. Prvním je dostupnost a vyspělost vývojářských nástrojů a dalším rozšířenost podpory používaných formátů, jež je kritická hlavně pro webové prostředí. Obě kritéria se jeví lepší u komerčních řešení, jako je například zmiňovaný Flash od firmy Adobe. Nevýhodou těchto prostředí je, že jsou distribuována pod placenými licencemi, což technologii v podstatě uzavírá vývoji jejími uživateli a veškerá práce na rozvoji technologie je na prakticky uzavřené firmě. I když se tvrdí, že plugin nutný pro zobrazení formátu swf má nainstalována většina uživatelů, nelze na to také spoléhat. Proto vyvíjení mapových animací v tomto prostředí není hodnoceno jako nejvhodnější. Na druhou stranu, projekty vzniklé ve Flashi se vyznačují propracovanou grafikou a svižným během díky optimalizovanému kódu a virtuálnímu stroji pohánějícím skripty.
- 38 -
Využití statických animací ve formě animovaného GIF obrázku, případně filmového klipu (.avi, .wmv) je vhodné tam, kde neočekáváme interakci s uživatelem. Pro tvorbu těchto formátů existuje řada nástrojů, pro animovaný GIF je to například GIFAnimator, nebo produkty firmy Adobe. Animace ve formátu .avi je možno vytvářet v rozšířené desktopové GIS aplikaci ArcGIS 9.2. U těchto formátů také nejsou nijak velké nároky na vybavení uživatele, protož jsou široce podporovány. Ovšem interaktivity se u těchto formátů dosahuje velmi těžko. Tvorba programů v jazyku Java je více komplexní a vhodná spíše pro vytváření komplikovaných modelů a simulací. Navíc jsou kladeny vysoké nároky na programátorskou gramotnost vývojáře. I zde se setkáváme s nutností instalovat určitou část prostředí nutného pro běh aplikace. Jedná se o tzv. Java Virtual Machine. Formát SVG v kombinaci se SMIL použitý v aplikaci ovšem také není ideální. SVG je totiž velmi expresivní jazyk s poměrně silnými schopnostmi, ale programy zajišťující jeho vykreslování jsou vcelku komplikované a stále nejsou optimalizované pro velké množství dat. Dynamické prvky SVG značně snižují rychlost rendrování. Jistým řešením by bylo použít renderer napsaný v Javě (např. Batik), čímž by se mělo dosáhnout podobného výkonu jako například u služeb map24 nebo Gogole Maps (Ipfelkofer, Lorenz, Ohlbach 2006). Nástroje speciálně upravené pro vytváření kartografických animací nejsou ještě plně implementovány, a proto je vývoj aplikací soustředěn spíše na jednotlivé projekty. Perspektivy a vylepšení Využití animací v kartografii má do budoucnosti obrovský potenciál, protože jsou oproti klasickým mapám schopné na ještě menší ploše přinést více informací. Povaha některých jevů přímo volá pro zpracování pomocí animačních technologií. Protože vývoj v této oblasti byl velice rychlý, je
- 39 -
potřeba definovat jak správně kartografické animace používat. Velkým problémem je vhodný formát pro zobrazování takovýchto animací, přičemž potíže nastávají především při snaze umístit animace na web a rozvinout jejich interaktivitu. Je sice snaha webové technologie standardizovat, což ovšem nemusí zaručit jejich široké použití. Plánovány byly dvě funkce aplikace ovšem druhé, zobrazení definovaného spojení mezi dvěma zastávkami, se nepodařilo dosáhnout. Problém síťových analýz se ukázal být příliš složitým na rozsah této práce. Při vykreslení animací linek nejsou dále vždy ošetřeny všechny výjimky. Další vylepšení by aplikace mohla doznat v uživatelském rozhraní, kde by mohla být úplně vypuštěna stránka formulářem a všechna nastavení by byla mohla být prováděna na jedné stránce, což by snížilo složitost navigace a vytvořilo uživatelsky více přívětivé prostředí (Voženílek, 2004). Zde by šlo hlavně o zpřístupnění možnosti měnit rychlost animace přímo za běhu a také případně nahrát dodatečně podkladové vrstvy databáze.
- 40 -
8. Závěr Cíle, jenž byl stanoven na začátku tvorby bakalářské práce bylo dosaženo. Vytvořená aplikace běžící na internetu je schopná na základě voleb uživatele dynamicky zobrazovat městskou hromadnou dopravu v Přerově. V nastavení je možné zvolit zobrazované linky, den, počáteční čas, zrychlení a podkladové vrstvy. Pro vykreslování podkladových dat i generování animací se využívá spojení databáze MySQL, kde jsou data uložena, s programovacím jazykem PHP. Výsledné animace ve formátu Scalable Vector Graphics (SVG) je možné v přehledném uživatelském rozhraní jednoduchými ovládacími prvky řídit a měnit také zobrazená podkladová data. Interaktivita mapy je zajištěna pomocí skriptů v jazyce ECMAScript a technologie Ajax, jež může mapu aktualizovat bez opětovného načítání stránky. Plánované zobrazování spojení mezi zadanými zastávkami se ovšem nepodařilo vytvořit, protože problém síťových analýz byl na rozsah této práce příliš komplikovaný. Aplikace ukazuje velký potenciál SVG map pro zakomponování kartografických
animací.
Narážíme
ovšem
na
nedokonalou
podporu
u webových prohlížečů, která toto řešení značně znevýhodňuje, i když je založeno na webových standardech. Ve výsledku tedy aplikace korektně běží jen v prohlížeči Opera, který nejlépe dodržuje používané standardy.
- 41 -
9. Zdroje 1. Alesson, R., Schutta, N. T. Ajax - Vtváříme vysoce interaktivní webové aplikace. Computer Press, 2006, Brno. ISBN 80-251-1285-3. 2. Dobešová, Z.: Databázové systémy v GIS. Olomouc, Univerzita Palackého, 2004, 76s., ISBN 80-244-0891-0. 3. Neumann, A., Winter, A. M.: Time for SVG – towards high quality interactive web-maps. 20th Internationals Cartographic Congress, Beijing, 2001 4. Neumann, A., Winter, A. M.: Webmapping with Scalable Vector Graphics (SVG): Delivering the promise of high quality and interactive web maps. In: Maps and the Internet. Ed. M. P. Peterson. 2003, Amsterdam, Elsevier. 197-220. 5. Voženílek, Vít. Aplikovaná kartografie I. Tematické mapy. Olomouc, Univerzita Palackého, 2. vyd., 2004. 187 s. ISBN 80-244-0270-X. 6. Voženílek, V.: Cartography for GIS, Olomouc, Univerzita Palackého, 2005, 142s., ISBN 80-244-1047-8
7. Adobe Developer Connection [online]. [cit. 2008-05-10]. Dostupné z: http://www.adobe.com/devnet/swf. 8. Animated Atlas [online]. [cit. 2008-05-10]. Dostupné z: http://animatedatlas.com/. 9. Animated Atlas: Flight Traffic over North America [online]. [cit. 2008-05-10]. Dostupné z: http://maps.unomaha.edu/AnimatedFlightAtlas/. 10. Animated Atlas of African History [online]. [cit. 2008-05-10]. Dostupné z: http://www.brown.edu/Research/AAAH/. 11. Animated Maps of Vegetation Change [online]. [cit. 2008-05-10]. Dostupné z: http://www.geo.brown.edu/georesearch/esh/QE/Research/VegDynam/Ve gAnima/VegAnima.htm.
- 42 -
12. BART Simlalation [online]. [cit. 2008-05-10]. Dostupné z: http://acs.lbl.gov/~davidr/vbart/. 13. Batik SVG Toolkit. [online]. [cit. 2008-04-15]. Dostupné z: http://xmlgraphics.apache.org/batik/. 14. flash.help [online]. [cit. 2008-05-10]. Dostupné z: http://flash.jakpsatweb.cz/. 15. Hejral, M.: Interval.cz - Průvodce SVG [online]. 2003-2006, [cit. 2008-04-15]. Dostupné z: http://interval.cz/webdesign/grafika/. 16. Ipfelkofer, F., Lorenz B., Ohlbach, J. H.: Ontology Driven Visualisation of Maps with SVG – An Example for Semantic Programming [online]. 2006, [cit. 2008-05-10]. Dostupné z: http://www.pms.ifi.lmu.de/publikationen/PMS-FB/PMS-FB-20065/otn2svg.pdf. 17. Kraak, M.-J.: The role of the map in a Web-GIS environment. In Journal of Geographical Systems [online]. Springer-Verlag, 2004/6:83–93 [cit. 2008-05-10]. Dostupné z: http://www.springerlink.com/content/1dne9f3u0wh7a1p8/. 18. Mapsolute Developer Network [online]. [cit. 2008-04-15]. Dostupné z: http://devnet.map24.com/. 19. MySQL 5.0 Reference Manual [online]. [cit. 2008-04-15]. Dostupné z: http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html. 20. Neumann, A., Winter, A. M.: Vector-based Web Cartography: Enabler SVG. In Carto.net [online]. [cit. 2008-04-30]. Dostupné z: http://www.carto.net/papers/svg/index_e.shtml. 21. O'Reilly Network -- JavaScript: How Did We Get Here? [online]. [cit. 2008-04-15]. Dostupné z: http://www.oreillynet.com/pub/a/javascript/2001/04/06/js_history.html. 22. PHP: Hypertext Preprocesor [online]. [cit. 2008-04-15]. Dostupné z: http://php.net/. 23. Scalable Vector Graphics 1.1 Specification [online]. [cit. 2008-04-15]. Dostupné z: http://www.w3.org/TR/SVG11/.
- 43 -
10. Summary This Bachelor thesis is a conclusion of the Geography and Geoinformatics Bachelors degree study programme at department of Geoinformatics, Faculty of Science, Palacky University in Olomouc. The aim of the thesis is a visualization of municipal transport of Přerov city. Transportation, in general, is a time variable, spatially based phenomenon and its visualization on paper maps or by the help of classical means is done by specific methods. These are limited mainly by a restricted visualization of phenomenon change in time. Animation offers us new possibilities which do not have such limitations. Web was chosen as a suitable medium for this purpose because of its spread and accessibility. Web application called AniBUS capable of interactive visualization of municipal transport of Přerov city was created. It uses MySQL database together with PHP scripts to create Scalable Vector Graphics (SVG) graphics and animations powered by Synchronized Multimedia Integration Language. It can dynamically display user defined animated maps with interactive navigation and animation control. Interactivity is assured by ECMAScript and Ajax technology. Its limitation is in the fact that only internet browser which is capable of running it, is Opera v9. Others are unfortunately not supported. SVG showed up as a strong format to deliver cartographic animations, but it also has number of limitations. Most significant is bad support of this format in web browsers and also low performance with larger datasets. Other possible technologies such as Flash are suitable for map animations but SVG was chosen because it is an open web standard defined by World Wide Web Consortium with minimal needs for authoring tools.
- 44 -
Přílohy 1. CD-ROM
textová část bakalářské práce
zdrojové kódy PHP skriptů
SQL soubor s daty pro vytvoření databáze
zdrojové kódy JavaScriptu a SVG
poskytnuté .shp soubory
2. ZDROJOVÉ KÓDY a. drawSVGPolgon.php b. drawSVGpath.php c. drawAnimationPath d. drawStops.php e. drawPOIs.php f. drawIntLables.php g. drawAnimation.php h. drawTrain.php i. zastavkyXML.php j. poiXML.php k. poiAjax.js l. zastavkyAjax.js pozn. z kapacitních důvodů nejsou v textové části obsaženy všechny zdrojové kódy, ty jsou k dispozici na přiloženém CD
