Opis stylu dla pakietu SDK Map Google na iOS

Wybierz platformę: Android iOS JavaScript

Dzięki opcjom stylu możesz dostosować prezentację standardowych stylów map Google, zmieniając wygląd elementów takich jak drogi, parki, firmy i inne ciekawe miejsca. Oprócz zmiany stylu tych elementów możesz je całkowicie ukryć. Oznacza to, że możesz wyróżnić określone elementy mapy lub dopasować mapę do stylu otaczającej ją strony.

Jeśli chcesz zaktualizować ten sam styl w wielu aplikacjach, zapoznaj się z dostosowywaniem w chmurze, które jest dostępne w konsoli Google Cloud i wymaga identyfikatora mapy. Aby uniknąć potencjalnych konfliktów, nie łącz dostosowywania w chmurze i kodowania na stałe w tej samej aplikacji.

Aby uzyskać bardziej kompleksowe możliwości definiowania stylów, możesz użyć definiowania stylów JSON z definiowaniem stylów map w Google Cloud, które oferuje obszerniejszą listę funkcji mapy i większe możliwości dostosowywania. Schemat JSON definiowania stylów map w Google Cloud nie jest zgodny wstecznie z deklaracjami stylów JSON umieszczonymi w kodzie. Oznacza to, że pliku JSON definiowania stylów map w Google Cloud nie można używać bezpośrednio w pakiecie Maps SDK na iOS. Możesz jednak zaimportować osadzone deklaracje stylu JSON do schematu JSON definiowania stylów map w Google Cloud.

Przykłady

Poniższa deklaracja stylu JSON zmienia wszystkie elementy mapy na szare, 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 (opcjonalny) – elementy, które mają zostać wybrane do tej modyfikacji stylu. Elementy to obiekty geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne itp. Jeśli nie określisz funkcji, zostaną wybrane wszystkie funkcje.
• elementType (opcjonalny) – właściwość określonego elementu, który ma zostać wybrany. Elementy to części składowe obiektu, w tym etykiety i geometria. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy funkcji.
• stylers – reguły, które mają być stosowane do wybranych obiektów i elementów. Style określają kolor, widoczność i grubość elementu. Do elementu możesz zastosować co najmniej 1 stylizator.

Aby określić styl, musisz połączyć zestaw selektorów featureType i elementType oraz stylers w tablicę stylów. Możesz kierować reklamy na dowolną kombinację funkcji w jednej tablicy. Liczba stylów, które można 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 obiektach, 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, takie jak drogi, parki, zbiorniki wodne, firmy i inne.

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

Niektóre funkcje zawierają funkcje podrzędne, które określa się 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 funkcje nadrzędne mogą zawierać pewne elementy, które nie są uwzględnione we wszystkich funkcjach podrzędnych.

Dostępne są te funkcje:

• all (domyślna) wybiera wszystkie funkcje.
• administrative wybiera wszystkie regiony. Stylizacja wpływa tylko na etykiety regionów, 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 – zaznaczanie wszystkich krajobrazów.
  • landscape.man_made wybiera obiekty 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 fizyczne materiały pokrywające powierzchnię Ziemi, takie jak lasy, łąki, mokradła i nieużytki.
  • landscape.natural.terrain wybiera cechy terenu powierzchni lądowej, 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 i inne.
  • poi.park wybiera parki.
  • poi.place_of_worship wybiera miejsca kultu, w tym kościoły, świątynie, meczety i inne.
  • 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 z kontrolowanym 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 funkcji. Na przykład droga składa się z linii graficznej (geometrii) na mapie oraz tekstu oznaczającego jej nazwę (etykiety).

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

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

• all (domyślna) wybiera wszystkie elementy określonej funkcji.
• geometry wybiera wszystkie elementy geometryczne określonej cechy.
  • geometry.fill wybiera tylko wypełnienie geometrii elementu.
  • geometry.stroke wybiera tylko obrys geometrii elementu.
