Справочник стилей для Maps SDK для iOS

Выберите платформу: Android iOS JavaScript

С помощью настроек стиля вы можете настроить отображение стандартных стилей карт Google, изменяя визуальное отображение таких объектов, как дороги, парки, предприятия и другие интересные места. Помимо изменения стиля этих объектов, вы можете полностью скрыть их. Это означает, что вы можете подчеркнуть отдельные элементы карты или сделать карту гармоничной по стилю с окружающей страницей.

Примеры

Следующее объявление стиля JSON делает все объекты карты серыми, затем окрашивает геометрию магистралей в синий цвет и полностью скрывает метки ландшафта:

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

Объект JSON

Декларация стиля JSON состоит из следующих элементов:

  • featureType (необязательно) — объекты, которые нужно выбрать для этой модификации стиля. Объекты — это географические характеристики на карте, включая дороги, парки, водоёмы и многое другое. Если объект не указан, будут выбраны все объекты.
  • elementType (необязательно) — свойство выбранного объекта. Элементы — это подчасти объекта, включая метки и геометрию. Если элемент не указан, будут выбраны все элементы объекта.
  • Стилисты — правила, применяемые к выбранным объектам и элементам. Стилисты определяют цвет, видимость и вес объекта. К объекту можно применить один или несколько стилей.

Чтобы задать стиль, необходимо объединить набор селекторов featureType и elementType , а также stylers в массив стилей. Вы можете выбрать любую комбинацию функций в одном массиве. Однако количество стилей, которые можно применить одновременно, ограничено. Если длина массива стилей превышает максимальное количество символов, стиль не применяется.

Остальная часть этой страницы содержит более подробную информацию о функциях, элементах и ​​стилистах.

featureType

Следующий фрагмент JSON выбирает все дороги на карте:

{
  "featureType": "road"
}

Объекты или типы объектов — это географические характеристики на карте, включая дороги, парки, водоемы, предприятия и многое другое.

Характеристики образуют дерево категорий, корнем которого является all ». Если характеристика не указана, будут выбраны все характеристики. Указание характеристики « all имеет тот же эффект.

Некоторые объекты содержат дочерние объекты, которые указываются с помощью точечной нотации. Например, landscape.natural или road.local . Если указать только родительский объект, например, road , стили, заданные для родительского объекта, применяются ко всем его дочерним объектам, например, road.local и road.highway .

Обратите внимание, что родительские функции могут включать в себя некоторые элементы, которые не включены во все их дочерние функции.

Доступны следующие функции:

  • all (по умолчанию) выбирает все функции.
  • administrative — выбирает все административные районы. Стилизация влияет только на названия административных районов, а не на географические границы или заливку.
    • administrative.country выбирает страны.
    • administrative.land_parcel выбирает земельные участки.
    • administrative.locality выбирает населенные пункты.
    • administrative.neighborhood выбирает районы.
    • administrative.province выбирает провинции.
  • landscape selects all landscapes.
    • landscape.man_made выбирает объекты, созданные человеком, такие как здания и другие сооружения.
    • landscape.natural selects natural features, such as mountains, rivers, deserts, and glaciers.
    • landscape.natural.landcover выбирает особенности земельного покрова — физический материал, покрывающий поверхность Земли, например леса, луга, водно-болотные угодья и голую землю.
    • landscape.natural.terrain выбирает особенности рельефа поверхности земли, такие как высота, уклон и ориентация.
  • poi выбирает все точки интереса.
    • poi.attraction выбирает туристические достопримечательности.
    • poi.business выбирает предприятия.
    • poi.government selects government buildings.
    • poi.medical selects emergency services, including hospitals, pharmacies, police, doctors, and others.
    • poi.park выбирает парки.
    • poi.place_of_worship selects places of worship, including churches, temples, mosques, and others.
    • poi.school selects schools.
    • poi.sports_complex выбирает спортивные комплексы.
  • road selects all roads.
    • road.arterial выбирает магистральные дороги.
    • road.highway выбирает автомагистрали.
    • road.highway.controlled_access выбирает автомагистрали с контролируемым доступом.
    • road.local выбирает местные дороги.
  • transit выбирает все транзитные станции и линии.
    • transit.line выбирает линии общественного транспорта.
    • transit.station выбирает все транзитные станции.
    • transit.station.airport выбирает аэропорты.
    • transit.station.bus выбирает автобусные остановки.
    • transit.station.rail выбирает железнодорожные станции.
  • water выбирает водоемы.

elementType

Следующий фрагмент JSON выбирает метки для всех местных дорог:

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

Элементы — это части объекта. Например, дорога состоит из графической линии (геометрии) на карте, а также текста, обозначающего её название (метки).

Доступны следующие элементы, но учтите, что конкретная функция может не поддерживать ни один, некоторые или все элементы:

Label text fill and stroke colors change based on the zoom level. To make the experience consistenent across zoom levels, always define both fill and stroke .

  • all (по умолчанию) выбирает все элементы указанного объекта.
  • geometry выбирает все геометрические элементы указанного объекта.
    • geometry.fill selects only the fill of the feature's geometry.
    • geometry.stroke выбирает только обводку геометрии объекта.
  • labels selects the textual labels associated with the specified feature.
    • labels.icon selects only the icon displayed within the feature's label.
    • labels.text выбирает только текст метки.
    • labels.text.fill selects only the fill of the label. The fill of a label is typically rendered as a colored outline that surrounds the label text.
    • labels.text.stroke выбирает только обводку текста метки.

