Mapy Google - kreator ścieżek - eksportowanie do formatu KML

W poprzednim poście uzupełniliśmy edytor o możliwość usuwania punktów z linii. Tym razem zaprezentuję format KML, dość popularny w różnych produktach Google'a (m.in. Google Earth, Google Maps), jako możliwy sposób przechowywania/eksportowania danych z kreatora.

Jak przystało na produkt Google, obiekty Google Maps posiadają metody do eksportu do wymienionego formatu KML. Jednak zanim zaczniemy działać przedstawię krótko strukturę tego pliku.
Format KML jest plikiem XML zbudowanym według zaplanowanej przez Google specyfikacji. Głównym węzłem jest <kml> a zaraz za nim <Document>. W węźle Document możemy już umieszczać poszczególne elementy - jako węzły Placemark. Tutaj z kolei możemy zdefiniować nazwę, typ obiektu (linia, punkt), styl itd.
Poszczególne informacje umieszczamy w węzłach:

• <name> - nazwa
• <description> - opis
• <Style> - styl - dla różnych obiektów różne parametry stylów - przykładowe dla obiektu linii - <LineStyle> - mogą zawierać
  
  • <width> - grubość
  • <color> - kolor
• <LineString> - obiekt linii - może zawierać następujące pod węzły:
  
  • <tessellate> - w przypadku Google Earth - nakładanie ścieżki za teren
  • <altitudeMode> - ustawianie trybu interpretacji danych wysokości - dostępne wartości to:
    • clampToGround - wartość jest ignorowana
    • relativeToGround - relatywnie do podłoża - jeżeli podane wielkości są takie same, wówczas zachowywana jest ta wartość, z kolei jeśli wartości te są różne wówczas do wartości podłoża dodawana jest podana wartość
    • absolute - wysokość jest liczona od poziomu morza
  • <coordinates> - jedyny obowiązowy parametr dla linii - zawiera kolejne współrzędne punktów; współrzędne są rozdzielone przecinkami, z kolei punkty znakami białymi (spacja, znak nowej linii)

Przykładowy plik wygenerowany z kreatora map wygląda następująco:

<Placemark><Style><LineStyle><color>73ckla</color><width>5</width></LineStyle></Style><LineString><tessellate>1</tessellate><coordinates>17.035675048828125,51.1211905381999 17.056617736816406,51.12496154980921 17.066059112548828,51.11397088582873 17.023658752441406,51.111276696676136</coordinates></LineString></Placemark>

Należy do niego dodać nagłówek xml, węzeł kml oraz Document i możemy oglądać wygenerowaną ścieżkę w Google Earth.
Sposób generowania, o którym wspomniałem wcześniej jest bardzo prosty - obiekt GPolyline udostępnia metodę getKml(..), która jako parametr przyjmuję funkcję callback - która z kolei w parametrze dostaje obiekt w formacie KML.
Warto w takim razie pozostawić możliwość wygenerowania danych tekstowych oraz danych w KML-u - w związku z tym dodamy dwa pola radiobutton - jedno dla tekstu, drugie dla KML.

poly.getKml(function(kml) {
   document.getElementById('textarea').innerHTML = kml;
});

Należy zauważyć, że możemy nieco zmodyfikować funkcje obsługi zdarzeń zmiany linii. Ponieważ obie robią to samo można je wrzucić do jednej funkcji, zajmującej się tylko generowaniem danych. Dojdzie nam też zdarzenie przełączenia radiobuttona - wobec tego najlepszym (póki co) pomysłem jest zastosowanie zmiennej globalnej do zapamiętania ostatniej ścieżki i generowania danych na tej podstawie.

W ten sposób otrzymujemy funkcję getCoordsLastPoly, która sprawdza, czy radiobutton o id plainText jest zaznaczony - i jeżeli jest to generuje tekst, a jeżeli nie jest to generuje KML'a.

function getCoordsLastPoly() {
 var poly = lastPoly;
 if (document.getElementById('plainText').checked) {
    document.getElementById('textarea').innerHTML = '';
    for (var i=0; i<poly.getVertexCount(); i++) {
     var vertex = poly.getVertex(i);
     document.getElementById('textarea').innerHTML += vertex.lat()+', '+vertex.lng()+"\n";
    }
    }else 
    poly.getKml(function(kml) {document.getElementById('textarea').innerHTML = kml});
}

Funkcja draw odpowiedzialna za rysowanie została zdecydowanie skrócona:

var lastPoly;
function draw() {
 poly = new GPolyline([], 'black');
 map.addOverlay(poly);
 poly.enableDrawing({});
  
 poly.enableEditing({onEvent: "mouseover"});
 poly.disableEditing({onEvent: "mouseout"});
   
 lastPoly = poly;
 GEvent.addListener(poly, "endline", getCoordsLastPoly);
 GEvent.addListener(poly, "lineupdated", getCoordsLastPoly);
 
}

Metoda getCoordsLastPoly jest też dołączona do zdarzenia onChange dla obu radiobuttonów. Po zmianach aplikacja wygląda następująco:


Nowa linia

Tekst
KML