Markery/placemarki w Google Earth (KML & API)

Podobnie jak w Google Maps, Google Earth oferuje dodawanie na powierzchni Ziemi swojego własnego markera. Nazwa co prawda została zmieniona na placemark, ale główny cel obiektu pozostaje taki sam jak w Google Maps - posiada jednak kilka dodatkowych funkcji, najczęściej bezpośrednio związanych z możliwościami Earth'a. Jednocześnie markery możemy dodać zarówno z poziomu JavaScript API oraz KML.



Metody dodawania i modyfikowania placemark'ów w Google Earth:

Google Earth API (JavaScript)

Prosty placemark
Dostęp do placemark'ów (mimo wszystko wolę nazwę marker, ale dokumentacja mówi inaczej ;)) z poziomu JavaScript API opiera się o wykonywanie metod wcześniej utworzonej instancji obiektu Google Earth. Pierwszym krokiem jest utworzenie lokalizacji poprzez utworzenie obiektu KMLPoint. Następnie ustawiamy dla niego współrzędne geograficzne.
var pozycja = earth.createPoint('');
pozycja.setLatitude(51.11123);  
pozycja.setLongitude(17.05876);  
Kolejnym krokiem jest utworzenie placemark'a - poprzez metodę createPlacemark. Dla utworzonego obiektu KMLPlacemark wykonujemy metodę setGeometry, gdzie jako parametr podajemy wcześniej utworzony obiekt KMLPoint.
var placemark = earth.createPlacemark('');
placemark.setGeometry(point);
Ostatnim elementem jest dodanie utworzonego placemark'a do Google Earth. W tym celu wykonujemy komendę getFeatures().appendChild(placemark), gdzie jako parametr podajemy obiekt placemark'a.
earth.getFeatures().appendChild(placemark);
Nazwa dla placemarku
W ten oto sposób utworzyliśmy najprostszy marker na Google Earth.
Najprostszą modyfikacją jaką możemy dokonać na tym markerze to dodać mu opis. W tym celu na obiekcie placemark wykonujemy metodę setName z parametrem nazwy.
var placemark = earth.createPlacemark('');
placemark.setName('Plac Grunwaldzki');
Modyfikacja ikonki
W ten oto prosty sposób mamy do dyspozycji już nazwę. Kolejne dostosowania mogą się tyczyć samej ikonki placemark'a. Oprócz samej zmiany ikony możemy ją także skalować. Zmiana ikony polega na utworzeniu nowej ikony i ustawienia jej jako obowiązującej dla utworzonego placemark'a. Po utworzeniu obiektu adres obrazka podajemy jako parametr metody setHref obiektu ikony.
var ikona = earth.createIcon('');
ikona.setHref('http://google-maps-icons.googlecode.com/files/wind.png');
Przypisanie ikony do obiektu odbywa się na zasadzie zdefiniowania go w obiekcie styli. Na początku musimy utworzyć nowy obiekt stylu createStyle, następnie pobrać z niego kontekst ikony i ustawić w nim jako ikonę wcześniej utworzoną ikonę ikona. Na koniec ustawiamy obiekt stylu dla placemark'a setStyleSelector.
var styl = earth.createStyle('');
styl.getIconStyle().setIcon(ikona);
placemark.setStyleSelector(styl);
Zmiana rozmiaru ikonki, a dokładniej jej skali jest możliwa poprzez ustawienie właściwości scale dla kontekstu ikony w obiekcie stylu.
styl.getIconStyle().setScale(3.0);
Ostatecznie utworzenie własnego markera z własną ikonką wymaga wykonania następującego kodu JS.
var pozycja = earth.createPoint('');
pozycja.setLatitude(51.11123);  
pozycja.setLongitude(17.05876);

var placemark = earth.createPlacemark('');
placemark.setGeometry(pozycja);

var ikona = earth.createIcon('');
ikona.setHref('http://google-maps-icons.googlecode.com/files/wind.png');

var styl = earth.createStyle('');
styl.getIconStyle().setIcon(ikona);
styl.getIconStyle().setScale(3.0);
placemark.setStyleSelector(styl);

earth.getFeatures().appendChild(placemark);

KML

Prosty placemark
A jak to wygląda w KML'u? I jak w ogóle wczytać KML'a do Google Earth'a na stronie? Rozwiązaniem jest skorzystanie z JavaScript API, które załaduje KML zaraz po uruchomieniu się pluginu z Earth'em. Dokumentacja Google Earth poleca zastosowanie następującego kodu
google.earth.fetchKml(ge, href, function(kmlObject) {
      if (kmlObject)
         ge.getFeatures().appendChild(kmlObject);
});
gdzie ge to w naszym przypadku obiekt earth, a href to adres URL pliku KML. Reszta pozostaje bez zmian. Ten kod umieszczamy w funkcji initFunction (według opisu z poprzedniego postu) na jej samym końcu.

To teraz możemy przejść do budowy pliku KML. Plik KML jest pewną odmianą XML - z tą różnicą, że ma zdefiniowane dopuszczalne tagi. Definicja markera jest w pewnym sensie powiązana z tworzeniem obiektu poprzez JavaScript API (zresztą nazwy obiektów zaczynające się od KML mówią o powiązaniu z tego rodzaju plikami). Nazwy właściwości są praktycznie identyczne. Dodatkową zaletą plików KML jest możliwość ich uruchomienia w stacjonarnym Google Earth oraz możliwość zgłoszenia ich do treści Google poprzez narzędzia dla webmasterów.

Teraz wróćmy do definiowania obieku. Najprostsza definicja pojedynczego markera wygląda następująco:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
  <Point>
    <coordinates>17.05876,51.11123,0</coordinates>
  </Point>
</Placemark>
</kml>
Obiekt KMLPoint występuje tutaj jako tag <point>. Definicja współrzędnych jest nieco inna - są one ulokowane jako ciąg trzech liczb - długość geo., szerokość geo. oraz wysokość (wysokość jest opcjonalna, więc może być to ciąg dwóch liczb - tylko długości i szerokości).

Należy zaznaczyć, że kolejność podawania długości i szerokości jest odwrotna niż w przypadku np. obiektu LatLng znanego z Google Maps.

Nazwa dla placemarku
Zmiana nazwy placemark'u polega na dodaniu do węzła Placemark tagu <name>.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
  <name>Plac Grunwaldzki</name>
  <Point>
    <coordinates>17.05876,51.11123,0</coordinates>
  </Point>
</Placemark>
</kml>
Modyfikcja ikonki
Definicja własnej ikonki wymaga dodania tagu <Style> i umieszczenia w nim <IconStyle> (podobnie jak pobieranie kontekstu w JS). Z kolei w IconStyle umieszczamy <Icon>, w którym możemy zdefiniować adres URL obrazka - jako wartość tagu <href>. Właściwość skali umieszczamy w IconStyle jako wartość tagu <scale>.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
  <name>Plac Grunwaldzki</name>
  <Point>
    <coordinates>17.05876,51.11123,0</coordinates>
  </Point>
  <Style>
    <IconStyle>
      <Icon>
        <href>http://google-maps-icons.googlecode.com/files/wind.png</href>
      </Icon>
      <scale>2.0</scale>
    </IconStyle>
  </Style>
</Placemark>
</kml>
Ostateczny efekt po załadowaniu KML'a jest identyczny jak utworzenie go z poziomu JS.

Prześlij dalej:

Brak komentarzy:

Prześlij komentarz