Como adicionar PhotoOverlays

As versões anteriores do KML permitem incluir pequenas fotografias nos balões de descrição anexados a marcadores no Google Earth. Camadas inteiras, como Panoramio, são compostas por fotos geolocalizadas enviadas por usuários. Para ver essas fotos, o usuário precisa clicar no ícone do marcador (ou clique no nome no painel "Lista") para abrir o balão que contém a foto.

PhotoOverlays são fotografias diretamente incorporadas à paisagem da Terra. Podem ser retângulos 2D, acrescentando "painéis" cenográficos que expandem as imagens aéreas da Terra. PhotoOverlays também podem ser projetadas em cilindros ou esferas a fim de criar panoramas virtuais nos quais o usuário pode "entrar", explorar e inspecionar detalhadamente. Além disso, o KML 2.2 acomoda PhotoOverlays muito grandes, contendo muitos megapixels de dados. Essas imagens exigem que você, como autor do KML, forneça um conjunto de versões com taxa de amostragem menor da imagem para que o Google Earth possa carregar de maneira eficiente somente a parte da imagem que caiba na visualização atual e no nível apropriado de detalhe.

Além desta página, leia a página "Tópicos sobre KML" em Câmeras, que são usadas ​​pelo objeto PhotoOverlay. Se você estiver usando uma imagem muito grande para PhotoOverlay, também será necessário criar um <ImagePyramid>.

O que você pode fazer

O novo elemento <PhotoOverlay> permite localizar geograficamente uma fotografia na Terra e especificar o posicionamento e orientação da câmera que visualiza essa PhotoOverlay. A PhotoOverlay pode ser um retângulo simples 2D, um cilindro parcial ou completo ou uma esfera (para panoramas esféricos). A superposição é colocada no local especificado e orientada em direção à câmera.

""

Talvez o aspecto mais empolgante desse novo elemento seja a habilidade de lidar com fotografias extremamente grandes, contendo muitos megapixels de dados, e permitir que o usuário amplie e aplique o panorama de forma eficiente nessas imagens grandes a fim de obter detalhes precisos. Esse elemento avançado é discutido na seção Como adicionar fotos muito grandes.

Principais conceitos

As seções a seguir discutem estes conceitos principais relacionados a PhotoOverlay:

  • Herança de <Feature> e <AbstractView>
  • Herança de <Overlay>
  • Forma
  • Campo de visão
  • Como ajustar a visualização com <rotation>
  • Como marcar PhotoOverlays com ícones
  • Pirâmide de imagem - avançado; consulte a seção Como adicionar fotos muito grandes

Sintaxe

A sintaxe para <PhotoOverlay> é fornecida aqui para que você possa consultá-la à medida que lê sobre os principais conceitos relacionados.

<PhotoOverlay>
  <!-- inherited from Feature element -->   
  <name>...</name>                      <!-- string -->   
  <visibility>1</visibility>            <!-- boolean -->   
  <open>0</open>                        <!-- boolean -->
  <atom:author>...<atom:author>         <!-- xmlns:atom -->   
  <atom:link>...</atom:link>            <!-- xmlns:atom -->   
  <address>...</address>                <!-- string -->   
  <AddressDetails xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">...
</AddressDetails> <!-- string --> <phoneNumber>...</phoneNumber> <!-- string -->
<Snippet maxLines="2">...</Snippet> <!-- string --> <description>...</description> <!-- string --> <AbstractView>...</AbstractView> <!-- Camera or LookAt --> <TimePrimitive>...</TimePrimitive> <styleUrl>...</styleUrl> <!-- anyURI --> <StyleSelector>...</StyleSelector> <Region>...</Region> <ExtendedData>...</ExtendedData> <!-- inherited from Overlay element --> <color>ffffffff</color> <!-- kml:color --> <drawOrder>0</drawOrder> <!-- int --> <Icon> <href>...</href> <!-- anyURI --> ... </Icon> <!-- specific to PhotoOverlay --> <rotation>0</rotation> <!-- kml:angle180 --> <ViewVolume> <leftFov>0</leftFov> <!-- kml:angle180 --> <rightFov>0</rightFov> <!-- kml:angle180 --> <bottomFov>0</bottomFov> <!-- kml:angle90 --> <topFov>0</topFov> <!-- kml:angle90 --> <near>0</near> <!-- double --> </ViewVolume> <ImagePyramid> <tileSize>256</tileSize> <!-- int --> <maxWidth>...</maxWidth> <!-- int --> <maxHeight>...</maxHeight> <!-- int --> <gridOrigin>lowerLeft</gridOrigin> <!-- lowerLeft or upperLeft--> </ImagePyramid> <Point> <coordinates>...</coordinates> <!-- lon,lat[,alt] --> </Point> <shape>rectangle</shape> <!-- kml:shape --> </PhotoOverlay>

