Cover photo
meniny Dnes je: 18.12.2017, meniny má: Sláva, Slávka

Html, php

Vlastná virtuálna prehliadka pomocou technológie Google Street View

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 vytvoreni 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.

Vlastné Google Street View

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.

Vlastné Google Street View

Pomer strán

Vlastné Google Street View

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);

Vlastné Google Street View

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">
KOMENTÁRE

Meno *

E-mail

captcha

Odpíšte kód

Publikované: 19. 5. 2017 | prečítané: 392x | komentárov: (0) | tagy: php,google street view,
Hosting zadarmo od WebSupport.sk

Annie Lennox - No More I Love You's

Kontakt
|
Vyhľadávanie
|
HTML5
|
CSS

webmaster: posta@dkubinsky.sk

štatistiky prístupov

Tvorba web stránok

Web stránky, e-shopy a aplikácie efektívne, funkčne, jednoducho - postavené na vlastnom redakčnom systéme.

Web stránky a E-shopy efektívne, funkčne, jednoducho...

Návrat hore