Univerzita Palackého v Olomouci Přírodovědecká fakulta Katedra geoinformatiky

Martin MIKLOŠ

VIRTUÁLNÍ PRŮVODCE KRAJINOU CHKO LITOVELSKÉ POMORAVÍ

Magisterská práce

Vedoucí práce: RNDr. Vilém PECHANEC Ph. D.

Olomouc 2012

Čestné prohlášení Prohlašuji, že jsem magisterskou práci magisterského studia oboru Geoinformatika vypracoval samostatně pod vedením RNDr. Viléma Pechance Ph. D. Všechny použité materiály a zdroje jsou citovány s ohledem na vědeckou etiku, autorská práva a zákony na ochranu duševního vlastnictví. Všechna poskytnutá i vytvořená digitální data nebudu bez souhlasu školy poskytovat.

V Olomouci duben 2012

______________________

Děkuji RNDr. Vilému Pechancovi Ph. D. za navržené téma magisterské práce. Dále děkuji rodičům a Martině Holoubkové, kteří mne po dobu tvorby práce podporovali.

Vložený originál zadání bakalářské/magisterské práce (s podpisy vedoucího katedry, vedoucího práce a razítkem katedry). Ve druhém výtisku práce je vevázána fotokopie zadání.

OBSAH SEZNAM POUŽITÝCH ZKRATEK ……………………...………………………X ÚVOD .......…………………………………………..………….…………………...X 1 CÍLE PRÁCE............................................................................................................... 9 2 POUŽITÉ METODY A POSTUPY ZPRACOVÁNÍ ............................................ 10 2.1 Vymezení pojmu Virtuální studovna ................................................................. 10 2.2 Použitá data ........................................................................................................ 10 2.2.1 Digitální archív CHKO Litovelské Pomoraví ........................................ 10 2.2.2 Multimediální data .................................................................................. 10 2.2.3 Prostorová data ....................................................................................... 11 2.3 Použité programy ............................................................................................... 13 2.4 Postup zpracování .............................................................................................. 14 3 SOUČASNÝ STAV ŘEŠENÉ PROBLEMATIKY ................................................ 15 3.1 Vymezení pojmu 3D vizualizace krajiny ........................................................... 15 3.2 XML formáty ..................................................................................................... 16 3.2.1 SMIL ....................................................................................................... 16 3.2.2 X3D......................................................................................................... 17 3.2.3 CityGML................................................................................................. 18 3.2.4 3DMLW .................................................................................................. 19 3.3 Knihovny využívající HTML5 a WebGL .......................................................... 19 3.3.1 KataSpace ............................................................................................... 20 3.3.2 GLGE ...................................................................................................... 21 4 TVORBA VIRTUÁLNÍ STUDOVNY ..................................................................... 22 4.1 Návrh virtuální studovny.................................................................................... 22 4.1.1 Základní požadavky ................................................................................ 22 4.1.2 Návrh architektury .................................................................................. 23 4.1.3 Návrh struktury Virtuální studovny ........................................................ 24 4.2 Mapová část ....................................................................................................... 24 4.2.1 Výběr vhodných technologií................................................................... 24 4.2.2 Sestavení ................................................................................................. 29 4.3 Popis území ........................................................................................................ 30 4.3.1 Výběr vhodných technologií................................................................... 30 4.3.2 Sestavení ................................................................................................. 32 4.4 Dokumenty ......................................................................................................... 33 4.4.1 Výběr vhodných technologií................................................................... 33

5

4.4.2 Sestavení ................................................................................................. 33 4.5 Multimédia ......................................................................................................... 34 4.5.1 Výběr vhodných technologií................................................................... 34 4.5.2 Sestavení ................................................................................................. 36 4.6 Administrace webu............................................................................................. 39 4.6.1 Editace textů ........................................................................................... 39 4.6.2 Správa dokumentů .................................................................................. 40 4.6.3 Správa fotografií ..................................................................................... 40 4.6.4 Stažení geodat ......................................................................................... 42 4.6.5 Správa uživatelů...................................................................................... 43 4.6.6 Moje poznámky ...................................................................................... 43 5 VÝSLEDKY ............................................................................................................... 45 6 DISKUZE ................................................................................................................... 47 6.1 Vývoj studovny .................................................................................................. 47 6.2 Jaká je budoucnost?............................................................................................ 47 7 ZÁVĚR ....................................................................................................................... 49 POUŽITÁ LITERATURA A INFORMAČNÍ ZDROJE SUMMARY PŘÍLOHY

6

SEZNAM POUŽITÝCH ZKRATEK Zkratka

Význam

AJAX

Asynchronous JavaScript and XML

API

Application Programming Interface

CSS

Cascading Style Sheets

DOM

Document Object Model

HTML

HyperText Markup Language

CHKO

Chráněná krajinná oblast

JPEG

Joint Photographic Experts Group

KML

Keyhole Markup Language

MZCHÚ

Maloplošné zvláště chráněné území

MP3

MPEG-1 popř. MPEG-2 Audio Layer III

OGC

Open Geospatial Consortium

PHP

PHP: Hypertext Preprocessor

PDF

Portable Document Format

REST

Representational State Transfer

SHP

Shapefile

SQL SMIL

Structured Query Language Synchronized Multimedia Integration Language

SVG

Scalable Vector Language

VML

Vector Markup Language

VRML

Virtual Reality Modeling Language

W3C

World Wide Web Consortium

WAV

Waveform audio file format

WebGL

Web Graphic Language

WFS

Web Feature Service

WMS WYSIWYG

Web Map Service What You DSe Is What You Get

WWW X3D

World Wide Web Extensible 3D

XML

Extensible Markup Language

7

