Справочник по стилю Map Tiles API

Вы можете использовать параметры стиля, чтобы настроить представление стандартных Карт 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 выбирает все пейзажи.
    • landscape.man_made выбирает искусственные объекты, такие как здания и другие конструкции.
    • landscape.natural выбирает природные объекты, такие как горы, реки, пустыни и ледники.
    • landscape.natural.landcover выбирает особенности земного покрова, физический материал, покрывающий поверхность земли, например леса, луга, водно-болотные угодья и голую землю.
    • landscape.natural.terrain выбирает особенности рельефа земной поверхности, такие как высота, уклон и ориентация.
  • poi выбирает все точки интереса.
    • poi.attraction выбирает туристические достопримечательности.
    • poi.business выбирает предприятия.
    • poi.government выбирает правительственные здания.
    • poi.medical выбирает службы экстренной помощи, включая больницы, аптеки, полицию, врачей и другие.
    • poi.park выбирает парки.
    • poi.place_of_worship выбирает места отправления культа, включая церкви, храмы, мечети и другие.
    • poi.school выбирает школы.
    • poi.sports_complex выбирает спортивные комплексы.
  • road выбирает все дороги.
    • 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"
}

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

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

  • all (по умолчанию) выбирает все элементы указанного объекта.
  • geometry выбирает все геометрические элементы указанного объекта.
    • geometry.fill выбирает только заливку геометрии объекта.
    • geometry.stroke выбирает только обводку геометрии объекта.
  • labels выбирает текстовые метки, связанные с указанным объектом.
    • labels.icon выбирает только значок, отображаемый внутри метки объекта.
    • labels.text выбирает только текст метки.
    • labels.text.fill выбирает только заливку метки. Заливка метки обычно отображается в виде цветного контура, окружающего текст метки.
    • labels.text.stroke выбирает только обводку текста метки.

stylers

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Примечание. Этот параметр регулирует яркость относительно стиля Google по умолчанию с использованием гамма-кривой. Если Google вносит какие-либо изменения в базовый стиль карты, эти изменения влияют на элементы вашей карты, стилизованные с помощью gamma . Если есть возможность, лучше использовать стайлер Absolute color .

  • invert_lightness (если true ) инвертирует существующую яркость. Это полезно, например, для быстрого переключения на более темную карту с белым текстом.

    Примечание. Этот параметр просто инвертирует стиль Google по умолчанию. Если Google вносит какие-либо изменения в базовый стиль карты, эти изменения влияют на элементы вашей карты, стилизованные с помощью invert_lightness . Если есть возможность, лучше использовать стайлер Absolute color .

  • visibility ( on , off или simplified ) указывает, отображается ли элемент на карте и каким образом. simplified видимость удаляет некоторые элементы стиля из затронутых элементов; дороги, например, упрощены до более тонких линий без контуров, а парки теряют текст надписей, но сохраняют значок надписи.
  • color (шестнадцатеричная строка RGB в формате #RRGGBB ) задает цвет объекта.
  • weight (целое значение, большее или равное нулю) задает вес объекта в пикселях. Установка высокого значения веса может привести к обрезке вблизи границ плитки.

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

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

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

Стилизованные карты используют модель оттенка, насыщенности, яркости (HSL) для обозначения цвета в операциях стилизатора. Оттенок указывает на основной цвет, насыщенность указывает на интенсивность этого цвета, а яркость указывает на относительное количество белого или черного цвета в составляющем цвете.

Гамма-коррекция изменяет яркость цветового пространства, как правило, для увеличения или уменьшения контраста. Кроме того, модель HSL определяет цвет в координатном пространстве, где hue указывает ориентацию внутри цветового круга, а насыщенность и яркость указывают амплитуды по разным осям. Оттенки измеряются в цветовом пространстве RGB, которое аналогично большинству цветовых пространств RGB, за исключением того, что оттенки белого и черного отсутствуют.

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

Хотя hue принимает шестнадцатеричное значение цвета HTML, оно использует это значение только для определения основного цвета, то есть его ориентации вокруг цветового круга, а не его насыщенности или яркости, которые указываются отдельно в виде процентных изменений.

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

Цветовое колесо RGB

Значения hue RGB, состоящие из равных частей красного, зеленого и синего, не указывают оттенок, поскольку ни одно из этих значений не указывает ориентацию в координатном пространстве HSL. Примеры: «#000000» (черный), «#FFFFFF» (белый) и все чистые оттенки серого. Чтобы указать черный, белый или серый цвет, необходимо удалить всю saturation (установить значение -100 ) и вместо этого отрегулировать lightness .

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