В этом разделе рассматриваются методы продвинутой настройки слоёв в ГИС, включая:

• создание и настройку легенд;
• применение предфильтрации данных;
• расширенную стилизацию слоёв.

Основное внимание уделено JSON-структурам, описывающим слои, а также практическим примерам их использования.

Ключевые моменты

• Легенда – условные обозначения объектов слоя, настраиваемые через JSON с указанием цвета, типа геометрии и границ.
• Предфильтрация – фильтрация объектов по свойствам до загрузки слоя, реализуется с помощью JSON с логическими операциями (eq, neq, and, or).
• Расширенная стилизация – позволяет задавать несколько частей стиля (например, основная линия и подсветка при выборе), включая параметры цвета, ширины, формы концов и соединений, а также подписи с условиями отображения по зуму.
• Для корректной работы клика по объекту в стиле должен присутствовать слой с именем main.
• Для подсветки выбранного объекта используется слой с именем select.
• Цвета в стилях обычно задаются в формате HEX, но поддерживаются также RGB, RGBA, HSL и HSLA.
• SVG-иконки добавляются через символы; собственные изображения необходимо загружать на сервер.
• Чтобы добавить свои изображения, обратитесь к Ивану – он разместит их в нужной директории на сервере.
• Слои и стили можно клонировать и переносить между проектами, что упрощает работу и позволяет использовать готовые решения с минимальными изменениями.

Легенда в слоях ГИС

Легенда – это условное обозначение объектов слоя, отображаемое в панели слоёв.

Типы примитивов в легенде:

• Точки
• Линии
• Полигоны
• Текст (символы), например, описание дорожных знаков

Особенности:

• Легенда может изменяться в зависимости от масштаба (зума). Например, точки могут заменяться иконками после 14-го зума.
• Описание легенды строится на основе JSON-структуры с параметрами:
  • Зум – диапазон отображения объекта
  • Комментарий – текстовое описание
  • Объект – геометрический тип (точка, линия, полигон)
  • Цвет – в формате HEX или других цветовых моделях
  • Тип геометрии – числовой код:
    0 – точка, 1 – линия, 2 – полигон, 3 – типовая карта (редко используется)
  • Тип закраски полигонов – сплошной цвет, градиент, штриховка, прозрачность
  • Тип границы (stroke type) – например, двойная линия (чёрная + белая)

Примеры:

• Зона платной парковки – линия сплошного цвета
• «Остановка запрещена» – линия другого цвета
• Дорожное ограждение – отображается как точка до 10-го зума и как линия после

Настройка отображения объектов по типу геометрии и зуму

Отображение зависит от типа геометрии: точка, линия, полигон.

Для каждого типа можно задать отдельные стили и условия отображения.

Влияние масштаба (зума):

• Пример: дорожное ограждение меняет отображение с точки на линию при переходе через 10-й зум.
• В JSON-описании слоя указываются диапазоны зума для каждого типа отображения.
• Цвета и типы линий/точек могут оставаться одинаковыми при смене типа геометрии.
• Разные типы геометрии требуют разных ключей и параметров в описании стиля.

Применение предфильтрации данных с использованием JSON

Предфильтрация ограничивает объём данных, загружаемых в слой, на основе заданных условий.

Структура JSON-фильтра:

• Тип фильтра – например, property filter
• Свойство (property) – поле объекта, по которому фильтруется
• Оператор сравнения – eq (равно), neq (не равно) и др.
• Значение – значение для сравнения

Логические операции:

• eq – равно
• neq – не равно
• and (end) – логическое «И» (все условия должны выполняться)
• or – логическое «ИЛИ» (должно выполняться хотя бы одно условие)

Фильтры можно комбинировать и вкладывать друг в друга.

Указание логики между фильтрами

Для определения порядка применения условий в JSON используются специальные ключи:

• nextLogicOperationType – указывает логическую операцию между несколькими фильтрами.
  Пример: объединение двух условий через and.
• nextFilterLogicOperationType – используется в более сложных случаях (редко).

Пример фильтра с and:

{
  "filter": [
    { "property": "region", "operator": "eq", "value": "Dagestan" },
    { "property": "roadType", "operator": "neq", "value": "federal" }
  ],
  "nextLogicOperationType": "and"
}

Этот фильтр отображает объекты, которые одновременно:

• находятся в регионе «Dagestan»;
• не относятся к федеральным дорогам.

Дополнительно:

• Предфильтрация применяется до загрузки слоя, что повышает производительность.
• Неправильный синтаксис подсвечивается красным.
• Рекомендуется использовать готовые примеры из существующих проектов.
• Используйте только те ключевые слова и операторы, которые стандартизированы в системе.
• Документация по фильтрам предоставляется разработчиками (может быть недоступна публично).

Основы расширенной настройки стилей слоёв

Стиль слоя состоит из нескольких частей:

Типы отображения:

• circle – точка
• line – линия
• fill – полигон
• symbol – иконка, подпись или их сочетание

Параметры стиля:

• Цвет (color) – чаще всего HEX, также RGB, RGBA, HSL, HSLA
• Ширина линии (line-width) – может зависеть от зума (например, от 1 до 5 пикселей)
• Форма концов линии (line-cap) – круглые или квадратные
• Тип соединений (line-join) – круглые, острые и др.

Важно: для корректной работы клика по объекту обязательно наличие части стиля с именем main.

Поле source указывает на источник данных, но в системе используется в основном для внутренней спецификации и может быть произвольным.

Подписи на слоях

Подписи задаются через тип symbol с параметрами:

• Цвет текста
• Шрифт
• Минимальный зум для отображения
• Фильтр объектов, которые подписываются (например, только дороги с непустым именем)

Структура стиля – это список словарей, каждый из которых описывает отдельную часть слоя.

Для сложных случаев можно создавать несколько частей с разными параметрами. Например, мосты можно отображать сначала точкой, затем линией.

Пример настройки стиля линии с подсветкой и подписью

Основная линия:

• line-color – цвет (HEX)
• line-width – ширина, изменяющаяся с зумом
• line-cap, line-join – форма концов и соединений (обычно круглые)

Подсветка при выборе (select):

• Цвет – жёлтый
• Ширина – больше основной линии

Подпись (label):

• Отображается при зуме ≥10
• Только для объектов с непустым именем

Такой стиль обеспечивает визуальную обратную связь и удобство взаимодействия.

Использование цветовых форматов и идентификаторов в стилях

Форматы цветов:

• HEX – #FF5733 (наиболее распространён)
• RGB / RGBA – с альфа-каналом для прозрачности
• HSL / HSLA – удобны для цветокоррекции

Цвета можно конвертировать с помощью онлайн-сервисов или инструмента Color Picker в браузере.

Идентификаторы:

• id – уникальный идентификатор части стиля
• Обязательные имена:
  • main – для кликов
  • select – для подсветки выбранного объекта
• source – техническая метка источника данных

Наличие правильных id и source обязательно для корректной работы слоя.

Работа с SVG-иконками и добавление собственных изображений

SVG-иконки и изображения добавляются через тип symbol.

Как добавить иконку:

1. Передайте изображение разработчику.
2. Оно будет загружено в определённую директорию на сервере.
3. Запускается скрипт, который добавляет иконку в спрайт (sprites.png).
4. Имя иконки = имя файла.

Проверка:

• Иконки можно просмотреть через инструменты разработчика (F12 → вкладка «Сеть»).
• Доступные имена иконок есть в JSON-списке.
• Ошибки отображаются в консоли браузера (красные сообщения).

Клонирование и перенос стилей между проектами

Слои и стили можно копировать между проектами.

Процесс:

1. Скопируйте JSON-описание стиля из одного проекта.
2. В новом проекте создайте слой с этим стилем.
3. При необходимости измените параметры (цвет, название и т.п.).

Преимущества:

• Ускоряет настройку
• Позволяет использовать проверенные решения
• Обеспечивает единый стиль оформления

Рекомендуемые ресурсы

• Внутренняя документация разработчиков по JSON-структурам слоёв и фильтров
• Документация по библиотеке Mapbox GL (основа стилизации)
• Онлайн-сервисы для подбора цветов (Color Picker, HEX, RGB, HSL)