Opis stylu dla pakietu SDK Map Google na iOS

Wybierz platformę: Android iOS JavaScript

Opcje stylu pozwalają dostosować sposób wyświetlania standardowych stylów mapy Google, zmieniając sposób wyświetlania obiektów, takich jak drogi, parki, firmy i inne ciekawe miejsca. Oprócz zmiany stylu tych funkcji możesz też całkowicie je ukryć. Oznacza to, że możesz wyróżnić określone komponenty mapy lub dopasować ją do stylu otaczającej strony.

Jeśli chcesz łatwo zmienić ten sam styl w wielu aplikacjach, sprawdź opcje dostosowania chmury dostępne w konsoli Google Cloud. Aby użyć dostosowania do chmury, musisz utworzyć i dodać identyfikator mapy. Nie zalecamy, aby w tej samej aplikacji nie mieszać funkcji dostosowywania do chmury i stylu zakodowanego na stałe, aby uniknąć potencjalnych konfliktów.

Przykłady

Poniższa deklaracja stylu JSON zmienia kolor wszystkich obiektów na mapie na szarą, kolor geometrii drogi art. 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) – funkcje do wyboru dla tej modyfikacji stylu. Obiekty to obiekty geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne i inne. Jeśli nie określisz cechy, zostaną wybrane wszystkie obiekty.
• elementType (opcjonalny) – właściwość określonej cechy do wyboru. Elementy to części obiektu, w tym etykiety i geometria. Jeśli nie określisz elementu, zostaną wybrane wszystkie jego elementy.
• stylers – reguły, które mają być stosowane do wybranych funkcji i elementów. Style pozwalają określić kolor, widoczność i wagę obiektu. Do funkcji możesz zastosować jeden lub więcej stylów.

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

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

featureType

Ten fragment kodu JSON powoduje zaznaczenie wszystkich dróg na mapie:

{
  "featureType": "road"
}

Obiekty lub typy obiektów to obiekty geograficzne, takie jak drogi, parki, zbiorniki wodne czy firmy.

Cechy tworzą drzewo kategorii, którego poziomem głównym jest all. Jeśli nie określisz obiektu, zostaną wybrane wszystkie obiekty. Ten sam efekt uzyskasz, jeśli określisz funkcję all.

Niektóre funkcje zawierają funkcje podrzędne określane za pomocą notacji punktowej. Na przykład: landscape.natural lub road.local. Jeśli określisz tylko funkcję nadrzędną, np. road, style określone dla funkcji nadrzędnej zostaną zastosowane do wszystkich jej elementów podrzędnych, np. road.local i road.highway.

Pamiętaj, że funkcje nadrzędne mogą zawierać pewne elementy, które nie są dostępne we wszystkich funkcjach podrzędnych.

Dostępne są te funkcje:

• all (domyślnie) – wybiera wszystkie funkcje.
• administrative zaznacza wszystkie obszary administracyjne. Styl ma wpływ 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 prowincje.
• landscape wybiera wszystkie poziomy.
  • landscape.man_made wybiera obiekty utworzone przez człowieka, takie jak budynki i inne obiekty.
  • landscape.natural wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.
  • landscape.natural.landcover wybiera elementy obejmujące powierzchnię ziemi, czyli materiały fizyczne pokryte powierzchnią Ziemi, takie jak lasy, łąki, mokradła i odgórne tereny.
  • landscape.natural.terrain wybiera elementy terenu, np. wysokość, nachylenie i orientację.
• poi zaznacza wszystkie ciekawe miejsca.
  • poi.attraction wybiera atrakcje turystyczne.
  • poi.business wybiera firmy.
  • poi.government wybiera budynki administracji publicznej.
  • poi.medical wybiera służby ratunkowe, w tym szpitale, apteki, policję, lekarzy i inne podmioty.
  • poi.park wybiera parki.
  • poi.place_of_worship wybiera miejsca kultu, w tym kościoły, świątynie, meczety i inne miejsca.
  • poi.school wybiera szkoły.
  • poi.sports_complex wybiera kompleksy sportowe.
• road zaznacza wszystkie drogi.
  • road.arterial wybiera drogi główne.
  • road.highway wybiera autostrady.
  • road.highway.controlled_access wybiera autostrady o kontrolowanym dostępie.
  • 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 powoduje wybranie etykiet wszystkich dróg lokalnych:

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

Elementy to podgrupy cech. Na przykład droga składa się z linii graficznej (geometrii) na mapie oraz tekstu wskazującego jej nazwę (etykietę).

Dostępne są podane niżej elementy. Pamiętaj jednak, że konkretna funkcja może obsługiwać żaden z elementów, niektóre lub wszystkie:

• all (domyślnie) – wybiera wszystkie elementy określonej cechy.
• geometry wybiera wszystkie elementy geometryczne określonego obiektu.
  • geometry.fill wybiera tylko wypełnienie geometrii obiektu.
  • geometry.stroke wybiera tylko obramowanie geometrii obiektu.