stylers

Стили — это параметры форматирования, которые можно применять к объектам и элементам карты.

The following JSON snippet displays a feature as bright green, using an RGB value:

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

Этот фрагмент кода полностью удаляет интенсивность цвета объекта, независимо от его начального цвета. В результате объект отображается в оттенках серого:

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

Этот фрагмент полностью скрывает функцию:

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

Поддерживаются следующие параметры стиля:

  • hue (шестнадцатеричная строка RGB в формате #RRGGBB ) указывает основной цвет.

    Примечание: Этот параметр задаёт оттенок, сохраняя насыщенность и яркость, заданные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете для карты). Результирующий цвет определяется относительно стиля базовой карты. Если Google вносит какие-либо изменения в стиль базовой карты, эти изменения повлияют на элементы вашей карты, стилизованные с помощью hue . По возможности лучше использовать абсолютный стилизатор color .

  • lightness (число с плавающей точкой от -100 до 100 ) указывает процентное изменение яркости элемента. Отрицательные значения увеличивают тёмность (где -100 соответствует чёрному), а положительные — яркость (где +100 соответствует белому).

    Примечание: Этот параметр задаёт яркость, сохраняя насыщенность и оттенок, заданные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете для карты). Результирующий цвет определяется относительно стиля базовой карты. Если Google вносит какие-либо изменения в стиль базовой карты, эти изменения повлияют на элементы вашей карты, для которых задано значение lightness . По возможности лучше использовать абсолютный стилизатор color .

  • saturation (значение с плавающей точкой от -100 до 100 ) указывает процентное изменение интенсивности основного цвета, применяемого к элементу.

    Примечание: Этот параметр задаёт насыщенность, сохраняя оттенок и яркость, заданные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете для карты). Результирующий цвет определяется относительно стиля базовой карты. Если Google вносит какие-либо изменения в стиль базовой карты, эти изменения повлияют на элементы вашей карты, для которых задано значение saturation . По возможности лучше использовать абсолютный стилизатор color .

  • gamma (число с плавающей точкой в ​​диапазоне от 0.01 до 10.0 , где 1.0 не применяется к коррекции) определяет величину гамма-коррекции, применяемой к элементу. Гамма-коррекция изменяет яркость цветов нелинейно, не влияя на значения белого и чёрного. Гамма-коррекция обычно используется для изменения контрастности нескольких элементов. Например, можно изменять гамму, чтобы увеличить или уменьшить контрастность между краями и внутренними частями элементов.

    Note: This option adjusts the lightness relative to the default Google style, using a gamma curve. If Google makes any changes to the base map style, the changes affect your map's features styled with gamma . It's better to use the absolute color styler if you can.

  • invert_lightness (if true ) inverts the existing lightness. This is useful, for example, for quickly switching to a darker map with white text.

    Note: This option simply inverts the default Google style. If Google makes any changes to the base map style, the changes affect your map's features styled with invert_lightness . It's better to use the absolute color styler if you can.

  • visibility ( on , off , or simplified ) indicates whether and how the element appears on the map. A simplified visibility removes some style features from the affected features; roads, for example, are simplified into thinner lines without outlines, while parks lose their label text but retain the label icon.
  • color (шестнадцатеричная строка RGB в формате #RRGGBB ) задает цвет объекта.
  • weight (целое число, большее или равное нулю) задаёт вес объекта в пикселях. Установка большого веса может привести к обрезке границ фрагмента.

Правила стилей применяются в указанном вами порядке. Не объединяйте несколько операций в одну. Вместо этого определите каждую операцию как отдельную запись в массиве стилей.

Примечание: порядок важен, поскольку некоторые операции некоммутативны. У объектов и/или элементов, изменяемых посредством операций стилей (обычно), уже есть существующие стили. Операции применяются к этим существующим стилям, если они есть.

Модель оттенка, насыщенности и яркости

Styled maps use the hue, saturation, lightness (HSL) model to denote color within the styler operations. Hue indicates the basic color, saturation indicates the intensity of that color, and lightness indicates the relative amount of white or black in the constituent color.

Gamma correction modifies the lightness over the color space, generally to increase or decrease contrast. Additionally, the HSL model defines color within a coordinate space where hue indicates the orientation within a color wheel, while saturation and lightness indicate amplitudes along different axes. Hues are measured within an RGB color space, which is similar to most RGB color spaces, except that shades of white and black are absent.

Модель оттенка, насыщенности и яркости

While hue takes an HTML hex color value, it only uses this value to determine the basic color - that is, its orientation around the color wheel, not its saturation or lightness, which are indicated separately as percentage changes.

Например, оттенок чистого зелёного цвета можно определить как hue:0x00ff00 или hue:0x000100 . Оба оттенка идентичны. Оба значения указывают на чистый зелёный цвет в цветовой модели HSL.

Цветовой круг RGB

RGB hue values which consist of equal parts red, green and blue do not indicate a hue, because none of those values indicate an orientation in the HSL coordinate space. Examples are "#000000" (black), "#FFFFFF" (white), and all the pure shades of gray. To indicate black, white or gray, you must remove all saturation (set the value to -100 ) and adjust lightness instead.

Кроме того, при изменении существующих объектов, у которых уже есть цветовая схема, изменение значения, например hue не приводит к изменению его существующей saturation или lightness .