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>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: -9.973542, lng: -67.813611}
});
var Layer = new google.maps.KmlLayer({
url: 'http://www.monolitonimbus.iag.usp.br/poligono.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=CRIE_UMA_API_USANDO_SUA_CONTA_GOOGLE&callback=initMap">
[/script]
</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.
One comment