6.4.1 Продвинутая настройка слоев

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

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

Основное внимание уделено 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:

json

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

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

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

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

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

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

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

Часть	Название
`main`	Основной стиль объекта (линия, точка, полигон)
`select`	Стиль подсветки при выборе объекта
`label`	Подписи (текстовые или символы)

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

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.

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

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

Проверка:

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

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

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

Процесс:

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

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

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

Page tree