Criando KML com polígono

O KML (Keyhole Markup Language) é baseado no XML (Extensible Markup Language): uma linguagem de marcação que permite a organização dos dados de maneira estruturada através do uso de tags. Um arquivo nesse formato pode incluir posição e informações de locais a serem sobrepostas em um mapa (como o Google Maps).

Veja um exemplo de uma página HTML com código JavaScript para exibir um arquivo KML sobre um Google Maps, o arquivo KML em si e um shell script para criar esse KML a partir de uma lista de coordenadas.

1) Página de exibição

Segue o arquivo "teste_kml.php" contendo os códigos HTML e JavaScript para exibição do Google Maps centrado nas coordenadas indicadas e usando o arquivo KML linkado. A respeito do estilo, sempre defina a altura do mapa explicitamente para definir o tamanho do elemento div que contém o mapa. Opcionalmente, pode fazer com que a página de exemplo preencha a janela.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>Polígono KML</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=CRIE_UMA_API_USANDO_SUA_CONTA_GOOGLE&callback=initMap">
    
  </body>
</html>

Obs.: a tag "viewport" é usada para uma página responsiva. O parâmetro "initial-scale=1" garante que, após a abertura, o layout será exibido corretamente em escala 1:1 - nenhum zoom será aplicado. Veja mais no post Dica Rápida: Não Esqueça da Meta Tag de Viewport.

2) Arquivo KML

O exemplo anterior e o que segue foram retirados deste link do Google Maps API e usa linha. Segue uma versão adaptada para um polígono:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
  <Document>
    <name>Exemplo de Polígono KML</name>
    <description>Exemplo de Polígono KML</description>

    <Style id="estilo">
		<PolyStyle>
		    <color>7d00cc00</color>
		    <outline>1</outline>
		</PolyStyle>
		<LineStyle>
			<color>ff00cc00</color>
			<width>3</width>
		</LineStyle> 
    </Style>

    <Placemark>
		<name>Políogono preenchido</name>
		<description><![CDATA[Texto para descrição]]></description>
		<styleUrl>#estilo</styleUrl>
			<Polygon>
				<outerBoundaryIs>
					<LinearRing>
						<altitudeMode>relative</altitudeMode>
						<coordinates>-67.804914,-9.97183,0.0 -67.804742,-9.971006,0.0 -67.803712,-9.970224,0.0 -67.803497,-9.969654,0.0 -67.80412,-9.968787,0.0 -67.805707,-9.968659999999998,0.0 -67.806351,-9.968131999999999,0.0 -67.806931,-9.967942000000003,0.0 -67.807789,-9.967244000000003,0.0 -67.80869,-9.967223,0.0 -67.809227,-9.968026,0.0 -67.809591,-9.968534,0.0 -67.81045,-9.969062,0.0 -67.812102,-9.968999,0.0 -67.814012,-9.968089999999998,0.0 -67.815149,-9.968365000000002,0.0 -67.816286,-9.96902,0.0 -67.818046,-9.969083,0.0 -67.819548,-9.969485,0.0 -67.820878,-9.970288,0.0 -67.82223,-9.970541,0.0 -67.823646,-9.970288,0.0 -67.825599,-9.969611000000002,0.0 -67.826843,-9.969421,0.0 -67.828496,-9.969168,0.0 -67.829311,-9.968914,0.0 -67.829976,-9.969125000000002,0.0 -67.830341,-9.970140000000002,0.0 -67.830448,-9.97071,0.0 -67.831521,-9.971281,0.0 -67.831628,-9.971682999999999,0.0 -67.830813,-9.971492,0.0 -67.829611,-9.970541,0.0 -67.828882,-9.969569,0.0 -67.825406,-9.970034,0.0 -67.823367,-9.970753000000002,0.0 -67.821479,-9.970816000000001,0.0 -67.818689,-9.969654,0.0 -67.815857,-9.969315999999997,0.0 -67.814226,-9.968534,0.0 -67.812402,-9.969485000000002,0.0 -67.810771,-9.969526999999998,0.0 -67.809205,-9.968745,0.0 -67.808411,-9.967836000000002,0.0 -67.807724,-9.967794,0.0 -67.806716,-9.968597000000003,0.0 -67.805793,-9.969146000000002,0.0 -67.804441,-9.969675,0.0 -67.804785,-9.969971,0.0 -67.805471,-9.970837,0.0 -67.805686,-9.971704,0.0 -67.804914,-9.97183,0.0</coordinates>
					</LinearRing>
				</outerBoundaryIs>
			</Polygon>
    </Placemark>

  </Document>