Herança de <Feature>

Como <PhotoOverlay> é derivado de <Feature>, ele pode conter um de dois elementos derivados de <AbstractView>: <Camera> ou <LookAt>. Camera (ou LookAt) especifica um ponto de visão e uma direção de visualização (também chamado de vetor de visualização). PhotoOverlay é posicionado em relação ao ponto de visão. Especificamente, o plano de uma imagem retangular 2D é ortogonal (com ângulos direitos) ao vetor de visualização. O normal desse plano, ou seja, sua frente, que faz parte da foto, é orientado em direção ao ponto de visualização.

Herança de <Overlay>

O URL da imagem PhotoOverlay é especificado na tag <Icon>, que é herdada de <Overlay>. A tag <Icon> precisa conter um elemento <href> que especifique o arquivo de imagem a ser usado para PhotoOverlay. No caso de uma imagem na escala de gigapixel, o <href> é um URL especial indexado a uma pirâmide de imagens de resoluções variáveis (consulte Como adicionar fotos muito grandes).

Forma

A PhotoOverlay é projetada em uma forma. O valor de <shape> pode ser um dos seguintes:

  • rectangle - para fotos comuns
  • cylinder - para panoramas (cilindros parciais ou completos)
  • sphere - para panoramas esféricos
""

Campo de visão

Depois de posicionar a câmera no espaço e orientá-la, é necessário definir quanto da cena atual é visível. A especificação do campo de visualização é parecida com a especificação da abertura de lentes em uma câmera física. Um pequeno campo de visualização, como lentes telefoto, foca uma parte pequena da cena. Um grande campo de visualização, como lentes grande angulares, foca uma parte grande da cena.

O campo de visualização de uma PhotoOverlay é definido por quatro planos, cada um especificado por um ângulo relativo ao vetor de visualização. Esses quatro planos definem os lados superior, inferior, esquerdo e direito do campo de visualização, que tem a forma de uma pirâmide truncada, como mostrado aqui:

exibir volume para uma câmera

Os diagramas a seguir mostram os ângulos <rightFov> e <leftFov> (visão lateral) e os ângulos <topFov> e <bottomFov> (visão superior) dessa pirâmide:

""

Uma câmera típica do mundo real tem um campo simétrico de visualização em ambas as direções, no caso

bottomFov = -topFov 

e

leftFov = -rightFov

Os valores típicos são os seguintes:

<ViewVolume>
  <near>1000</near>
  <leftFov>-60</leftFov>
  <rightFov>60</rightFov>
  <bottomFov>-60</bottomFov>
  <topFov>60</topFov>
</ViewVolume>

O <shape> contendo o PhotoOverlay é posicionado em <near>, que é a distância em metros do ponto de visão (ou posição da câmera). Os quatro planos do campo de visualização são inseridos na forma. Qualquer parte da forma que esteja dentro do campo de visualização fica visível. Qualquer parte da forma que fique fora do campo de visualização é considerada "cortada" e não é exibida.

Campo de visualização de um retângulo

Para um retângulo, <topFov> deve ser inferior a 90°, e <bottomFov> deve ser superior a -90°. Se um desses limites for excedido, o plano do campo de visualização não realizará a intersecção da imagem. Os elementos <bottomFov> e <leftFov> são normalmente valores negativos.

Campo de visualização de um cilindro

Para uma imagem cilíndrica, o eixo do cilindro corresponde ao vetor superior (eixo Y) da visualização. O raio do cilindro é igual a <near>.

Para um cilindro, os intervalos do campo de visualização são os seguintes:

