Стилизованные карты

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Настройте представление стандартной карты Google, применив собственные стили при использовании Maps Static API. Вы можете изменить визуальное отображение таких объектов, как дороги, парки, населенные пункты и другие достопримечательности. Измените их цвет или стиль, чтобы подчеркнуть определенный контент, дополнить окружающий контент на странице или даже полностью скрыть функции.

Примеры

В следующем примере показана карта Бруклина, США, со стилем, в котором местные дороги окрашены в ярко-зеленый цвет, а жилые районы — в черный. Он также инвертирует яркость надписей, чтобы они лучше выделялись на темном фоне. Обратите внимание, что в этом рабочем примере используется кодировка URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

Стилизованная карта Бруклина

В следующем примере используются операции по стилизации и упрощения, чтобы приблизить внешний вид атласа дорог США:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE

Стиль карты дорожного атласа США

Синтаксис стиля

Чтобы создать карту с настроенным стилем, включите один или несколько параметров style в URL-адрес запроса.

Каждое объявление style может содержать следующие аргументы, разделенные вертикальной чертой (" | "):

  • feature (необязательно) указывает функции, которые следует выбрать для этой модификации стиля. Объекты включают элементы на карте, такие как дороги, парки или другие достопримечательности. Если аргумент feature отсутствует, указанный стиль применяется ко всем функциям.
  • element (необязательный) указывает элемент(ы) указанной функции, которые следует выбрать для этой модификации стиля. Элементы — это характеристики объекта, такие как геометрия или метки. Если аргумент element отсутствует, стиль применяется ко всем элементам указанного объекта.
  • Набор правил стиля (обязательных), применяемых к указанным функциям и элементам. API применяет правила в том порядке, в котором они указаны в объявлении style . Вы можете включить любое количество правил в пределах обычных ограничений длины URL-адреса Maps Static API.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Функции

Следующее объявление style окрашивает все дороги на карте:

style=feature:road|color:0xffffff

Вот некоторые общие выборы функций:

  • feature:all (по умолчанию) выбирает все функции карты.
  • feature:road выбирает все дороги на карте.
  • feature:road.local выбирает все местные дороги.

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

Функции образуют дерево категорий, в котором 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 выбирает водоемы.

Элементы

Следующее объявление style окрашивает метки для всех местных дорог:

style=feature:road.local|element:labels|color:0xffffff

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

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

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

Правила стиля

Правила стиля — это параметры форматирования, которые применяются к функциям и элементам, указанным в каждом объявлении style .

Следующее объявление style применяет к дорогам на карте два правила стиля. Первое правило применяет цвет к дорогам. Второе правило упрощает отображение дорог, поэтому они имеют более тонкие линии без контуров:

style=feature:road|color:0xffffff|visibility:simplified

Каждое объявление style должно содержать одну или несколько операций, разделенных вертикальной чертой (" | "). Каждая операция указывает значение своего аргумента с помощью символа двоеточия (" : "), и все операции применяются к выбору в том порядке, в котором вы их указываете.

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

  • 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 не применяет коррекцию) указывает величину гамма-коррекции, применяемую к элементу. Гамма-коррекция изменяет яркость цветов нелинейным образом, не влияя при этом на значения белого или черного. Гамма-коррекция обычно используется для изменения контраста нескольких элементов. Например, вы можете изменить гамму, чтобы увеличить или уменьшить контраст между краями и внутренней частью элементов.

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

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

    Примечание. Этот параметр просто инвертирует стиль Google по умолчанию. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на функции вашей карты, оформленные с помощью invert_lightness . Если есть возможность, лучше использовать стайлер абсолютного 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 .