ÚVOD Máloco je považováno za tak samozřejmé jako krajina okolo. Vzbuzuje v nás emoce, ovlivňuje naše chování, nelze jí nevnímat. Jejímu studiu se lidstvo věnuje od nepaměti a stejně tak v něm bude muset neustále pokračovat. Bylo vytvořeno mnoho knih, článků či atlasů, které krajinu a její složky rozebírají, popisují či jen archivují její aktuální tvář, ale zachytit maximální množství informací zdá se být při současném technologickém pokroku nemožné. Přesto jde vývoj ve výzkumu krajiny velmi rychle kupředu. V době 21. století již můžeme s pomocí moderní techniky a nových technologií krajinu zkoumat detailněji. Krajinu je možné digitálně vizualizovat a přenášet tento obraz na displeje různorodých zařízení, archivovat informace o jejich složkách v robustních databázových systémech, či dynamicky modelovat její budoucí vývoj. Zmíněným oblastem studia krajiny se věnuje také geoinformatika. Vědci mají k dispozici stále více informací o krajině ve formě digitálních dat (mapy, fotografie, zvukové záznamy, inventáře...) a vzniká tak prostor pro jejich prezentaci a zpřístupňování všem zájemcům o její studium. Potenciál využití moderních technologií dálkového přístupu k informacím o krajině tak neustále roste a je velkou výzvou do dalších let. Tato práce se snaží přinést jedno z řešení, jakým způsobem informace o krajině přehledně a dynamicky prezentovat široké veřejnosti, a to formou přístupné webové aplikace Virtuální studovna Chráněné krajinné oblasti Litovelské Pomoraví.

Magisterská práce byla řešena v rámci projektu číslo: CZ.1.07/2.2.00/07.0086 s názvem „Environmentální vzdělávání rozvíjející uplatnění v praxi“, který byl řešen mj. na Katedře geoinformatiky.

8

1 CÍLE PRÁCE Cílem diplomové práce je vytvoření virtuální studovny (virtuálního průvodce) krajiny CHKO Litovelské Pomoraví za využití moderních webových technologií a přístupů k vizualizaci krajiny. Virtuální studovnou je v tomto případě myšlena interaktivní webová prezentace prostorových, multimediálních (zvuk, video) a popisných dat oblasti CHKO Litovelské Pomoraví. Uživateli virtuální studovny je umožněn přístup k velkému množství informací o základních charakteristikách území CHKO, maloplošných zvláště chráněných územích (MZCHÚ), životním prostředí, ochraně přírody a dalším tématům. Zpřístupnění studovny je rozděleno do tří úrovní – pro širokou veřejnost, pro autorizované uživatele a administrátora. Součástí webové prezentace je také administrační rozhraní pro správu obsahu, které zajistí možnost další aktualizace a rozvoj a zároveň nezávislost virtuální studovny na autorovi diplomové práce. Vzniklá webová prezentace si klade za cíl zájemcům umožnit a zjednodušit přístup k informacím a datům CHKO Litovelské Pomoraví a zároveň tuto oblast zatraktivnit na poli internetu. Jedná se zároveň o dílčí cíl projektu Environmentální vzdělávání rozvíjející uplatnění v praxi (reg. č. CZ.1.07/2.2.00/07.0086). Dalším cílem diplomové práce je analýza současného stavu problematiky 3D vizualizace a animace krajiny se zaměřením na technologie pro jejich tvorbu, kterým se autor věnuje v teoretické části. Budou vytvořeny webové stránky o práci a veškeré zdrojové kódy budou přiloženy na DVD.

9

2 POUŽITÉ METODY A POSTUPY ZPRACOVÁNÍ V kapitole je uveden přehled veškerých metod a technologií, použitých při tvorbě webové virtuální studovny. Pro tvorbu praktické části bylo použito metod webdesignu, webové kartografie, programování a zpracování dat. V teoretické části byla použita metoda studia literatury.

2.1 Vymezení pojmu Virtuální studovna Pod pojmem Virtuální studovna je nutno chápat interaktivní webovou aplikaci nebo aplikaci, která uživateli umožňuje přístup k informacím o území CHKO Litovelské Pomoraví. Nositelem informací jsou prostorová, multimediální (obrazová a zvuková) a textová data. Jedná se tedy o nejnižší typ virtuální reality - Low-end VR. Synonymem pro pojem Virtuální studovna jsou v tomto případě pojmy webová studovna či multimediální studovna. [11]

2.2 Použitá data Pro diplomovou práci je příznačná manipulace s velkým množstvím dat, protože cílem práce je vizualizovat prostorová a multimediální data a zpřístupnit digitální archiv CHKO Litovelské Pomoraví.

2.2.1

Digitální archiv CHKO Litovelské Pomoraví

Jedná se o digitální kopie všech písemných, tabelárních a mapových materiálů k jednotlivým MZCHÚ od roku 1990. Konkrétně se jedná o zřizovací předpisy, vyhlašovací řízení, plány péče, údaje z Katastru nemovitostí, evidence zásahů a opatření, správní řízení, vědecko-výzkumnou činnost a veškeré další dokumenty. Dokumenty jsou ve formátech JPEG a PDF. Celková velikost archivu je 18,7 GB (10 183 souborů). Vlastníkem tohoto archivu je Správa CHKO Litovelské Pomoraví se sídlem v Litovli.

2.2.2

Multimediální data

Multimediální data jsou v práci zastoupena 360° snímky, klasickými digitálními fotografiemi a zvukovými stopami. 360° snímky ve formátu JPEG nebyly před publikováním modifikovány. Jejich vlastníkem je Katedra geoinformatiky UP v Olomouci.

10