-90 < bottomFov < topFov < 90
-180 < leftFov < rightFov < 180 

Campo de visualização de uma esfera

Uma imagem esférica é centralizada na origem da câmera (ponto de visualização). O raio da esfera é igual a <near>. Para uma esfera, os intervalos do campo de visualização são os seguintes:

-90 < bottomFov < topFov < 90
-180 < leftFov < rightFov < 180 

Como ajustar a visualização com <rotation>

Use o elemento <rotation> como filho de <PhotoOverlay> para ajustar como a foto é posicionada dentro do campo de visualização. Esse elemento é útil se sua foto tiver sido girada e desviar um pouco da visualização horizontal desejada.

Como marcar PhotoOverlays com ícones

<PhotoOverlay> inclui um elemento <Point> que se comporta da mesma maneira que <Point> quando é usado em um elemento <Placemark>, ou seja, faz com que o Google Earth desenhe um ícone para marcar a posição do PhotoOverlay. O desenho do ícone é especificado pelos campos <styleUrl> e <StyleSelector>, assim como para <Placemark>.

Como adicionar fotos muito grandes

Para imagens muito grandes, será necessário construir uma pirâmide de imagens, que é um conjunto hierárquico de imagens, cada uma sendo uma versão com resolução cada vez menor da imagem original. Cada imagem na pirâmide é subdividida em blocos, de modo que apenas as partes na visualização precisam ser carregadas. O Google Earth calcula o ponto de visualização atual e carrega os blocos apropriados à distância do usuário a partir da imagem. À medida que o ponto de visualização se aproxima do PhotoOverlay, o Google Earth carrega blocos de resolução superior.  Uma vez que todos os pixels na imagem original não podem ser visualizados simultaneamente na tela, esse processamento prévio permite que o Google Earth alcance o máximo de desempenho, pois carrega somente as partes da imagem que estão na visualização, e somente os detalhes de pixel que podem ser discernidos pelo usuário no ponto de visualização atual.

Se a imagem for muito grande, será necessário criar uma pirâmide de imagens para ela e modificar o <href> no elemento <Icon> para incluir especificações de quais blocos carregar. As seções a seguir descrevem como criar a pirâmide de imagem e como especificar <href> para uma imagem gigapixel. 

O elemento <ImagePyramid>

O elemento <ImagePyramid> tem a seguinte sintaxe:

<ImagePyramid>
  <tileSize>256</tileSize>              <!-- int -->
  <maxWidth>...</maxWidth>              <!-- int -->
  <maxHeight>...</maxHeight>            <!-- int -->
  <gridOrigin>lowerLeft</gridOrigin>    <!-- lowerLeft or upperLeft -->
</ImagePyramid>

O tamanho de pixel da imagem original é especificado nos elementos <maxWidth> e <maxHeight>. A largura e a altura podem ter qualquer tamanho e não precisam ter uma potência de 2.  É possível preencher os pixels restantes com pixels em branco, conforme descrito em Como adicionar preenchimento à imagem.

Os blocos precisam ser quadrados e <tileSize> precisa ter uma potência de 2. Um tamanho de bloco de 256 (padrão) ou 512 é recomendado. 

Como criar a pirâmide de imagens

Essas instruções supõem que sua medição de pixel da imagem tenha uma potência de 2.  Se a medição de pixel de sua imagem não tiver uma potência de 2, será necessário primeiro adicionar o preenchimento, conforme descrito em Como adicionar preenchimento à imagem. Em seguida, execute estas etapas para criar uma pirâmide de imagens:

  1. Começando com a imagem original de tamanho total, divida-a em pedaços com tamanho de blocos, por exemplo, em blocos de 256 * 256 pixels cada.
  2. Reduza a imagem com um fator de 2.
  3. Divida essa nova imagem em quadrados com tamanho de blocos.
  4. Repita as etapas 2 e 3 até que a imagem resultante caiba no bloco (por exemplo, 256 * 256 pixels).

Como adicionar preenchimento à imagem