• labels wybiera etykiety tekstowe powiązane z określoną cechą.
  • labels.icon wybiera tylko ikonę wyświetlaną na etykiecie funkcji.
  • labels.text zaznacza tylko tekst etykiety.
  • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowe obramowanie otaczające tekst etykiety.
  • labels.text.stroke wybiera tylko obrys tekstu etykiety.

stylers

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

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. W efekcie funkcja jest renderowana w trybie szarości:

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

Ten fragment kodu całkowicie ukrywa funkcję:

    "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 zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy stylizowane za pomocą hue. Jeśli to możliwe, lepiej użyć stylera bezwzględnego color.

• lightness (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają ciemność (gdzie -100 oznacza czerń), a wartości dodatnie zwiększają jasność (gdzie +100 oznacza biel).

  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 zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy stylizowane za pomocą lightness. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• saturation (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę intensywności koloru podstawowego, który ma zostać zastosowany 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 zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy stylizowane za pomocą saturation. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• gamma (wartość zmiennoprzecinkowa z zakresu od 0.01 do 10.0, gdzie 1.0 oznacza brak korekty) wskazuje wartość korekcji 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 bieli ani czerni. Korekcja gamma jest zwykle używana do modyfikowania kontrastu wielu elementów. Możesz na przykład zmodyfikować gammę, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzem elementów.

  Uwaga: ta opcja dostosowuje jasność względem domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy, które mają styl gamma. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• invert_lightness (jeśli true) odwraca istniejącą jasność. Jest to przydatne, gdy chcesz na przykład 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 jakiekolwiek zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy, które mają styl invert_lightness. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• visibility (on, off lub simplified) wskazuje, czy i jak element pojawia się na mapie. Widoczność simplified usuwa niektóre funkcje stylu z obiektów, których dotyczy. Na przykład drogi są upraszczane do cieńszych linii bez konturów, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
• color (ciąg szesnastkowy RGB w formacie #RRGGBB) ustawia kolor elementu.
• weight (liczba całkowita większa lub równa 0) określa wagę elementu w pikselach. Ustawienie dużej wartości może spowodować przycinanie w pobliżu krawędzi kafelka.

Reguły stylu są stosowane w określonej przez Ciebie kolejności. 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. Funkcje lub elementy, które są modyfikowane za pomocą operacji na stylach, (zwykle) mają już istniejące style. Operacje są wykonywane na tych istniejących stylach, jeśli są obecne.

Model barwy, nasycenia i jasności

Uwaga: efekt ustawień odcienia, nasycenia, jasności i gammy zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w podstawowym stylu mapy, wpłyną one na funkcje mapy, które zostały dostosowane za pomocą tych opcji. Jeśli to możliwe, lepiej użyć stylu bezwzględnego color.

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

Korekcja gamma modyfikuje jasność w przestrzeni barw, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Dodatkowo model HSL definiuje kolor w przestrzeni współrzędnych, gdzie hue wskazuje orientację w obrębie koła kolorów, a nasycenie i jasność wskazują amplitudy wzdłuż różnych osi. Odcienie są mierzone w przestrzeni barw RGB, która jest podobna do większości przestrzeni barw RGB, z tą różnicą, że nie ma w niej odcieni bieli i czerni.

Chociaż hue przyjmuje wartość szesnastkowego kodu koloru HTML, używa jej tylko do określenia koloru podstawowego, czyli jego położenia na kole kolorów, a nie nasycenia czy jasności, które są wskazywane osobno 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: „#000000” (czarny), „#FFFFFF” (biały) i wszystkie czyste odcienie szarości. Aby wskazać kolor czarny, biały lub szary, musisz usunąć wszystkie saturation (ustaw wartość na -100) i zamiast tego dostosować lightness.

Dodatkowo podczas modyfikowania istniejących funkcji, które mają już schemat kolorów, zmiana wartości takiej jak hue nie powoduje zmiany istniejącego saturation ani lightness.