Informacje o stylu w pakiecie Maps SDK na iOS

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

Za pomocą opcji stylów możesz dostosować wygląd standardowych stylów Map Google, zmieniając wizualizację funkcji takich jak drogi, parki, firmy i inne ciekawe miejsca. Oprócz zmiany stylu tych funkcji możesz też całkowicie ukryć funkcje. Oznacza to, że możesz wyróżnić określone elementy mapy lub dostosować ją do stylu otaczającej ją strony.

Przykłady

Ta deklaracja stylu JSON zmienia kolor wszystkich cech mapy na szary, a następnie kolor geometrycznej drogi artystycznej na niebiesko oraz całkowicie ukrywa etykiety poziome:

[
  {
    "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 takich elementów:

  • featureType (opcjonalny) – funkcje do wyboru w przypadku danej modyfikacji stylu. Obiekty te to cechy geograficzne, takie jak drogi, parki i zbiorniki wodne. Jeśli nie określisz funkcji, zostaną wybrane wszystkie funkcje.
  • elementType (opcjonalnie) – właściwość wybranej funkcji do wyboru. Elementy są częściami elementu, w tym etykietami i geometrią. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy cechy.
  • styles – reguły, które mają być stosowane do wybranych funkcji i elementów. Style to kolor, widoczność i waga obiektu. Do cechy 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ę stylu. W ramach jednej tablicy możesz kierować reklamy na dowolną kombinację funkcji. Liczba stylów, które możesz zastosować jednocześnie, jest ograniczona. Jeśli tablica stylu przekracza maksymalną liczbę znaków, styl nie jest stosowany.

Pozostała część strony zawiera więcej informacji o funkcjach, elementach i stylach.

featureType

Ten fragment kodu JSON zaznacza wszystkie drogi na mapie:

{
  "featureType": "road"
}

Obiekty lub typy obiektów to cechy geograficzne, takie jak drogi, parki, akweny wodne, firmy i inne.

Funkcje te tworzą drzewo kategorii, a katalog główny to all. Jeśli nie określisz funkcji, zostaną wybrane wszystkie funkcje. Wskazanie funkcji all daje taki sam efekt.

Niektóre funkcje zawierają funkcje podrzędne, które podajesz w notacji kropkowej. na przykład landscape.natural lub road.local. Jeśli określisz tylko funkcję nadrzędną, np. road, style określone dla elementu nadrzędnego będą stosowane do wszystkich elementów podrzędnych, takich jak road.local i road.highway.

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

Dostępne są te funkcje:

  • all (domyślnie) – wybiera wszystkie funkcje.
  • administrative zaznacza wszystkie obszary administracyjne. Styl wpływa tylko na etykiety obszarów administracyjnych, ale 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 krajobrazy.
    • landscape.man_made wybiera funkcje utworzone przez człowieka, takie jak budynki i inne budynki.
    • landscape.natural wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.
    • landscape.natural.landcover wybiera cechy terenu, czyli fizyczne materiały zasłaniające powierzchnię Ziemi, takie jak lasy, łąki i tereny podmokłe.
    • landscape.natural.terrain wybiera cechy terenu, takie jak wysokość, nachylenie i orientacja.
  • poi zaznacza 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, m.in. szpitale, apteki, policję i lekarze.
    • 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 zaznacza wszystkie drogi.
    • road.arterial wybiera drogi artystyczne.
    • road.highway wybiera autostrady.
    • road.highway.controlled_access wybiera autostrady z kontrolowanym dostępem.
    • road.local wybiera drogi lokalne.
  • transit zaznacza wszystkie przystanki i linie transportu publicznego.
    • transit.line wybiera linie transportu publicznego.
    • transit.station wybiera wszystkie przystanki.
    • 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 dla wszystkich dróg lokalnych:

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

Elementy to podgrupy cech. Droga obejmuje na przykład linię graficzną (geometrię) na mapie, a także tekst opisujący jej nazwę (etykietę).

Dostępne są te elementy, ale pamiętaj, że konkretna funkcja może nie obejmować żadnych, niektórych lub wszystkich elementów:

  • all (domyślnie) wybiera wszystkie elementy określonego elementu.
  • geometry wybiera wszystkie elementy geometryczne określonego elementu.
    • geometry.fill wybiera tylko wypełnienie geometrii cechy.
    • geometry.stroke wybiera tylko kreskę cechy geometrycznej.
  • labels wybiera etykiety tekstowe powiązane z określoną funkcją.
    • labels.icon wybiera tylko ikonę widoczną w etykietie elementu.
    • labels.text zaznacza tylko tekst etykiety.
    • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowy kontur, który otaczają tekst etykiety.
    • labels.text.stroke wybiera tylko kreskę tekstu.

stylers

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

Ten fragment kodu JSON wyświetla funkcję jako jasnozielony z użyciem wartości RGB:

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

Ten fragment powoduje usunięcie intensywności koloru koloru niezależnie od koloru początkowego. Efektem jest wyrenderowanie skali szarości:

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

Ten fragment kodu całkowicie ukrywa funkcję:

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

Obsługiwane są następujące opcje stylu:

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

    Uwaga: ta opcja ustawia barwę przy zachowaniu nasycenia i jasności określonej w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Otrzymany kolor jest zależny od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy skonfigurowane za pomocą atrybutu hue. Jeśli to możliwe, lepiej użyć bezwzględnego stylu color.

  • lightness (liczba zmiennoprzecinkowa między -100 a 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 określa poziom jasności przy zachowaniu nasycenia i barwy określonego w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Otrzymany kolor jest zależny od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy skonfigurowane za pomocą atrybutu lightness. Jeśli to możliwe, lepiej użyć bezwzględnego stylu color.

  • saturation (liczba zmiennoprzecinkowa między -100 a 100) wskazuje procentową zmianę intensywności koloru podstawowego, który ma zostać zastosowany do elementu.

    Uwaga: ta opcja określa nasycenie, zachowując barwę i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Otrzymany kolor jest zależny od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy skonfigurowane za pomocą atrybutu saturation. Jeśli to możliwe, lepiej użyć bezwzględnego stylu color.

  • gamma (wartość zmiennoprzecinkowa między 0.01 a 10.0, gdzie 1.0 nie stosuje korekty), wskazuje wartość korekty gamma do elementu. Korekty gamma modyfikują jasność kolorów w sposób nielinearny, nie wpływając przy tym na wartości białej ani czarnej. Korekcja gamma jest zwykle używana do modyfikowania kontrastu wielu elementów. Na przykład możesz zmienić wartość gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami i wnętrzami elementów.

    Uwaga: ta opcja dostosowuje jasność światła w porównaniu z domyślnym stylem Google przy użyciu krzywej gamma. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, będą one wpływały na funkcje mapy zgodnie ze stylem gamma. Jeśli to możliwe, lepiej użyć bezwzględnego stylu color.

  • invert_lightness (jeśli true) odwraca istniejącą jasność. Jest to przydatne na przykład wtedy, gdy chcesz szybko przejść 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łyną one na funkcje mapy zgodne ze stylem invert_lightness. Jeśli to możliwe, lepiej użyć bezwzględnego stylu color.

  • visibility (on, off lub simplified) wskazuje, czy i jak element występuje na mapie. Widoczność w usłudze simplified usuwa z niektórych elementów niektóre style. Na przykład drogi są uproszczone w cienkich liniach bez obrysu, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
  • color (ciąg szesnastkowy RGB w formacie #RRGGBB) ustawia kolor cechy.
  • weight (liczba całkowita, większa lub równa) ustawia wagę cechy w pikselach. Ustawienie wysokiej wartości może spowodować przycięcie ramki obok krawędzi.

Reguły stylu są stosowane w określonej 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ą realizowane w komunikacji. Funkcje lub elementy zmodyfikowane za pomocą operacji stylu (zwykle) mają już istniejące style. Operacje będą wykonywane na istniejących stylach (jeśli są dostępne).

Model odcienia, nasycenia i jasności

Mapy stylu używają modelu koloru, nasycenia, jasności (HSL) do wskazania koloru w operacjach stylizacji. Barwa wskazuje podstawowy kolor, nasycenie wskazuje intensywność koloru, a jasność wskazuje względną ilość bieli lub czerni w składniku.

Korekcja gamma modyfikuje jasność światła nad przestrzenią kolorów, zazwyczaj zwiększając lub zmniejszając kontrast. Oprócz tego model HSL definiuje kolor w miejscu współrzędnych, gdzie hue wskazuje orientację w koło kolorów, a nasycenie i jasność wskazują amplitudy wzdłuż różnych osi. Odcienie są mierzone w przestrzeni RGB, która jest podobna do większości przestrzeni RGB, z wyjątkiem bieli i czerni.

Odcień, nasycenie, model jasności

Mimo że hue przyjmuje wartość szesnastkową koloru HTML, używa jej tylko do określenia koloru podstawowego – czyli orientacji wokół koła kolorów, a nie jego nasycenia lub jasności, które są określane oddzielnie jako zmiany procentowe.

Możesz na przykład zdefiniować barwę dla zielonego koloru: hue:0x00ff00 lub hue:0x000100. Oba kolory są identyczne. Obie wartości wskazują czysto zielony w modelu kolorów HSL.

Koło kolorów RGB

Wartości hue RGB, które składają się z równych części czerwonych, zielonych i niebieskich, nie wskazują barwy, ponieważ żadna z tych wartości nie wskazuje orientacji w obszarze współrzędnych HSL. Przykłady: "#000000" (czarny), "#FFFFFF" (biały) i wszystkie czyste odcienie szarości. Aby zaznaczyć, że masz czarno-biały lub szary, usuń wszystkie wartości saturation (ustaw wartość na -100) i dostosuj zamiast tego lightness.

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