Se o último bloco de uma linha não for quadrado, será necessário adicionar pixels de preenchimento transparente para torná-lo quadrado. Posicione a imagem de modo que o bloco (0,0) esteja na origem. Por exemplo, se a origem estiver no lado esquerdo inferior, posicione a imagem no lado esquerdo inferior da grade de blocos. A linha e as colunas que podem precisar de preenchimento estariam à direita e sobre a imagem. Para obter uma filtragem melhor, duplique a última linha (ou coluna) na borda da imagem. Em seguida, adicione preenchimento (por exemplo, preto) aos pixels restantes nos blocos da linha (ou coluna).

Exemplo

Como exemplo, considere uma imagem cujas dimensões sejam 3600 * 2700 pixels (aproximadamente 10 megapixels). Estas são as etapas para criar uma pirâmide de imagens para essa imagem:

  1. Usando um tamanho de bloco de 256 pixels, é possível subdividir a imagem original em uma grade de 16 * 16 pixels. Essa imagem termina como nível 4 na pirâmide final.
  2. Preencha os pixels para tornar quadrados os blocos com preenchimento parcial (como descrito em Como adicionar preenchimento à imagem ) na última coluna (à direita) e na última linha (na parte superior, supondo que <gridOrigin> seja lowerLeft).
  3. Reduza a imagem com um fator de 2.
  4. Subdivida essa imagem em blocos de 256 pixels. A imagem nesse nível é composta por uma grade de 8 * 8 blocos (nível 3).
  5. Diminua a imagem de nível 3 por um fator de 2.
  6. Subdivida em blocos. A imagem nesse nível é composta por uma grade de 4 * 4 blocos (nível 2).
  7. Diminua a imagem de nível 2 por um fator de 2.
  8. Subdivida em blocos. A imagem nesse nível é composta por uma grade de 2 * 2 blocos (nível 1).
  9. Diminua a imagem de nível 1 por um fator de 2.
  10. A imagem resultante terá 256 * 256 pixels, de modo que esse seja o último nível na pirâmide de imagens (nível 0).

A pirâmide de imagens para uma imagem de 4096 * 4096 tem cinco níveis, como mostra a tabela a seguir:

Nível
Número de blocos
Tamanho da imagem (pixels)
0
1
256 * 256
1
4 (grade 2 * 2)
512 * 512
2
16 (grade 4 * 4)
1024 * 1024
3
64 (grade 8 * 8)
2048 * 2048
4
256 (grade 16 * 16)
4096 * 4096

O nível n, portanto, tem 2n blocos em cada direção.

As ilustrações a seguir mostram os níveis 0, 1 e 2 de uma pirâmide de imagens de amostra.

"" ""

Como numerar os blocos

Os blocos em cada nível são numerados de modo que o Google Earth possa buscar apenas os blocos específicos apropriados para o ponto de visualização atual. Cada bloco é identificado por três valores:

  • Valor x - posição da linha na grade
  • Valor y - posição da coluna na grade
  • level - nível na pirâmide de imagens, com 0 sendo o nível mais alto

Por padrão, a origem (0,0) está no lado inferior esquerdo da grade. Se sua imagem tiver uma origem no lado superior esquerdo, especifique topLeft para <gridOrigin>.

A figura a seguir ilustra a numeração dos blocos no nível 2 da imagem de 10 megapixels, com a origem no lado inferior esquerdo:

Como especificar o URL de uma imagem muito grande

Para imagens gigapixel, a especificação <href> no elemento <Icon> inclui entidades especiais a fim de especificar os valores level, x e y dos blocos que o Google Earth precisa buscar. Por exemplo, o URL da imagem pode ser especificado da seguinte maneira:

http://server.company.com/bigphoto/$[level]/row_$[x]_column_[$y].jpg 

Para solicitar o bloco na linha 2, coluna 1, no nível 3, o Google Earth buscaria o seguinte URL:

http://server.company.com/bigphoto/3/row_2_column_1.jpg

Transparência

Se sua imagem for totalmente opaca, use o formato JPEG. Se parte da imagem for opaca e parte for transparente, você poderá misturar blocos PNG e JPEG. Use o formato PNG somente para blocos que tenham valores de transparência. Se você precisar misturar formatos, omita a extensão de arquivo da especificação <href> do arquivo de imagem e inclua a extensão de arquivo no nome de arquivo para cada bloco.

Voltar ao início