Digitální fotografie jsou použity ve více sekcích. Fotogalerie jednotlivých MZCHÚ, diapozitivů a snímky v mapě jsou převzaty od správy CHKO Litovelské Pomoraví. Tato obrazová data byla před použitím ve virtuální studovně upravena. Každá fotografie je na serveru uložena ve dvou velikostech (velká a miniaturní). Pro úpravu fotografií byl použit freeware Irfan View. Zvukové stopy jednotlivých živočichů jsou použity v sekci multimédia. Zvuky byly konvertovány z formátů WAV a MP3 do formátů OGG a M4U, které jsou pro použití ve webových prohlížečích vhodnější. Pro převod mezi zvukovými formáty byl použit nástroj 4Musics Multiformat Converter v 15 denní testovací verzi.

2.2.3

Prostorová data

Veškerá prostorová data, použitá v diplomové práci, jsou určena pouze k vizualizaci a základní identifikaci. Jsou uložena ve formátu SHP, TIF a Google Fusion Table. K datům SHP a TIF přistupuje ArcGIS Server. Data jsou ve virtuální studovně přístupná v sekci Mapová část, kde jsou publikována pomocí ArcGIS Viewer for Flex. Data uložená v Google Fusion Tables jsou publikována v prostředí Google Maps. Nad žádnými daty se neprovádějí analýzy a není možné je skrze virtuální studovnu jakkoli editovat.

Přehled použitých prostorových dat: Základní podkladová data: 

Základní mapa ČR

-

zdroj: ArcGIS Online Base Map



Topografická mapa (World Topographic Map)

-

zdroj: ArcGIS Online Base



Satelitní mapa (World Imagery)

-

zdroj: ArcGIS Online Base Map



Historické letecké snímky - 1953, 1956, 1990, 2002-2003

-

zdroj: CHKO LP

Ochrana přírody: 

Hranice CHKO -



měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Maloplošná zvláště chráněná území + OP -

měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK 11



NATURA 2000 - Ptačí oblasti -



NATURA 2000 - Evropsky významné lokality -



měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Památné stromy -



měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Hranice RAMSAR -

měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Přírodní podmínky: 

Geomorfologie -



Geologiie -



měřítko: 1:10 000, zdroj: WMS ÚHUL, projekce: S-JTSK

Krajinný potenciál -



měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK

Lesnictví -



měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK

Hlavní půdní jednotky -



měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK

Hydrologie -



měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK

Klima -



měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK

měřítko: 1:10 000, zdroj KGI UPOL, projekce: S-JTSK

Vývoj landuse -

měřítko: 1:10 000, zdroj: KGI UPOL, projekce: S-JTSK

Turistická témata: 

Cyklostezky -



Turistické trasy -



měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Naučné stezky -



měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Turistické rozcestníky

12

-

měřítko: 1:10 000, zdroj: CHKO LP, projekce: S-JTSK

Ostatní: 

Klady mapových listů - síťové mapování -



Klady mapových listů - Základní mapa (ZM5, ZM10, ZM25, ZM50) -



měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK

Katastr nemovitostí -



měřítko: 1:10 000, zdroj: CENIA, projekce: S-JTSK

měřítko: 1:1000 - 1: 2880, zdroj: WMS ČUZK , projekce: S-JTSK

Výškopis -

zdroj: KGI UPOL

2.3 Použité programy Pro zpracování dat a vývoj webu virtuální studovny bylo využito jak licencovaných programových prostředků dostupných na Katedře geoinformatiky UP v Olomouci, tak OpenSource a freeware produktů. V případě konverze zvukových formátů byla použita 15 denní Trial verze komerčního produktu.



ArcGIS Desktop 10.1



ArcGIS Server 9.3



JanMap



Irfan View



4Musics Multiformat Converter - 15 denní testovací verze



GIMP



Inkscape



PSPad



Dokumenty Google - docs.google.com

13

2.4 Postup zpracování

Obr. č.1 Schéma postupu zpracování diplomové práce

14

3 SOUČASNÝ STAV ŘEŠENÉ PROBLEMATIKY Tato kapitola řeší současný přístup k 3D vizualizaci krajiny. V úvodu je tento pojem vysvětlen a dále jsou představeny klíčové formáty pro jejich prezentaci ve webovém prostředí.

3.1 Vymezení pojmu 3D vizualizace krajiny Krajina, kterou vnímáme všude kolem nás je nekonečně složitým jevem a její úplné přenesení do digitálního prostředí je za současného vědeckého pokroku neřešitelným cílem. To však neplatí pro generalizovanou krajinu. Již v roce 1987 došel Ervin H. Zube k závěru, že budoucnost 3D vizualizací krajiny bude v počítačové grafice. Zlomovým bodem pro 3D vizualizace krajiny bylo spojení technik zpracování obrazu a geometrického modelování. [1]. Na geometrické sítě, generované z výškových charakteristik území byly kladeny snímky krajiny a vznikaly první foto-realistické vizualizace. S rostoucími možnostmi náročnosti výpočtů a pokroku v oblasti digitálního zpracování obrazu docházelo k zpřesňování a rozšiřování míry detailů vizualizací. 3D modelovaní je dnes velmi rozšířené v podobě vizualizace prostředí měst, krajiny a nejrůznějších tvarů geomorfologie. 3D vizualizaci krajiny chápeme jako zjednodušení reprezentace reálného světa a můžeme ji v určitých případech nazvat také 3D mapou. Z pohledu některých kartografů je 3D vizualizace krajiny chápána jako mapa jen tehdy, když jsou splněny pravidla shodná s pravidly tvorby klasické „2D“ mapy. Např.: každý objekt je definován v souřadném systému mapy, kartografické znaky zaručují přenos informací apod. [2]. Jiní kartografové se však spokojí s obecnější definicí, která říká, že 3D mapa je počítačem vytvořená, matematicky definovaná, trojrozměrná vysoce realistická prezentace krajiny se všemi přírodními a artificiálními objekty a jevy [4]. V této definici se již tedy nesetkáme s nutností plnění kartografických pravidel. Vizualizace krajiny se v dnešní době využívá například v počítačových hrách, v geografii, v software navigačních systému, pro testování fyzikálních modelů a v dalších oblastech. Pro vytváření reálných map se terén pouze reprodukuje, jelikož je požadována naprostá autenticita. Také v navigačních systémech se hodně dbá na detaily a přesnost zobrazení. V těchto případech se data nejprve musí zaznamenat a poté reprodukovat v cílové aplikaci, která se již postará o zbytek práce, o vygenerování modelu terénu, se kterým se může dále pracovat. [3] 15

