Google Maps API umożliwia dodawanie trzech rodzajów graficznych elementów do mapy:
- lini (łamanych),
- wielokątów,
- obiektów graficznych.
Do powyższej listy można zaliczyć jeszcze markery i okna informacyjne, ale ponieważ są one czymś więcej niż tylko graficznymi elementami mapy zostały omówione w oddzielnych wpisach.
Spis treści
Aplikacja
Poniżej zamieszczam link do aplikacji, która może okazać się pomocna podczas wyznaczania współrzędnych geograficznych punktów na mapie. Dostęp do źródła można uzyskać poprzez kliknięcie prawym przyciskiem myszy w obszar aplikacji i wybranie opcji “View Source” z menu kontekstowego.
Rysowanie linii (łamanych)
Linię rysuje się za pomocą klasy Polyline, której konstruktor przyjmuje dwa parametry: tablicę współrzędnych geograficznych zawierającą wszystkie punkty, przez które będzie przechodzić linia oraz opcjonalny parametr będący obiektem klasy PolylineOptions definiujący właściwości rysowanej linii.
Za pomocą klasy PolylineOptions możemy zdefiniować dwa parametry rysowania linii:
- geodesic: Określa czy podczas rysowania linii zostanie uwzględniona krzywizna kuli ziemskiej. Dla wartości true tego parametru kolejne punkty zostaną połączone za pomocą najkrótszej linii biegnącej po powierzchni Ziemi, w przeciwnym razie będzie to najkrótsza linia biegnąca po płaszczyźnie mapy. Domyślna wartość tego parametru to false.
Obie linie na powyższym rysunku łączą te same punkty. Różnice w kształcie wynikają z tego, że parametr geodesic czerwonej linii jest ustawiony na true a niebieskiej na false. - strokeStyle: Określa takie parametry linii jak: kolor, grubość i przeźroczystość. Kolor linii powinien zostać podany w formie szesnastkowej (np. 0xff0000). Domyślne parametry linii to: kolor: 0x0000ff, grubość: 5, przeźroczystość: 0.45.
Przykład:
new LatLng(51.24, 22.56),
new LatLng(40.70, -74.02)],
new PolylineOptions({
geodesic: true,
strokeStyle: new StrokeStyle({
color: 0xff0000,
thickness: 4,
alpha: 0.7})
})
);
Żeby linia pojawiła się na mapie należy dodać ją do warstw mapy za pomocą metody addOverlay:
W przypadku rysowania złożonych kształtów zaleca się kodowanie współrzędnych punktów tworzących linię za pomocą specjalnego algorytmu. Nie planuję o tym pisać dlatego zainteresowanych odsyłam do źródeł. Więcej o tworzeniu linii składających się z zakodowanych punktów można przeczytać tu a o samym algorytmie kodowaniu tu.
Rysowanie wielokątów
Wielokąt rysuje się za pomocą klasy Polygon, której konstruktor przyjmuje dwa parametry: tablicę współrzędnych geograficznych zawierającą wszystkie wierzchołki wielokąta oraz opcjonalny parametr będący obiektem klasy PolygonOptions definiujący właściwości rysowanego wielokąta.
Przykładowy wielokąt narysowany na mapie:
Zaleca się zamykanie wielokątów poprzez podawanie ostatniego punktu równego pierwszemu. Teoretycznie niezastosowanie się do tej reguły może powodować niepożądane efekty, jednak z moich kilku szybkich testów wynika, że wielokąty rysują się tak samo, niezależnie od tego czy ostatni wierzchołek pokrywa się z pierwszym czy nie.
Za pomocą klasy PolygonOptions możemy zdefiniować trzy parametry rysowania wielokątów:
- fillStyle: Określa kolor i przeźroczystość wypełnienia wielokąta. Domyślne wartości wypełnienia to: kolor: 0x0055ff, przeźroczystość: 0.25.
- strokeStyle: Określa kolor, grubość i przeźroczystość obrysowania wielokąta. Domyślne wartości obrysowania to: kolor: 0x0000ff, grubość: 2, przeźroczystość: 0.45.
- tooltip: Informacja tekstowa wyświetlana po najechaniu kursorem myszy na wielokąt.
Przykład:
new LatLng(51.24, 22.56),
new LatLng(52.23, 21.01),
new LatLng(51.76, 19.45),
new LatLng(51.24, 22.56)],
new PolygonOptions({
strokeStyle: new StrokeStyle({
color: 0xff0000,
thickness: 3,
alpha: 1}),
fillStyle: new FillStyle({
color: 0x00ff00,
alpha: 0.5}),
tooltip: "Ten wielokąt ma czerwone obrysowanie.",
})
);
Żeby wielokąt pojawił się na mapie należy dodać go do warstw mapy za pomocą metody addOverlay:
Wstawianie obiektów graficznych
Obiekt graficzny wstawia się za pomocą klasy GroundOverlay , której konstruktor przyjmuje trzy parametry: referencję do obiektu graficznego typu DisplayObject, współrzędne obszaru, na którym grafika zostanie wyświetlona oraz opcjonalny parametr będący obiektem klasy GroundOverlayOptions definiujący różne cechy wstawianej grafiki.
Przykładowy obiekt graficzny wstawiony na mapę:
Za pomocą klasy GroundOverlayOptions możemy zdefiniować pięć parametrów:
- applyProjection: Wartość logiczna określająca czy dany obiekt graficzny wymaga rzutowania. W przypadku ustawienia wartości true obiekt graficzny zostanie poddany rzutowaniu podczas renderowania jego warstwy (overlay), w przeciwnym razie zostanie założone, że obiekt został już poddany rzutowaniu. Domyślna wartość tego parametru to false.
- renderContent: Wartość logiczna określajaca czy dany obiekt graficzny będzie renderowany na mapie czy też wyświetlany na niej w zwyczajny sposób z zastosowaniem odpowiednich przekształceń geometrycznych. Domyślanie renderContent posiada wartość true. W przypadku zmiany wartości na false parametr applyProjection zostanie zignorowany, obiekt graficzny nie będzie poddawany wygładzaniu oraz straci wsparcie 3D.
Fragment obiektu graficznego z wygładzaniem i bez wygładzania:
- rotation: Określa obrót obiektu graficznego podany w stopniach i wykonany zgodnie z ruchem wskazówek zegara. Sposób jaki obrót zostanie wykonany zależy od wartości parametru applyProjection. Jeżeli jego wartość to false wtedy zostanie uznane, że obiekt graficzny został już poddany rzutowaniu i wykonany zostanie obórt. W przeciwnym razie obiekt graficzny zostanie poddany rzutowaniu na powierzchnię sfery i dopiero wtedy obrócony czego konsekwencją będzie zniekształcenie obiektu graficznego zgodnie z krzywizną sfery.
Obrót obiektu graficznego o 180 stopni względem jego środka przy różnych wartościach parametru applyProjection:
- rotationContentCenter: Współrzędne punktu, wokół którego obiekt graficzny będzie obracany. Domyślnie obrót nastąpi wokół środka obiektu graficznego.
- strokeStyle: Określa obrysowanie obiektu graficznego. Korzystanie z tego parametru wygląda tak samo jak w przypadku linii i wielokątów. Obrysowanie zadziałało u mnie dopiero po ustawieniu parametru renderContent na false, trudno powiedzieć dlaczego – w dokumentacji nie ma mowy o istnieniu takiej zależności.
Przykład:
new ShipIcon() as DisplayObject,
new LatLngBounds(new LatLng(54.48,18.64), new LatLng(54.53,18.88)),
new GroundOverlayOptions({
strokeStyle: {
color: 0xff0000,
alpha: 1,
thickness: 3
},
rotation: 180,
rotationContentCenter: new Point(100,100),
applyProjection: true,
renderContent: false
})
);
Gdzie ShipIcon jest ikoną statku wkompilowaną w aplikację.
Żeby obiekt graficzny pojawił się na mapie należy dodać go do warstw mapy za pomocą metody addOverlay:
