Technológia Google Street View je známa a veľmi často používaná. Vďaka Google Maps API je možné vytvorenie aj vlastného Street View svojho obľúbeného miesta, alebo inej záujmovej lokality. V článku nižšie stručne popíšem, ako postupovať pri vytvorení vlastnej prehliadky.
1: Fotenie lokality – zber fotiek
Najvhodnejšie je mať zariadenie s tzv. rybím okom (Fisheye objektív). Ak taký nemáme k dispozícii, bude stačiť aj klasický objektív a statív. Ten nám zabezpečí polohu zariadenia v jednom bode počas celého fotografovania. Postup je veľmi jednoduchý. Umiestnime statív na požadované miesto, zariadenie nasmerujeme tak, aby voči vodorovnej rovine bolo v uhle – 45°(fotíme smerom nadol) a začneme fotiť. Po odfotení prvej snímky zariadenie na statíve mierne otočíme, ale dbáme na to, aby ďalšia snímka mala dostatočný prekryv s tou predchádzajúcou (aspoň 10 - 20 %) a takto pokračujeme až kým sa neotočíme o 360 ° a nedostaneme sa späť na začiatok.
Potom nastavíme zariadenie tak, aby fotilo vo vodorovnej polohe a opäť pokračujeme podobným spôsobom. Po otočení o 360 ° a návrate na približne prvý záber opäť zmeníme uhol fotenia, pričom nastavíme + 45 ° od vodorovnej roviny statívu, teda smerom nahor a pokračujeme s fotením...
Na záver spravíme posledné dve snímky. Jednou odfotíme spodnú časť pod statívom, ktorý medzičasom odložíme a druhou odfotíme vrch, resp. oblohu. Takýmto spôsobom získame sériu fotografií zachytávajúcich kompletný priestor okolo nás z ktorých dokážeme vytvoriť 180°/360° sférickú fotografiu.
Séria fotografií zachytávajúcich kompletný priestor okolo
2: Vytvorenie 180°/360°panorámy
Na vytvorenie panorámy je potrebný softvér, ktorý dokáže spojiť jednotlivé zábery do sférickej panorámy (Spherical Panorama). Fotka musí reprezentovať guľu, v ktorej je premietnutý obraz (guľové zobrazenie premietnuté do 2D fotografie). Existuje viacero vhodných softvérov. Niektoré sú bezplatné, iné nie:
Panorama Tools - http://panotools.sourceforge.net
Hugin - http://hugin.sourceforge.net
Arcsoft - http://www.arcsoft.com/index.html
PTGui - http://www.ptgui.com
AutoDesk Stitcher Unlimited - http://www.360facil.com/eng/panorama-software-edition-commercial-autodesk-stitcher-unlimited.php
Hoci je každý softvér iný, princíp je rovnaký. Jednotlivé fotky sa importujú do prostredia zvoleného softvéru, prebehne analýza a na základe identifikovaných spoločných bodov sa snímky pospájajú (tu sa využije 10 % až 20 % prekryv spomenutý v bode 1). Ak softvér niektoré snímky nedokáže spojiť automaticky, príde na rad manuálne označovanie spoločných bodov na snímkach, aby mohli byť následne spojené. Mne najviac vyhovuje softvér AutoDesk Stitcher Unlimited a PTGui. Výsledná fotografia musí mať pomer strán 2:1. Po jej vytvorení je možné aplikovať farebný kontrast, jas a iné nastavenia, ktoré spravia výsledný efekt atraktívnejší.
3: Vytvorenie vlastného Street View
Ak podľa bodu 2 získame panorámu v pomere šírka a výška 2:1, je vhodné upraviť rozmery na napríklad 2048 x 1024, prípadne 4096 x 2048. Následne musí byť takýto obrázok rozdelený na 32 štvorcov, to znamená 4 riadky a 8 stĺpcov a jednotlivé rezy musia byť separátne exportované a pomenované konkrétnym názvom, podľa obrázka nižšie (0-0.jpg, 0-1.jpg, 0-2.jpg ) atď. Pri rozlíšení 2048 x 1024 budú mať tieto štvorce rozmer strán 256px, pri rozmere strán 4096 x 2049 to bude 516px.
Pomer strán
Označenie fotografií pre implementáciu do Google Street View
2: Vytvorenie 180°/360°panorámy
Takto pripravené štvorce sú už podklad pre priamu implementáciu a načítanie cez Google Street View. Môžeme použiť napríklad takýto kód, pričom objekt_1 je prvotný pohľad a objekt_2 je pohľad, ktorý je možné otvoriť prelinkovaním. Linky v rámci Google Street View je možné konfigurovať podľa ukážkového kódu nižšie.
var initPosPanoID, streetView;
function initialize() {
var streetViewOptions = {
zoom: 0,
panoProvider: getCustomPanorama,
pano : "objekt_1" //nazov adresára, v ktorom sú jednotlivé štvorce
};
var streetViewDiv = document.getElementById('streetview_canvas');
streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);
google.maps.event.addListener(streetView, "links_changed", createCustomLink);
}
function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) {
return "cesta-k-addresaru/" + panoID + '/' + tileX + '-' +tileY + '.jpg'; // celá cesta k snímkam
}
function getCustomPanorama(panoID) {
var streetViewPanoramaData = {
links: [],
copyright: 'Autor', //Autorstvo, alebo iná poznámka
tiles: {
tileSize: new google.maps.Size(256, 256), //rozmer štvorcov
worldSize: new google.maps.Size(2048, 1024), //rozmer panorámy
centerHeading: 275, //centrovanie pohladu po spustení. Maalo by smerovat na sever
getTileUrl: getCustomPanoramaTileUrl
}
};
switch(panoID) {
case "objekt_1": //nazov adresára, v ktorom sú jednotlivé štvorce
streetViewPanoramaData["location"] = {
pano: 'objekt_1', //nazov adresára, v ktorom sú jednotlivé štvorce
description: "1. snímka", //názov
latLng: new google.maps.LatLng(48.00000,18.00000) // GPS súradnica miesta snímania
};
return streetViewPanoramaData;
case "objekt_2": //nazov adresára, v ktorom sú jednotlivé štvorce
streetViewPanoramaData["location"] = {
pano: 'objekt_2', //nazov adresára, v ktorom sú jednotlivé štvorce
description: "Názov dalšieho záberu", //názov
latLng: new google.maps.LatLng(48.00000,18.00000) // GPS súradnica miesta snímania
};
return streetViewPanoramaData;
}
}
function createCustomLink() {
//pridanie linkov
var links = streetView.getLinks();
var panoID = streetView.getPano();
switch(panoID) {
case "objekt_1":
links.push({
description : "Názov dalšieho záberu", //názov dalšieho Google Street View
pano : "objekt_2", //nazov adresára, v ktorom sú jednotlivé štvorce
heading : 90 //centrovanie
});
break;
case "objekt_2":
links.push({
description : "1. snímka", //názov dalšieho Google Street View
pano : "objekt_1", //nazov adresára, v ktorom sú jednotlivé štvorce
heading : 270 //centrovanie
});
break;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Ukážka linku v prostredí Google Street View
Ak chceme, aby kompas v Street View zodpovedal realite, stred obrázka by mal smerovať práve na sever. Centrovanie je však možné nastaviť dodatočne aj v samotnom kóde, prostredníctvom funkcie centerHeading.
Nezabudnime na pripojenie API pomocou nasledujúceho kódu
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">Výsledok môže vyzerať napríklad takto: http://www.virtualna-banska-stiavnica.sk/virtualna-stiavnica/vodohospodarsky-system/tajchy/ottergrund
Pridať komentár k článku