• labels wybiera etykiety tekstowe powiązane z określoną funkcją.
  • labels.icon wybiera tylko ikonę wyświetlaną w etykiecie obiektu.
  • labels.text zaznacza tylko tekst etykiety.
  • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowy kontur otaczający tekst etykiety.
  • labels.text.stroke wybiera tylko obramowanie tekstu etykiety.

stylers

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

Ten fragment kodu JSON pozwala wyświetlić funkcję w kolorze jasnozielonym z użyciem wartości RGB:

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

Ten fragment kodu usuwa całą intensywność z koloru obiektu niezależnie od jego koloru początkowego. Efektem jest wyrenderowanie skali szarości:

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

Ten fragment całkowicie ukrywa daną funkcję:

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

Obsługiwane są te opcje stylu:

• hue (szesnastkowy kod RGB w formacie #RRGGBB) wskazuje kolor podstawowy.

  Uwaga: ta opcja ustawia odcień z zachowaniem nasycenia i jasności określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem hue. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• lightness (wartość zmiennoprzecinkowa z przedziału od -100 do 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 stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem lightness. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• saturation (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę intensywności koloru podstawowego, która jest stosowana do elementu.

  Uwaga: ta opcja ustawia nasycenie, zachowując odcień i jasność określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem saturation. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• gamma (wartość zmiennoprzecinkowa między 0.01 a 10.0, przy czym 1.0 nie wprowadza korekty) wskazuje stopień korekty gamma zastosowanej do elementu. Korekcja gamma zmienia jasność kolorów w sposób nieliniowy, nie wpływając na wartości bieli ani czerni. Korekcja gamma jest zwykle używana do zmiany kontrastu wielu elementów. Możesz na przykład zmodyfikować wartość gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzami elementów.

  Uwaga: ta opcja dostosowuje jasność w odniesieniu do domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem gamma. W miarę możliwości najlepiej jest używać stylu bezwzględnego color.

• invert_lightness (jeśli true) odwraca jasność. Jest to przydatne, gdy na przykład chcesz szybko przełączyć się na ciemniejszą mapę z białym tekstem.

  Uwaga: ta opcja po prostu odwraca domyślny styl Google. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem invert_lightness. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• visibility (on, off lub simplified) wskazuje, czy i w jaki sposób element wyświetla się na mapie. Widoczność simplified powoduje usunięcie niektórych obiektów stylu z obiektów, których dotyczy problem. Na przykład drogi są upraszczane do postaci cieńszych linii bez kontur, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
• color (szesnastkowy kod RGB w formacie #RRGGBB) ustawia kolor obiektu.
• weight (wartość całkowita większa lub równa 0) ustawia wagę obiektu w pikselach. Ustawienie wagi na dużą wartość może spowodować przycinanie kafelków w pobliżu obramowań.

Reguły stylu są stosowane w określonej kolejności. Nie używaj wielu operacji w jednej operacji stylu. Zamiast tego każdą operację należy zdefiniować jako osobny wpis w tablicy stylów.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienne. Funkcje lub elementy modyfikowane za pomocą operacji stylów (zwykle) mają już istniejące style. Operacje będą działać na istniejących stylach, jeśli są dostępne.

Model barwy, nasycenia i jasności

Uwaga: efekt ustawień barwy, nasycenia, jasności i gamma zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy z tymi opcjami. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

Mapy ze stylem korzystają z modelu odcień, nasycenia i jasności (HSL) do określania koloru w operacjach stylizowania. Barwa wskazuje kolor podstawowy, nasycenie wskazuje intensywność danego koloru, a jasność wskazuje względną ilość bieli lub czerni w danym kolorze.

Korekta gamma modyfikuje jasność przestrzeni kolorów, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Dodatkowo model HSL definiuje kolor w przestrzeni współrzędnych, gdzie hue wskazuje orientację w koło kolorów, a nasycenie i jasność wskazują amplitudę 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 tą różnicą, że brakuje odcieni bieli i czerni.

hue pobiera szesnastkową wartość koloru HTML, ale używa jej tylko do określenia koloru podstawowego, czyli jego orientacji wokół koła kolorów, a nie nasycenia czy jasności, które są podawane osobno jako zmiany procentowe.

Na przykład odcień zielonego koloru możesz zdefiniować za pomocą wartości hue:0x00ff00 lub hue:0x000100. Oba kolory są identyczne. Obie wartości wskazują czystą zieleń w modelu kolorów HSL.

Koło kolorów RGB

Wartości hue RGB, które składają się z równych częściach: czerwonego, zielonego i niebieskiego, nie wskazują barwy, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni HSL. Przykłady to „#000000” (czarny), „#FFFFFF” (biały) i wszystkie odcienie szarości. Aby wybrać czarny, biały lub szary, usuń wszystkie pola saturation (ustaw wartość na -100) i dostosuj właściwość lightness.

Poza tym w przypadku modyfikowania istniejących funkcji, które mają już schemat kolorów, zmiana wartości takiej jak hue nie spowoduje zmiany wartości saturation ani lightness.