</kml>

Além do cabeçalho (com nome e descrição), existe uma tag de estilo (para o interior do polígono e sua linha de contorno) e outra tag para o polígono em si (nome, descrição e pontos com latitude, longitude e altitude.

A respeito das cores, elas são indicadas como oito caracteres em hexadecimal em ABGR:

  • 2 dígitos para camada de transparência (Alpha): FF é 100%, 80 é 50% e 00 é 0% (veja tabela completa no post 8-digit hex codes)
  • 2 dígitos para o azul (Blue)
  • 2 dígitos para o verde (Green)
  • 2 dígitos para o vermelho (Red)

Veja esse exemplo de uma cor em RGB: 11ffcc. Agora em ABGR: ffccff11 ("ff" para cor sólida sem transparência). A palheta de cores Pegar cores hexadecimal pode ser vista no link da W3schools.

3) Shell script de criação do KML

O script "cria_kml.sh" cria o arquivo "poligono.kml", no qual serão impressas as tags necessárias. Cada arquivo contém o conjunto de um polígono, sendo o resultado final um conjunto de polígonos identificados pela numeração de cada arquivo de coordenadas.

#!/bin/bash
# Script para criar KML com coordenadas de um arquivo/lista

rm -f poligono.kml; touch poligono.kml

# Imprimir cabeçalho
echo "<?xml version='1.0' encoding='UTF-8'?>" >> poligono.kml
echo "<kml xmlns='http://earth.google.com/kml/2.1'>" >> poligono.kml
echo "	<Document>" >> poligono.kml
echo "		<name>Polígonos</name>" >> poligono.kml
echo "		<description>Polígonos</description>" >> poligono.kml
# Imprimir estilo
echo "		<Style id='estilo'>" >> poligono.kml
echo "			<PolyStyle>" >> poligono.kml
echo "				<color>7d00cc00</color>" >> poligono.kml
echo "				<outline>1</outline>" >> poligono.kml
echo "			</PolyStyle>" >> poligono.kml
echo "			<LineStyle>" >> poligono.kml
echo "				<color>ff00cc00</color>" >> poligono.kml
echo "				<width>3</width>" >> poligono.kml
echo "			</LineStyle>" >> poligono.kml
echo "		</Style>" >> poligono.kml

oldIFS=$IFS # backup do separador de campo
IFS=$'\n'   # novo separador de campo, o caractere de fim de linha
for file in `ls dados`; do
	# Identificação
	id=$(echo $file | tr -dc '0-9')
	# Imprimir Placemark
	echo "		<Placemark>" >> poligono.kml
	echo "			<name>Políogono "$id"</name>" >> poligono.kml
	echo "			<description><![CDATA[Texto para descrição]]></description>" >> poligono.kml
	echo "			<styleUrl>#estilo</styleUrl>" >> poligono.kml
	echo "			<Polygon>" >> poligono.kml
	echo "				<outerBoundaryIs>" >> poligono.kml
	echo "					<LinearRing>" >> poligono.kml
	echo "						<altitudeMode>relative</altitudeMode>" >> poligono.kml
	echo "						<coordinates>" >> poligono.kml
	# Inserir coordenadas
	for linha in $(cat 'dados/'$file); do
		# Obter latitude e longitude
		lon=$(echo $linha | awk '{print $1}')
		lat=$(echo $linha | awk '{print $2}')
		echo "						"$lon","$lat",0.0 " >> poligono.kml
	done
	echo "						</coordinates>" >> poligono.kml
	echo "					</LinearRing>" >> poligono.kml
	echo "				</outerBoundaryIs>" >> poligono.kml
	echo "			</Polygon>" >> poligono.kml
	echo "		</Placemark>" >> poligono.kml
done

# Imprimir encerramento
echo "	</Document>" >> poligono.kml
echo "</kml>" >> poligono.kml

Também é possível imprimir cada polígono em arquivos separados, fazendo algumas adaptações no código acima - basicamente, colocar tudo dentro do loop para cada arquivo que contém as coordenadas e personalizar o nome do arquivo de saída.

Veja também o outro post sobre como Adicionar uma camada KML ao Google Maps, que fala sobre SHP (shape file), Google Earth e outros truques.

Compartilhe o link desse texto, mas se for copiar algum trecho, cite a fonte. Valorize nosso trabalho.
Mais informações na licença de uso do site.

Um Pingback/Trackback