3.2 XML formáty Následující kapitola se věnuje klíčovým formátům vycházejících ze značkovacího jazyka XML, určených pro integraci multimédií v prostředí geolokalizovaného webu a možnostem jejich následné dynamické prezentace.

3.2.1

SMIL

Synchronized Multimedia Integration Language, umožňuje vytvářet působivé multimediální prezentace obsahující video, zvuk, obrázky a text. Pomocí SMIL lze vytvářet interaktivní aplikace a animace (výsledný dokument je srovnatelný s prezentacemi tvořenými v Microsoft PowerPoint). [12] Vývoj jazyka byl řízen pracovní skupinou Synchronized Multimedia při World Wide Web Consortium (W3C) a k 1. dubnu 2012 je definitivně ukončen. Veškeré úsilí o možnost vytvářet, publikovat a propojovat multimédia v prostředí webu je nyní upřeno k HTML5 a CSS3.

<smil xmlns="http://www.w3.org/2001/SMIL30/"> <par> <seq>

Zdrojový kód. č.1

Ukázka vytvoření tří čtverců a zobrazení v nich obrázků v určitém časovém intervalu

16

3.2.2

X3D

Extensible 3D je XML formát na ukládání 3D scén. Je vyvíjen Web3D konsorciem (www.web3d.org), vychází z již nepodporovaného VRML (Virtual Reality Modeling Language) a v některých směrech jej rozšiřuje a zpřesňuje. Hlavní změnou je přechod na syntaxi zápisu založené na XML. To s sebou nese celou řadu předností, především jednoduché zpracování celého dokumentu pomocí velkého množství knihoven a programových API pro práci s XML [13].

<Shape> <Appearance> <Material diffuseColor="0 1 0"/>

Zdrojový kód. č.2 Vytvoření trojrozměrné scény.

Kromě vytváření základních grafických objektů umožňuje X3D vytvářet složitější struktury. Pro vizualizaci krajiny je velmi užitečný typ objektu výškové pole (ElevationGrid). Jedná se o zápis dvourozměrného pole, do kterého jsou uloženy výškové hodnoty. X a y souřadnice jsou dopočítány dle pozice v poli. Na takto vytvořené pole je možné nakládat textury a vytvářet fotorealistické vizualizace.

Obr. č.2 Schéma výškové sítě – struktura výškové pole [13].

17

Podobně jako u formátu SMIL je pro X3D limitující chybějící nativní podpora webových prohlížečů. Pro zobrazení je nutná instalace pluginu. Další nevýhodou je přílišná výpočtová náročnost u velkých projektů. Formát je vhodný spíše pro vytváření menších a lehčích geometrických struktur, mezi které vizualizace krajiny rozhodně nepatří. Další rozvoj formátu zatím není v plánu. Očekávání se upírají především směrem k WebGL a HTML5.

3.2.3

CityGML

CityGML je otevřený datový model a na XML založený formát pro výměnu a ukládání virtuálních 3D modelů měst a krajiny. Jedná se o OpenGIS Encoding Standard, aktuálně ve verzi 1.1. [14] Cílem vývoje CityGML je dosáhnout všeobecné definice základních jevů, atributů a vztahů v rámci 3D modelu města. Aplikační oblasti zahrnují témata územního a krajinného plánování, architektonických řešení, turistických a odpočinkových aktivit, katastru nemovitostí, simulací týkající se životního prostředí, krizového managementu, pěší a automobilové navigace [14]. Pro zobrazení dat uložených ve formátu CityGML ve webovém prohlížeči je nutná instalace pluginu.

Obr. č.3 Ukázka vygenerovaného modelu města uloženého v CityGML.

18

3.2.4

3DMLW

3D Markup Language for Web je další z klonů jazyka XML pro tvorbu a zobrazení 2D a 3D obsahu na webových stránkách v internetových prohlížečích. Formát podporuje skripty pro dynamický a interaktivní obsah. Také v případě tohoto jazyka je nutná instalace pluginu do webového prohlížeče. [15]

Obr. č.4 Ukázka vygenerovaného modelu města uloženého v 3DMLW.

3.3 Knihovny využívající HTML5 a WebGL Pátá verze HyperText Markup Language přináší spoustu nových vlastností, tagů a sémantiky (v současné době je stále ve fázi navrhování). Nabízí možnost vkládání multimédií přímo do těla stránek bez nutnosti použití běhového prostředí Flash. Většina moderních webových prohlížečů ve svých posledních verzích podporuje velkou část specifikace jazyka HTML5. Mezi nejvýznamnější novinky z pohledu digitální kartografie a vizualizace krajiny patří nový element . [16] Bitmapové kreslící plátno závislé na rozlišení, které může být za běhu využíváno pro vykreslování grafů, herní grafiky a ostatních vizuálních prvků. [16] Jedná se tedy o kontejner pro grafiku, ve kterém se objevují veškeré výstupy skriptovacích jazyků. S tímto elementem je úzce spojena knihovna WebGL. 19

WebGL Knihovna (Web-based Graphics Library) vyvíjena Khronos group rozšiřuje možnosti JavaScriptu o práci s 3D grafikou bez nutnosti instalace podpůrných pluginů. WebGL kód zpracovává grafická karta klientského počítače a do elementu canvas vykresluje výsledky. Z této knihovny vychází mnoho dalších velmi zajímavých rozšíření jako např. KateSpace a GLGE.

