Dokumentacja stylu interfejsu API Map Tiles

Za pomocą opcji stylu możesz dostosować wygląd standardowych Map Google. Możesz zmienić wygląd elementów takich jak drogi, parki, firmy i inne ciekawe miejsca. Oprócz zmiany wyglądu tych elementów mapy możesz też całkowicie je ukryć. Dzięki temu możesz na przykład wyróżnić określone komponenty mapy lub dopasować mapę do stylu otaczającej strony.

Przykłady

Ta deklaracja stylu JSON zmienia kolor wszystkich elementów mapy na szary, a następnie koloruje geometrię dróg głównych na niebiesko i całkowicie ukrywa etykiety krajobrazu:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Obiekt JSON

Deklaracja stylu JSON składa się z tych elementów:

• featureType (opcjonalnie) – elementy, które mają zostać wybrane do modyfikacji stylu. Elementy to cechy geograficzne na mapie, w tym drogi, parki, zbiorniki wodne itp. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy.
• elementType (opcjonalnie) – właściwość określonego elementu, która ma zostać wybrana. Elementy to podczęści elementu, w tym etykiety i geometria. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy funkcji.
• stylers – reguły, które mają zostać zastosowane do wybranych elementów. Style określają kolor, widoczność i grubość elementu. Do elementu możesz zastosować 1 lub więcej stylów.

Aby określić styl, musisz połączyć zestaw featureType i elementType selektorów oraz stylers w tablicę stylów. W jednej tablicy możesz kierować na dowolną kombinację elementów. Liczba stylów, które możesz zastosować jednocześnie, jest jednak ograniczona. Jeśli tablica stylów przekracza maksymalną liczbę znaków, nie zostanie zastosowany żaden styl.

W dalszej części tej strony znajdziesz więcej informacji o elementach i stylach.

featureType

Ten fragment kodu JSON wybiera wszystkie drogi na mapie:

{
  "featureType": "road"
}

Elementy lub typy elementów to cechy geograficzne na mapie, w tym drogi, parki, zbiorniki wodne, firmy itp.

Elementy tworzą drzewo kategorii, którego korzeniem jest all. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy. Określenie elementu all ma taki sam efekt.

Niektóre elementy zawierają elementy podrzędne, które określasz za pomocą notacji kropkowej. Na przykład landscape.natural lub road.local. Jeśli określisz tylko element nadrzędny, np. road, style określone dla elementu nadrzędnego będą stosowane do wszystkich jego elementów podrzędnych, takich jak road.local i road.highway.

Pamiętaj, że elementy nadrzędne mogą zawierać elementy, które nie są uwzględnione we wszystkich ich elementach podrzędnych.

Dostępne są te elementy:

• all (domyślnie) wybiera wszystkie elementy.
• administrative wybiera wszystkie obszary administracyjne. Stylizacja wpływa tylko na etykiety obszarów administracyjnych, a nie na granice geograficzne ani wypełnienie.
  • administrative.country wybiera kraje.
  • administrative.land_parcel wybiera działki.
  • administrative.locality wybiera miejscowości.
  • administrative.neighborhood wybiera dzielnice.
  • administrative.province wybiera województwa.
• landscape wybiera wszystkie krajobrazy.
  • landscape.man_made wybiera elementy stworzone przez człowieka, takie jak budynki i inne konstrukcje.
  • landscape.natural wybiera elementy naturalne, takie jak góry, rzeki, pustynie i lodowce.
  • landscape.natural.landcover wybiera elementy pokrycia terenu, czyli materiał fizyczny pokrywający powierzchnię ziemi, taki jak lasy, łąki, tereny podmokłe i nieużytki.
  • landscape.natural.terrain wybiera elementy terenu, takie jak wysokość, nachylenie i orientacja.
• poi wybiera wszystkie ciekawe miejsca.
  • poi.attraction wybiera atrakcje turystyczne.
  • poi.business wybiera firmy.
  • poi.government wybiera budynki rządowe.
  • poi.medical wybiera służby ratunkowe, w tym szpitale, apteki, policję, lekarzy itp.
  • poi.park wybiera parki.
  • poi.place_of_worship wybiera miejsca kultu, w tym kościoły, świątynie, meczety itp.
  • poi.school wybiera szkoły.
  • poi.sports_complex wybiera kompleksy sportowe.
