В этом разделе рассматриваются методы продвинутой настройки слоёв в ГИС, включая:
- создание и настройку легенд;
- применение предфильтрации данных;
- расширенную стилизацию слоёв.
Основное внимание уделено 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»;
- не относятся к федеральным дорогам.
Дополнительно:
- Предфильтрация применяется до загрузки слоя, что повышает производительность.
- Неправильный синтаксис подсвечивается красным.
- Рекомендуется использовать готовые примеры из существующих проектов.
- Используйте только те ключевые слова и операторы, которые стандартизированы в системе.
- Документация по фильтрам предоставляется разработчиками (может быть недоступна публично).
Основы расширенной настройки стилей слоёв
Стиль слоя состоит из нескольких частей:
| Часть | Название |
|---|---|
| Основной стиль объекта (линия, точка, полигон) |
| Стиль подсветки при выборе объекта |
| Подписи (текстовые или символы) |
Типы отображения:
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-описание стиля из одного проекта.
- В новом проекте создайте слой с этим стилем.
- При необходимости измените параметры (цвет, название и т.п.).
Преимущества:
- Ускоряет настройку
- Позволяет использовать проверенные решения
- Обеспечивает единый стиль оформления
...
Рекомендуемые ресурсы
- Внутренняя документация разработчиков по JSON-структурам слоёв и фильтров
- Документация по библиотеке Mapbox GL (основа стилизации)
- Онлайн-сервисы для подбора цветов (Color Picker, HEX, RGB, HSL)