3.3.1

KataSpace

Velmi zajímavý projekt vyvíjí výzkumný tým Katalabs složen z vědců univerzit v Stanfordu a Princetonu. Snaží se vytvořit prostředí KataSpace [17] podobné virtuálnímu světu SecondLife (http://secondlife.com/), kterému by však ke svému běhu postačil pouze webový prohlížeč. Demonstrace tohoto světa je již funkční. Zatím sice primitivní (ve smyslu výběru pouze ze dvou avatarů a omezeného rozsahu pohybu). Přesto však jasně poukazuje na fakt, že WebGL přináší velký pokrok a pro vizualizace krajiny běžících přímo v prohlížečích je velkým příslibem do budoucna. [17]

Obr. č.5 Ukázka virtuálního světa KataSpace.

20

3.3.2

GLGE

Knihovna s příznačným podtitulem „WebGL for the lazy“ se snaží zjednodušovat přístup k funkcím WebGL a umožňuje obsah vytvářet rychleji. Velmi propracovaný a zjednodušený je zde systém pro generování oblohy a mlhy. Nové funkce umožňují vytvářet realističtější modely, kdy hustota oblačnosti a mlhy pomalu slábne směrem k blízkým předmětům a horizontu, což působí mnohem věrněji. Nejedná se sice o přímé vizualizace krajiny, ale právě špatně simulovaná obloha v některých případech často kazí dojem z jinak hezké vizualizace. [18]

Obr. č.6 Vygenerovaná oblaka pomocí knihovny GLGE.

21

4 TVORBA VIRTUÁLNÍ STUDOVNY Kapitola popisuje jednotlivé kroky, které bylo nutné provést při vývoji Virtuální studovny krajiny CHKO Litovelského Pomoraví. Ta je složena ze čtyř základních částí (Mapová část, Popis území, Dokumenty, Multimédia) a administračního rozhraní s povoleným přístupem autorizovaných uživatelů.

4.1 Návrh virtuální studovny V prvním kroku byl proveden návrh webové stránky, tedy vytvoření základního schématu a principu vzájemného propojení, aby se zamezilo duplikaci obsahu. Dále bylo rozhodnuto o značkovacích a skriptovacích jazycích, které se pro vývoj práce použijí a také byl udán směr, jakým se má ubírat design webu.

Obr. č.7 Schéma Virtuální studovny – hierarchie webových stránek.

4.1.1

Základní požadavky



vytvoření Virtuální studovny podávající informace o CHKO Litovelské Pomoraví



Virtuální studovna musí být moderní přístupná webová aplikace spustitelná na běžné konfiguraci stroje koncového uživatele 22



obsahem studovny musí být prostorová, popisná a multimediální data, která uživateli přináší ucelené a přehledné informace o území CHKO



autorizovaný uživatel musí mít přístup k dalším částem studovny (vytváření poznámek, spravování některých částí studovny)



administrátor musí mít přístup ke správě obsahu webu (dokumenty, texty, fotografie, uživatelé)

4.1.2

Návrh architektury

Virtuální studovna funguje na principu klient-server architektury a je tvořena pomocí jazyků HTML, CSS3, ActionScript (Flex) a JavaScript (především framework JQuery) na straně klienta. Serverové skriptování a komunikaci s MySQL databázi vykonává PHP. Některé úlohy jsou zprostředkovávány asynchronně pomocí AJAX. Popis základních technologií v diplomové práci záměrně chybí, jejich znalost je považována za samozřejmost. Autor se více věnuje méně známým rozšiřujícím knihovnám, které nejsou tak často používané a mají potenciál pro další využití při zpracovávání obdobných úloh a jiných, webově zaměřených vědeckých prací.

Obr. č.8 Schéma architektury klient-server, na které je Virtuální studovna postavena.

23

4.1.3

Návrh struktury Virtuální studovny

Při návrhu struktury webových stránek Virtuální studovny byl kladen důraz na jednoduchost a přehlednost. Byla zde snaha zamezit jakékoli duplicitě obsahu, který se z velké části dynamicky generuje z databáze a file systému uloženém na serveru. Veškerá data, která byla před zahájením vývoje webu k dispozici, byla rozdělena do čtyř hlavních tématických částí: Popis území, Mapová část, Dokumenty a Multimédia. Návrh webdesignu byl čistě na autorovi práce, který se snaží o co nejčistší provedení s jasnou a přehlednou strukturou bez zbytečných rušivých prvků. Je využito některých nových vlastností, kaskádových stylů (CSS3) box-radius, box-shadow, transition a opacity.

4.2 Mapová část 4.2.1

Výběr vhodných technologií

Pro publikování prostorových dat v prostředí webu se nabízí mnoho přístupů a řešení. Autor práce se rozhodoval mezi možnostmi nasazení ArcGIS Serveru či využití některého z JavaScriptových mapových API. Každá technologie má své určité výhody, ale také limity a omezení. Důležitým faktorem, na který byl při výběru technologie brán zřetel, bylo velké množství prostorových dat, které jsou ve Virtuální studovně publikovány. Dalším faktorem, na který bylo potřeba přihlížet, je nutnost znemožnit nelegálnímu stažení a šíření dat. Seznam vrstev viz. kapitola 2.2.3. Následující přehled se pokusí jednotlivé technologie stručně představit a uvede důvod, pro který bylo či nebylo dané technologie využito.

Google Maps API Aplikační rozhraní, dostupné z [https://developers.google.com/maps/], jež uživatelům umožňuje pomocí skriptovacího jazyka JavaScript začlenit Google Maps do těla vlastních webových stránek, poskytuje mnoho nástrojů pro práci a manipulaci s prostorovými daty. Pomocí mnoha hotových funkcí je umožněno přidání vlastního obsahu do mapy, což dovoluje uživateli vytvářet robustní mapové aplikace přímo v těle webové stránky, bez potřeby další vlastní serverové nadstavby. Tato charakteristika je příznačná také pro další JavaScriptová API. 24

Google Maps ve verzi 3.8 nabízí kromě možnosti zobrazení podkladových map (Satellite, Hybrid, Roadmap, Terrain) a základní geometrie (bod, linie, polygon) také možnost publikování dat ve formátu KML, dat uložených v Google Fusion Table, vrstvy intenzity dopravy či dat služby Panoramio. Důvodem, proč nebyla mapová část Virtuální studovny postavena nad tímto API, je nemožnost zajištění úplného zabezpečení dat. V případě uložení dat v databázi XML či KML jsou data vypsána přímo ve zdrojovém kódu, popř. jsou ve zdrojovém kódu cesty k souborům, a data si může kdokoliv stáhnout. Pokud jsou data uložena v Google Fusion Tables, nastává stejný problém. Aby bylo možné data vizualizovat v mapě, musí být tabulka s daty veřejně přístupná (Public). Takto uložená data si může do své aplikace připojit kdokoliv další. Jinou nevýhodou Gogole Maps API je chybějící možnost připojení externích dlaždicových služeb. Existují sice „hack“ skripty umožňující připojit např. WMS [19], ale oficiální podpora a hotové funkce zatím ve verzi 3.8 chybí. Gogole Maps API je však na webu virtuální studovny použito mimo hlavní mapovou část, a to u každé MZCHÚ a na úvodní stránce, kde je zobrazena vrstva hranice CHKO, která je uložena v Google Fusion Table. Tato úvodní mapa (nastavení podkladu, vrstvy a měřítka) je použita především z estetických důvodů, ale slouží také k základní orientaci a seznámení se zájmovým územím. Mapy u jednotlivých MZCHÚ jsou rovněž uloženy a generovány z Google Fusion Table.

Google Fusion Tables Google Fusion Tables je moderní online nástroj pro správu dat, který umožňuje jejich jednoduché sdílení, editaci a vizualizaci [21]. Jedná se o jeden z formátů služby Google Docs, který mj. umožňuje uložení prostorových dat, která jsou importována z formátu KML. Data je možné vizualizovat jako grafy nebo mapy. Dle podstaty dat lze např. vytvářet kartogramy či heatmaps, a to přímo v prostředí Google Docs. Výsledné mapy je možné publikovat pomocí odkazu nebo je vkládat do HTML kódu pomocí elementu <iframe>. K těmto datům lze samozřejmě přistupovat také pomocí funkcí GoogleMaps

API. Tato možnost byla využita při tvorbě Virtuální studovny. V případě map u jednotlivých MZCHÚ je použit následující jednoduchý skript pro vytvoření a zobrazení vrstvy layer z geometrie území, pro které platí ID = 1 a je uložená v tabulce 3154657.

25

var layer = new google.maps.FusionTablesLayer({ query: {

select: 'geometry', from: '3154657', where: 'ID = 1'

},}); layer.setMap(map);

Zdrojový kód. č.3

Google Maps API – připojení dat uložených v Google Fusion Table.

OpenLayers Javascriptový

framework

pro

publikování

map

na

webu,

dostupný

z

[http://openlayers.org/]. OpenSource projekt, vyvíjen OSGeo od roku 2005, pracuje pouze na straně klienta a oproti Google Maps API nabízí vývojářům skutečně široké spektrum formátů a služeb, se kterými lze pracovat. Jedná se o možnost připojení některých standardizovaných formátů a služeb OGC, mapových podkladů z jiných mapových portálů či mapových serverů (rozhraní REST). Patří zde např. mapové podklady Google Maps, Bing Maps, OpenStreetMap, WMS, WFS či GML. Zásadní předností je jednoduchost s jakou je možné jednotlivé vrstvy připojovat. Není tedy problém připojit různými způsoby, pomocí pár řádků kódu, např. Základní mapu ČR. Ta je jako Tiled Map Service (TMS) nabízená Českým úřadem zeměměřickým a katastrálním. V tomto případě se přistupuje přímo k dlaždicím uloženým ve file systému. (Nejedná se o garantovanou službu). [20] var zm = new OpenLayers.Layer.XYZ( "Základní mapa ČR", "http://tms.cuzk.cz/${z}/${x}/${y}.png", {sphericalMercator: true, transitionEffect: "resize", numZoomLevels: 18 });

Zdrojový kód. č.4 OpenLayers API – připojení dlaždic ZM uložených na tms.cuzk.cz.

26

Stejná mapová vrstva, publikována ArcGIS Serverem jako dynamická služba, může být připojena také jiným způsobem, a to pomocí funkce pro komunikaci s ArcGIS Serverem

-

OpenLayers.Layer.ArcGIS93Rest.

V tomto

případě

se

jedná

o

garantovanou službu, která běží také na ArcGIS.com jako Base Map. [21] var zm = new OpenLayers.Layer.ArcGIS93Rest ( "Základní mapa", "http://ags.cuzk.cz/ArcGIS/rest/services/zm/MapServer", {isBaseLayer: true, tileSize 256, projection: 'EPSG: 102067' } );

Zdrojový kód. č.5 OpenLayers API – připojení dlaždic ZM uložených jako ArcGIS služba..

Nad knihovnou OpenLayers je postaveno několik dalších toolkitů a rozšíření, mezi které patří např.: MapFish [http://mapfish.org/], GeoExt [http://geoext.org/] či české HSLayers [http://bnhelp.cz/hslayers/], které dále usnadňují práci a rozšiřují základní funkcionalitu frameworku.. Autor práce při hledání vhodné technologie pro tvorbu mapové části Virtuální studovny dlouho zvažoval využití tohoto frameworku. Jedinou negativní zkušeností byly převody mezi jednotlivými projekcemi. Konkrétně při transformaci souřadnic z projekce Spherical Mercator do WGS84 při sestavování dotazů getMap pro generování WMS, kdy transformace neproběhla vždy korektně. Rozhodujícím faktorem však nakonec byl velký počet vrstev, který je generován ArcGIS Serverem jako dynamická služba. Z tohoto důvodu byla zvolena kombinace ArcGIS Server – ArcGIS viewer for Flex, která značně zjednodušila práci na vývoji.

27

ArcGIS Server Robustní komerční mapový server firmy Esri poskytuje širokou škálu GIS služeb, které běží na straně serveru a nekladou vysoké nároky na klienta. ArcGIS Server umožňuje publikovat mapové a datové služby dle standardů OGC (Open Geospatial Consorcium), jakými jsou např. WMS, WFS či KML. Dále nabízí nástroje pro geoproscessing, geokódování, editaci dat. Podporuje rozhraní REST a SOAP. ArcGIS Server je dostupný ve třech edicích (Basic, Standard a Advanced) a je možné jeho funkcionalitu dále rozšiřovat o extenzce (Spatial Analyst, Network Analyst a další). Na straně klienta lze k ArcGIS Serveru přistupovat pomocí několika API (ArcGIS API for Flex, ArcGIS API for JavaScript, ArcGIS API for Silverlight). Nabízí také využití již hotových webových mapových prohlížeček (knihoven) - ArcGIS Viewer for Flex a ArcGIS Viewer for Silverlight. Pro tvorbu mapové části Virtuální studovny byla vybrána kombinace ArcGIS Server a ArcGIS Viewer for Flex. Vzhledem k dostupnosti této technologie, která zaručuje zabezpečení uložených dat, plynulý chod aplikace, snadnost editace dat administrátorem, jednoduchou práci s převody mezi jednotlivými referenčními systémy a dalších výhod, byl ArcGIS Server upřednostněn před použitím méně spolehlivého javascriptového frameworku OpenLayers. Ale v případě jiných projektů, kdy není možné např. z finančních důvodů ArcGIS Server použít, se OpenLayers jeví jako správná volba.

ArcGIS Viewer for Flex Webová mapová prohlížečka dostupná z [23], je postavená nad ActionScriptovým frameworkem Flex, jehož běhové prostředí je Adobe Flash Player. Sestavení aplikace (připojení

vrstev,

nastavení

layoutu,

zpřístupnění

widgetů)

je

možné

přímo

v konfiguračním souboru config.xml (viz. obr. č.9) nebo pomocí obrazového průvodce. Základní widgety (samostatný uživatelský prvek určený ke konkrétnímu účelu), jako například legenda, měření vzdáleností či editace jsou již předpřipraveny a postačuje je pouze přidat v souboru config.xml. Pomocí ArcGIS API for Flex je možné vytvořit další speciální widgety pro potřeby dané aplikace.[23]

28

Obr. č.9 Obecné schéma souboru config.xml.[23]

4.2.2

Sestavení

Prostorová data mapové části jsou publikována pomocí technologie ArcGIS Server na straně serveru a ArcGIS Viewer for Flex na straně klienta. U všech tématických vrstev (viz. kapitola 2.2.3) proběhl v software ArcGIS Desktop preprocessing. Data byla zbavena přebytečných atributů, ořezána na plochu CHKO Litovelské Pomoraví a kartograficky zpracována pro výstup. Data ve formátu SHP jsou uložena společně se souborem projektu (projekt.mxd) na patřičném místě adresářové struktury ArcGIS Serveru, který běží na serveru virtus.upol.cz. Pomocí ArcGIS Viewer for Flex jsou data publikována do těla webových stránek Virtuální studovny. Kompozici mapové části tvoří titul, podtitul, ovládací prvky mapy (zoom, pan), nástroj pro výběr tématické a podkladové mapy, měřítko, ukazatel souřadnic, nápověda a widgety (měření, legenda). Interaktivita je rozšířena o „mouseover“ efekt, kdy je po najetí myši na daný prvek v mapě zobrazeno jeho infowindow. Data jsou určena pouze k prohlížení a základní identifikaci. Analýzy nad daty či jejich editace není umožněna.

29

Klientská aplikace byla vytvořena editací souboru conf.xml předdefinované šablony a konfigurací jednotlivých widgetů. V HTML kódu byla přidána horní navigační lišta Virtuální studovny.

Obr. č.10 Mapová část Virtuální studovny – ArcGIS Viewer for Flex

4.3 Popis území Vstupní stránka části Popis území obsahuje rozcestník k jednotlivým MZCHÚ. Tímto rozcestníkem je myšlena interaktivní „klikací“ mapa a odkazy vedle ní. Pro vytvoření této mapy bylo použito knihovny Raphaël.js. Další obsah této části je tvořen klasickým HTML kódem. Pouze u stránek jednotlivých MZCHÚ je do těla stránky přidána mapa generovaná z dat uložených v Google Fusion Table. Postup přidání této mapy (Google Maps) je popsán v kapitole 4.3.1

4.3.1

Výběr vhodných technologií

Raphaël.js JavaScriptový

framework

pro

práci

s vektorovou

grafikou

dostupný

z

[http://raphaeljs.com/]. Knihovna umožňuje vytvářet interaktivní prvky webových

30

stránek, jakými jsou například grafy, mapy, schémata či ikony. Raphaël je založen na práci s otevřenými formáty SVG (Scaleble Vector Graphic) a VML ( Vector Markup Language). Každý grafický prvek je objektem v DOM a lze k němu přistupovat pomocí skriptů. Nejčastějším případem je připojení posluchače událostí (event handler) k objektu. Pro vytvoření mapy ve Virtuální studovně byla použita vrstva jednotlivých MZCHÚ. Ta byla pomocí programu ArcGIS Desktop mírně generalizována (simplify polygon - pro snížení počtů lomových bodů) a poté exportována do formátu SVG. Pomocí jednoduchého skriptu byla vytvořena interaktivní mapa. Objekty (polygony jednotlivých MZCHÚ) jsou vytvořeny funkcí R.path(), která se přiřadí SVG geometrie a nabývá vlastností jako jsou barva výplně (fill), barva obrysové čáry (stroke), tloušťka obrysové čáry (stroke-width), zakončení čáry (stroke-linejoin). Na objekt lze dále vázat události a k ní funkci. V tomto případě je změna barvy vázaná na událost najetí myši nad polygon a přechod na jiné url je vázané na událost kliknutí na polygon.

Obr. č.11 Interaktivní mapa vytvořená pomocí Raphael.js.

31

4.3.2

Sestavení

Stránka popis území je na serveru uložena v souboru mzchu.php. Pokud se na server nezasílá žádný GET požadavek, zobrazí se uživateli úvodní obsah. Ten se skládá ze základních informací o celém území CHKO Litovelské Pomoraví a z interaktivní mapy, která plní roli rozcestníku k jednotlivým MZCHÚ. Odkazy na jednotlivé stránky obsahují GET požadavek, kdy je v proměnné id uloženo id konkrétního MZCHÚ z databázové tabulky mzchu. Dle této proměnné se tedy vygeneruje správný obsah (název, popisné charakteristiky, mapa, odkazy na fotografie a dokumenty). Technicky vše zajišťuje jednoduchý php skript, který pomocí podmínky if (empty($_GET[‘id’] )

zjistí, zda je uživatel na stránce konkrétního MZCHÚ či na stránce s rozcestníkem a vrátí klientovi požadovaný obsah.

Obr. č.12 Základní layout pro všechny MZCHÚ, do kterého se dynamicky generuje obsah.

32

4.4 Dokumenty 4.4.1

Výběr vhodných technologií

Cílem této části bylo nalezení způsobu, jakým zpřístupnit autorizovaným uživatelům Digitální archív CHKO Litovelské Pomoraví (viz. kapitola 2.1.1). Pro obrovské množství dokumentů uložených ve složité adresářové struktuře ve formátech JPEG, PNG a PDF nebylo možné vytvořit vlastní systém prohlížení. Limitujícím důvodem byla silně nejednotná adresářová struktura u jednotlivých MZCHÚ. Nejvhodnějším řešením se v tomto případě zdá využití JQuery pluginu elFinder. elFinder Rozšíření pro framework JQuery , které je dostupné z [http://elfinder.org/], umožňuje uživateli webu vzdálený přístup k datům uloženým na serveru a přitom nabízí příjemné uživatelské prostředí blízké klasickým file managerům. Uživateli je umožněn přístup do všech podadresářů zvoleného rootu. Podle přidělených práv je možné data prohlížet, editovat (měnit názvy) a dokonce další data nahrávat. Velkou výhodou je také česká lokalizace, která je v případě Virtuální studovny velmi vítaná.

Obr. č.13 Ukázka webového rozhraní pro správu dat na serveru – knihovna elFinder.

4.4.2

Sestavení

Stránka Dokumenty je zpřístupněna na dvou úrovních autorizace. Nepřihlášený uživatel smí data pouze prohlížet, autorizovaný uživatel má k dokumentům plná práva (čtení, zápis, mazání).

33

Po spuštění stránky dokumenty.php je vyhodnocena základní podmínka: if (isLogged())

Pro každý výsledek (jedná se / nejedná se o autorizovaného uživatele) se vypíše a provede skript s hlavním nastavením elFinder. Konkrétně url k php konektoru, nástroje pro toolbar a možnosti kontextové nabídky. Pro jasné pochopení je potřeba nahlédnout do zdrojového kódu, který je přílohou diplomové práce.

4.5 Multimédia 4.5.1

Výběr vhodných technologií

V této sekci webu získává uživatel přístup k multimediálním datům vztahujícím se k oblasti CHKO Litovelské Pomoraví. Multimédia jsou hned na úvodní stránce této části rozdělena na fotogalerie, zvuky a videa. Fotogalerie se dále dělí na jednotlivá MZCHÚ, diapozitivy (digitální reprodukce analogových diapozitivů), 360° snímky a geotagované fotografie zobrazené v mapě. Zvuky zvířat jsou rozděleny do kategorií Obojživelníci, Ptáci a Savci. Pro prohlížení fotografií a videa je použit JQuery plugin Colorbox. 360° snímky jsou umístěny v HTML5 elementu . Pro přehrání zvuků je použit JQuery plugin jPlayer. Colorbox Malá knihovna pro prohlížení multimediálního a HTML obsahu v popředí webové stránky (tzv. lightbox ) je pod MIT licencí dostupná z [http://www.jacklmoore.com/]. Výhodou tohoto pluginu je zejména jeho snadná implementace a malá velikost (10KB). $(function() { $("#html").colorbox({html"html obsah"}); $("#fotografie").colorbox(); });

Zdrojový kód. č.6 JQuery funkce volající knihovnu Colorbox pro zobrazení fotografií či HTML obsahu.

34

Obr. č.14 Video uložené na serveru Youtube.com supštěné v okně Colorboxu.

jPlayer JQuery plugin pro přehrávání audio a video souborů v těle webových stránek je pod GPL/MIT licencí dostupný z [http://jplayer.org/]. Knihovna nabízí připravené (html/css/js) přehrávače zvuku a videa, kdy si může uživatel vybrat z několika typů a stylů (jednoduché tlačítko, přehrávač s dalšími ovládacími prvky, přehrávač více stop, videopřehrávač). Velkou výhodou pluginu je jeho nezávislost na běhovém prostředí, protože podporuje HTML 5, konkrétně využívá elementů