• road wybiera wszystkie drogi.
  • road.arterial wybiera drogi główne.
  • road.highway wybiera autostrady.
  • road.highway.controlled_access wybiera autostrady z ograniczonym dostępem.
  • road.local wybiera drogi lokalne.
• transit wybiera wszystkie stacje i linie transportu publicznego.
  • transit.line wybiera linie transportu publicznego.
  • transit.station wybiera wszystkie stacje transportu publicznego.
  • transit.station.airport wybiera lotniska.
  • transit.station.bus wybiera przystanki autobusowe.
  • transit.station.rail wybiera stacje kolejowe.
• water wybiera zbiorniki wodne.

elementType

Ten fragment kodu JSON wybiera etykiety wszystkich dróg lokalnych:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Elementy to podziały elementu. Droga składa się na przykład z linii graficznej (z geometrii) na mapie oraz tekstu oznaczającego jej nazwę (etykiety).

Dostępne są te elementy, ale pamiętaj, że określony element może obsługiwać niektóre, wszystkie lub żadne z nich:

Kolory tekstu etykiety fill i stroke zmieniają się w zależności od poziomu powiększenia. Aby zapewnić spójność na wszystkich poziomach powiększenia, zawsze definiuj zarówno fill jak i stroke.

• all (domyślnie) wybiera wszystkie elementy określonego elementu.
• geometry wybiera wszystkie elementy geometryczne określonego elementu.
  • geometry.fill wybiera tylko wypełnienie geometrii elementu.
  • geometry.stroke wybiera tylko obrys geometrii elementu.
• labels wybiera etykiety tekstowe powiązane z określonym elementem.
  • labels.icon wybiera tylko ikonę wyświetlaną w etykiecie elementu.
  • labels.text wybiera tylko tekst etykiety.
  • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowy obrys otaczający tekst etykiety.
  • labels.text.stroke wybiera tylko obrys tekstu etykiety.

stylers

Style to opcje formatowania, które możesz stosować do elementów mapy i elementów.

Ten fragment kodu JSON wyświetla element w kolorze jasnozielonym, używając wartości RGB:

"stylers": [
  { "color": "#99FF33" }
]

Ten fragment kodu usuwa całą intensywność koloru elementu, niezależnie od jego koloru początkowego. Efektem jest renderowanie elementu w skali szarości:

"stylers": [
  { "saturation": -100 }
]

Ten fragment kodu całkowicie ukrywa element:

    "stylers": [
      { "visibility": "off" }
    ]

Obsługiwane są te opcje stylu:

• hue (ciąg szesnastkowy RGB w formacie #RRGGBB) wskazuje kolor podstawowy.

  Uwaga: ta opcja ustawia odcień, zachowując nasycenie i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor jest względny w stosunku do stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te będą miały wpływ na elementy mapy stylizowane za pomocą hue. Jeśli to możliwe, lepiej używać bezwzględnego stylu color do

• lightness (wartość zmiennoprzecinkowa od -100 i 100) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają ciemność (gdzie -100 oznacza czarny) a wartości dodatnie zwiększają jasność (gdzie +100 oznacza biały).

  Uwaga: ta opcja ustawia jasność, zachowując nasycenie i odcień określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor jest względny w stosunku do stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te będą miały wpływ na elementy mapy stylizowane za pomocą lightness. Jeśli to możliwe, lepiej używać bezwzględnego color stylu.

• saturation (wartość zmiennoprzecinkowa od -100 i 100) wskazuje procentową zmianę intensywności koloru podstawowego, która ma zostać zastosowana do elementu.

  Uwaga: ta opcja ustawia nasycenie, zachowując odcień i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor jest względny w stosunku do stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te będą miały wpływ na elementy mapy stylizowane za pomocą saturation. Jeśli to możliwe, lepiej używać bezwzględnego stylu color.

• gamma (wartość zmiennoprzecinkowa od 0.01 do 10.0, gdzie 1.0 nie stosuje korekty) wskazuje ilość korekty gamma, która ma zostać zastosowana do elementu. Korekty gamma modyfikują jasność kolorów w sposób nieliniowy, nie wpływając na wartości białe ani czarne. Korekta gamma jest zwykle używana do modyfikowania kontrastu wielu elementów. Możesz na przykład zmodyfikować gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzami elementów.

  Uwaga: ta opcja dostosowuje jasność względem domyślnego stylu Google, używając krzywej gamma. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te będą miały wpływ na elementy mapy stylizowane za pomocą gamma. Jeśli to możliwe, lepiej używać bezwzględnego color styl.

• invert_lightness (jeśli true) odwraca istniejącą jasność. Jest to przydatne na przykład do szybkiego przełączania się na ciemniejszą mapę z białym tekstem.

  Uwaga: ta opcja po prostu odwraca domyślny styl Google. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te będą miały wpływ na elementy mapy stylizowane za pomocą invert_lightness. Jeśli to możliwe, lepiej używać bezwzględnego stylu color.

• visibility (on, off, or simplified) wskazuje, czy i jak element ma być wyświetlany na mapie. Widoczność simplified usuwa niektóre funkcje stylu z elementów, których dotyczy; na przykład drogi są upraszczane do cieńszych linii bez obrysów, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
• color (ciąg szesnastkowy RGB w formacie #RRGGBB) ustawia kolor elementu.
• weight (wartość całkowita większa lub równa zero) ustawia grubość elementu w pikselach. Ustawienie dużej grubości może spowodować przycinanie w pobliżu granic kafelków.

Reguły stylu są stosowane w kolejności, w jakiej je określisz. Nie łącz wielu operacji w jedną operację stylu. Zamiast tego zdefiniuj każdą operację jako osobny wpis w tablicy stylów.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienne. Elementy, które są modyfikowane za pomocą operacji stylu, zwykle mają już istniejące style. Operacje działają na tych istniejących stylach, jeśli są obecne.

Model odcienia, nasycenia i jasności

Mapy z własnym stylem używają modelu odcienia, nasycenia i jasności (HSL) do oznaczania koloru w operacjach stylizatora. Odcień wskazuje kolor podstawowy, nasycenie wskazuje intensywność tego koloru, a jasność wskazuje względną ilość bieli lub czerni w kolorze składowym.

Korekta gamma modyfikuje jasność w przestrzeni kolorów, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Model HSL definiuje też kolor w przestrzeni współrzędnych, w której hue wskazuje orientację na kole kolorów, a nasycenie i jasność wskazują amplitudy wzdłuż różnych osi. Odcienie są mierzone w przestrzeni kolorów RGB, która jest podobna do większości przestrzeni kolorów RGB, z wyjątkiem tego, że nie ma w niej odcieni bieli i czerni.

Chociaż hue przyjmuje wartość koloru szesnastkowego HTML, używa tej wartości tylko do określenia koloru podstawowego, czyli jego orientacji na kole kolorów, a nie jego nasycenia ani jasności, które są wskazywane oddzielnie jako zmiany procentowe.

Możesz na przykład zdefiniować odcień czystej zieleni jako hue:0x00ff00 lub hue:0x000100. Oba odcienie są identyczne. Obie wartości wskazują czystą zieleń w modelu kolorów HSL.

Koło kolorów RGB

Wartości RGB hue, które składają się z równych części czerwieni, zieleni i niebieskiego , nie wskazują odcienia, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni współrzędnych HSL. Przykłady to „#000000” (czarny), „#FFFFFF” (biały), i wszystkie czyste odcienie szarości. Aby wskazać czarny, biały lub szary, musisz usunąć całe saturation (ustawić wartość na -100) i zamiast tego dostosować lightness.

Ponadto podczas modyfikowania istniejących elementów, które mają już schemat kolorów, zmiana wartości takiej jak hue nie zmienia jej istniejącego saturation ani lightness.