Nástroj Gisquick umožňuje publikovat “snadno a rychle” projekt vytvořený v programu QGIS. Webová aplikace pak nabízí řadu možností pro uživatele jak s geodaty pracovat. Mezi základní nástroje patří samozřejmě jejich prohlížení v podobě mapy tak jak byla nastylována v QGIS, dále pak je to zobrazení atributů vybraných objektů a v neposlední řadě pak editace jak hodnot atributů tak geometrie. V základní konfiguraci umožňuje webová aplikace zobrazení atributů ve formě textu, čísel, datumu a statických obrázků.
TIP: Gisquick můžete vyzkoušet na veřejném serveru, například v projektu Central Europe
Pokud chcete zobrazovat grafy nebo videa nebo přehrávat zvuky musíte v současné době přistoupit k vlastí úpravě komponenty pro infopanel (detail prvku), kde se údaje zobrazují. Na obecné variantě se zatím pracuje, ale není třeba zoufat, uživatelská úprava není tak složitá a Gisquick nabízí vše, co je pro takovou úpravu potřeba.
V následující části si popíšeme jak k takové úpravě přistoupit. Úprava spočívá ve třech krocích:
Instalace serveru je jednoduchá díky tomu, že autoři vytvořili instalační nástroj. Nástroj je dostupný na https://github.com/gislab-npo/gisquick-cli a pokud budete postupovat podle návodu neměl by být s instalací problém. V mém případě jsem pouze musel instalovat klienta jako uživatel sudo. Druhý možný problém je pak použití dat v neprojektovaném souřadnicovém systému, doporučuji tedy např. EPSG:3857.
Osobně používám IntelliJ IDEA, ale v zásadě by mělo být celkem jedno v čem budete provádět úpravu – stačí textový editor. Gisquick je k dispozici na https://github.com/gislab-npo/gisquick a část, kterou budeme upravovat pak najdete v adresáři clients/gisquick-web. Zde je samozřejmě nutné provést instalaci node modulů, tak jak je popsáno v dokumentaci. Tedy npm install. Pak již můžete spustit klienta pomocí npm run serve. Je však důležité aby vám běžel server z předchozího kroku.
Samotný infopanel se nachází v src/components/GenericInfoPanel.vue. Jedná se o šablonu frameworku Vue.js, která obsahuje HTML a JavaScript kód. Pokud se těchto jazyků nebojíte můžete zkusit její modifikaci, tak aby se uživateli zobrazoval multimediální obsah. My si toto demonstrujeme na použití videa, kdy v atributové tabulce má objekt uvedeno URL, které ukazuje na MP4 soubor s videem.
Vytvoříme jednu funkci a jednu konstantu, které nám zajistí potřebnou funkcionalitu.
První funkce isVideo pouze kontroluje zda se v URL nachází přípona mp4 (nebo ogg) a tak tedy určí zda jde o video či nikoli. Funkci můžete samozřejmě libovolně udělat složitejší a např. si přečíst metadata daného videa nebo zkontrolovat zda je daná URL validní, apod.
function isVideo (val) {
return val && val.match(/\.(mp4|ogg)$/i) !== null
}
Konstanta VideoWidget představuje grafické uživatelské rozhraní, které bude přehrávat video. Jedná se o značku jazyka HTML ve verzi 5. Je zde nastavené automatické přehrání a zobrazení uživatelských tlačítek pro kontrolu přehrávání. Samotná hodnota URL videa se předává jako parametr anonymní (arrow) funkce.
const VideoWidget = Widget((h, ctx) => (
<video width="200" controls autoplay>
<source src={ctx.props.value} type="video/mp4"/>
Your browser does not support HTML video.
</video>
))
Poslední úprava spočívá v modifikaci funkce widgets() v sekci computed. Tato funkce se volá vždy při jakékoli změně a je tak dynamicky měněn obsah infopanelu např. když se změní vybraný objekt. Část, která pracuje s atributy, které jsou URL se změní na:
if (isImage(value)) {
return ImageWidget
} else if (isVideo(value)) {
return VideoWidget
} else {
return UrlWidget
}
Tento kód zachová původní funkcionalitu, tedy obrázky budou zobrazeny jako obrázky, jiná URL jako odkazy a přidá, že v případě MP4 nebo OGG dojde k zobrazení videa.
Takto snadno dosáhneme toho, že se URL adresy s MP4 budou zobrazovat v infopanelu jako videa a rovnou se přehrají. Tak jak je zobrazeno na následujícím obrázku.
Z příkladu je patrné, že modifikace infopanelu je snadná a není potřeba příliš mnoho dovedností k její realizaci. Je také jasné, že složitější příklady jako práce s grafy, již tak triviální nebudou. Nicméně např. doplnění loga firmy nebo nějaké další popisné informace do infopanelu je opravdu jednoduchá.