Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

OpenStreetMap & OpenLayers

Autor: Piotr Karpiuk o poniedziałek 20. Wrzesień 2010

Przykład działania OpenLayers

Przykład działania OpenLayers

Od dawna można już osadzić interaktywną mapkę na stronie WWW – nic w tym nadzwyczajnego. Jest jednak kilka aspektów typowego podejścia: potrzebny jest dostęp do Internetu, własna domena i konto w Google, pojawiają się ograniczenia licencyjne. Powiedzmy że chcemy mieć interaktywną mapę Polski offline w wewnętrznym intranecie (a może w telefonie?), z możliwością nanoszenia na nią znaczników, rysowania linii itp.

Zaprezentuję rozwiązanie które po stronie serwera wymaga jedynie prostego serwera WWW udostępniającego statyczne pliki. Po pierwsze trzeba skądś ściągnąć dane do mapy. Na szczęście Google nie jest jedynym możliwym źródłem. Np. javowy program JTileDownloader pozwala ściągnąć mapę dowolnego prostokątnego obszaru Ziemi w postaci kafelków 256×256 pikseli z opensource’owego projektu OpenStreetMap. W formatce podajemy współrzędne geograficzne prostokąta, wybrane skale (np. od 6 do 16) i rodzaj mapy (np. Mapnik), po czym naciskamy przycisk „Download Tiles” i czekamy (być może długo) na ściągnięcie kafelków (kilkanaście GB).

JavaScriptowa biblioteka OpenLayers pozwala na umieszczenie w dowolnym tagu HTMLa mapy, obsługuje jej interakcję z użytkownikiem (w szczególności zoom i przewijanie za pomocą myszki i klawiatury) oraz ściąganie kafelków z serwera WWW.

Przykład zastosowania OpenLayers wykorzystujący większość aspektów o których mowa niżej.

OpenLayers

Mapa jest bytem abstrakcyjnym – kontenerem dla warstw i konfiguracji takiej jak przyjęty układ współrzędnych, jednostka miary czy współrzędne geograficzne pokazywanego prostokątnego wycinka Ziemi. Pierwsza warstwa mapy (ang. base layer) to zwykle warstwa rastrowa pokazująca kafelki – kwadratowe obrazki PNG. Wbrew pozorom źródeł takich kafelków (i tym samym rodzajów warstw bazowych) może być wiele, oprócz Google Maps również np. Web Map Service, Web Feature Service, OpenStreetMap, Virtual Earth (Microsoft), Yahoo! Maps, MapGuide (Autodesk) czy World Wind (NASA). Na warstwy bazowe można nakładać dowolną liczbę przezroczystych warstw zwanych nakładkami (ang. overlays) prezentujących interesujące punkty na mapie, linie itp. Warstwa może być znacznikowa (ang. marker layer, znaczniki są implementowane przez ikonki osadzane w drzewie DOM strony WWW) lub wektorowa (ang. vector layer, jej obiekty są implementowane za pomocą SVG, VML lub Canvas). Obiektem warstwy wektorowej (ang. feture) może być punkt (reprezentowany przez kółko), linia, wielokąt (w tym wypełniony) ale także seria punktów, linia łamana, zbiór wielokątów.

Obiekty na warstwie mogą być zaznaczane przez użytkownika myszką. UWAGA: tylko na jednej warstwie wektorowej w danej chwili mogą się znajdować obiekty do zaznaczania (tej na której ostatnio wywołano metodę activate), z kolei na każdym obiekcie warstwy znacznikowej z osobna można zarejestrować dowolne zdarzenie JavaScript (np. mousedown).

Sposób wyświetlania obiektu jest określony poprzez styl przypisany do obiektu lub warstwy (wtedy chodzi o domyślny styl obiektów warstwy).
Na styl składają się takie aspekty jak:

  • szerokość pędzla,
  • kolor i stopień przezroczystości pędzla i wypełnienia,
  • promień (dla punktów),
  • wygląd kursora myszki nad obiektem,
  • ikonka, jej przezroczystość, rozmiary, obrót i wycentrowanie.

Obiekt może zmieniać swoją reprezentację na mapie w zależności od tego czy jest wyselekcjonowany, jak również w zależności od wartości swoich atrybutów.

Oprócz warstw, mamy również kontrolki (ang. controls) które wpływają na stan mapy i/lub wyświetlają dodatkowe informacje dla użytkownika (ich wygląd da się konfigurować stylami CSS).
Ciekawsze kontrolki to:

  • Panel – zbiór przycisków,
  • Attribution – z każdą warstwą można skojarzyć napis pokazywany zwykle w prawym dolnym rogu mapy,
  • EditingToolbar – wyspecjalizowany panel zawierający przyciski pozwalające użytkownikowi nawigować po mapie, stawiać punkty oraz rysować linie i wielokąty,
  • KeyboardDefaults – włącza nawigację po mapie za pomocą klawiatury (klawisze strzałek, Home/End, Pg Up/Down itp.)
  • LayerSwitcher – ikonka plusa zwykle w prawym górnym rogu pozwalająca po kliknięciu włączać/wyłączać nakładki i wybierać warstwę bazową spośród zaproponowanych,
  • Measure – pozwala mierzyć (np. w km) długość narysowanej przez użytkownika trasy oraz powierzchnię narysowanego wielokąta (np. w km2),
  • ModifyFeature – pozwala użytkownikowi modyfikować obiekty warstwy wektorowej (przesuwać, tworzyć nowe i usuwać wierzchołki ścieżki, zmieniać rozmiar i obracać figury),
  • MousePosition – wyświetla w prawym dolnym rogu współrzędne geograficzne punktu mapy wskazywanego przez kursor myszki,
  • NavigationHistory – zapamiętuje kroki nawigacji i pozwala przywracać poprzedni/następny stan (przyciski Previous i Next),
  • ScaleLine – pokazuje podziałkę mapy w lewym dolnym rogu.
Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

1 Komentarz do “OpenStreetMap & OpenLayers”

  1. Przemek napisał(a):

    „Przykład działania OpenLayers” – link na obrazku powinien prowadzić do dużej wersji screena – ale sama miniaturka powinna być obrazkiem zmniejszonym, a nie przeskalowanym. 🙂 Sam artykuł fajny, chociaż brakuje trochę opisów waszych ‚przygód’/doświadczeń z OL.

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>