Настройка стиля отображения

Для визуализации картографических данных используются стили, настроенные для каждого слоя. В приложении настройка стилей осуществляется как через встроенный конструктор стилей, так и при помощи режимов редактирования «CartoCSS» и «JSON».

Новые стили в конструкторе добавляются нажатием кнопки и выбором нужного стиля из перечня:

Стиль для точек;
Стиль для полигонов;
Стиль для линий;
Стиль для текста и иконки;
Тематическая карта;
Категории.

При выборе режима отображения «GeoJSON» также становится доступна настройка кластеризации, которая включается при нажатии на активный элемент .

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

Примечание: Для гибкой настройки стилей для слоя с помощью конструктора можно добавлять несколько видов стилизации с разными параметрами.

Режим редактирования CartoCSS

Перейти в данный режим редактирования можно нажатием на кнопку . После нажатия открывается окно «Редактор CartoCSS», в котором можно написать стиль при помощи CartoCSS. В некоторых браузерах поддерживается автодополнение кода с использованием сочетания клавиш , а также помечаются строки с ошибками.

Примечание: Стили, описанные с помощью CartoCSS автоматически применяются при установлении режима отображения в значение «Растровые тайлы».

Режим редактирования JSON

Перейти в режим редактирования JSON можно нажатием на элемент . После нажатия открывается соответствующее окно, в котором описаны текущие стили слоя и связанные с ними метаданные. В формате JSON можно вручную описать стили с большим набором различных параметров. В режиме редактирования JSON проверяется валидность описанного JSON, строки с ошибками отмечаются слева специальным значком.

Для перехода обратно в режим конструктора стилей необходимо нажать на элемент .

Расширенные настройки рендеринга

Серверный рендер ORBISmap 3 имеет возможность гибкой настройки параметров отрисовки данных. В режиме редактирования JSON возможно указать специальные настройки рендеринга, в том числе с приминением фильтрации по данным слоя. Расширенные настройки рендера могут быть полезны при работе с объектами сложной геометрии или при формировании подложки с наличием нетривиальных условий отображения.

Примечание: Работа с режимом редактирования JSON и определение расширенных правил рендера осуществляется опытным пользователем или программистом.

Подробнее о расширенных настройках рендеринга:

При определении правил рендеринга слоев используются следующие свойства (все настройки являются опциональными):

• cartocss - настройки стилей CartoCSS для растрового отображения;
• buffer - размер буфера вокруг объектов в пикселях, согласно заданному значению будет выбираться геометрия для тайла и выполняться генерация растровых тайлов;
• process - правила предварительной обработки геометрии выбираемых объектов, допускается использование модифицирующих, кластеризующих и агрегирующих функций, а также специальных инструкций;
• process_all - флаг выполнения предварительной обработки геометрии по всему слою без ограничения габаритами тайла (по умолчанию false);
• render_rules - список переопределяющих правил предварительной обработки геометрии process/process_all и размера буфера buffer с условиями применения по уровням масштаба, при наличии будет применено только первое подходящее условие из перечня:
○ buffer - опционально;
○ process - опционально, отсутствие или null для применения глобального process, пустой список - для игнорирования глобального process, непустой список - для переопределения;
○ process_all - опционально;
○ minzoom - нижняя граница масштаба, включительно;
○ maxzoom - верхняя граница масштаба, не включительно;
○ filter - условия для выбора объектов, попадающих в тайл, используется синтаксис Mapbox GL JS Style Expressions, поддерживаются следующие элементы:
• использование значения колонки - "get";
• математические операции - "+", "-", "*", "/";
• отрицание - "!";
• проверка значения колонки на NULL - "has";
• операторы сравнения - "!=", "=", "==", ">=", "<=", ">", "<";
• дополнительные операторы сравнения PostgreSQL - "like", "ilike", "is";
• объединяющие правила - "all", "any";
• условие вхождения в список значений - "in";
• использование литерального значения (для передачи списка в условие вхождения) - "literal";
• выбор первого не NULL значения - "coalesce";
• использование модифицирующих функций, возвращающих логическое значение, либо значение для использования в условных инструкций из списка выше.

Автоматическая конвертация стилей Mapbox GL JS Style в Mapnik XML для рендера растровых тайлов поддерживает ограниченный набор инструкций для фильтров и вычисления значений:

• Фильтры:
○ использование значения колонки - "get";
○ математические операции - "+", "-", "*", "/";
○ тип геометрии объекта - "geometry-type", сравнение со значениями Point, LineString, Polygon;
○ отрицание - "!";
○ проверка значения колонки на NULL - "has";
○ операторы сравнения - "!=", "=", "==", ">=", "<=", ">", "<";
○ объединяющие правила - "all", "any".
• Вычисление значений:
○ использование значения колонки - "get";
○ использование литерального значения (для возврата спискового значения) - "literal";
○ математические операции - "+", "-", "*", "/";
○ значение в зависимости от уровня масштаба - "interpolate" по ["zoom"];
○ значение в зависимости от уровня масштаба - "step" по ["zoom"].

Вызов функций модификации, кластеризации, агрегации и специальных инструкций осуществляется через инструкции, содержащие строковый идентификатор (код) функции, параметры и аргументы вызова.

Инструкции функций модификации содержат код функции и аргументы вызова.

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

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

Доступные инструкций модификации, кластеризации и агрегации конфигурируются перед запуском программы. Имеются предустановленные доступные функции из PostGIS:

snap - ST_SnapToGrid, модифицирующая инструкция, обрабатывает геометрию текущего объекта, принимает значение выравнивания в пикселях текущего масштаба;
simplify - ST_Simplify, модифицирующая инструкция, обрабатывает геометрию текущего объекта, принимает значение упрощения в пикселях текущего масштаба;
buffer - ST_Buffer, модифицирующая инструкция, обрабатывает геометрию текущего объекта, принимает значение буфера в пикселях текущего масштаба и опционально стиль буфер в текстовом формате;
cluster - ST_ClusterDBSCAN, кластеризующая инструкция, обрабатывает геометрию текущего объекта, принимает значение расстояния в пикселях текущего масштаба и минимальное количество общих точек;
union - ST_Union, агрегирующая инструкция, обрабатывает геометрии агрегируемых объектов;
area - ST_Area, модифицирующая инструкция, обрабатывает геометрию текущего объекта, возвращая значение площади;
intersects - ST_Intersect, модифицирующая инструкция, обрабатывает геометрию текущего объекта с геометрией из аргумента функции, возвращая признак их пересечения;
transform - ST_Transform, модифицирующая инструкция, обрабатывает геометрию текущего объекта, трансформируя в проекцию переданного в аргументе идентификатора (srid) проекции.

Пример определения расширенных настроек рендеринга:

{
  "layers":[...],
  ...
  "process": [
    [
      "cluster",
      [
        "name",
        "highway"
      ],
      0,
      1
    ],
    [
      "union",
      [
        "name",
        "highway"
      ]
    ],
    [
      "simplify",
      1
    ]
  ],
  "render_rules": [
    {
      "filter": [
        "in",
        [
          "get",
          "highway"
        ],
        [
          "literal",
          [
            "motorway",
            "trunk"
          ]
        ]
      ],
      "maxzoom": 9
    },
    {
      "filter": [
        "in",
        [
          "get",
          "highway"
        ],
        [
          "literal",
          [
            "motorway",
            "motorway_link",
            "trunk",
            "trunk_link",
            "primary",
            "primary_link",
            "secondary"
          ]
        ]
      ],
      "maxzoom": 11
    },
    {
      "maxzoom": 14,
      "minzoom": 11
    },
    {
      "buffer": 16,
      "maxzoom": 19,
      "minzoom": 17,
      "process": []
    }
  ],
  ...
}

Режим отображения

Данный параметр позволяет выбрать режим отображения данных на карте. По умолчанию выбран режим «Автоматически», благодаря которому приложение старается отобразить данные при помощи векторных тайлов, если это возможно. При нажатии на выпадающий список появляется перечень режимов, доступных для выбора:

Векторные тайлы - отображение данных на карте при помощи векторных тайлов. Позволяет ускорить рендеринг;
Растровые тайлы - отображение данных на карте при помощи растровых тайлов;
GeoJSON - загрузка данных в формате GeoJSON. Все отображаемые объекты слоя загружаются разом, поэтому для такого режима доступна настройка кластеризации.

Для наглядного понимания способа отображения данных в режиме просмотра «Карта» в левом дереве слоев предусмотрена цветовая индексация по типам отображения со следующими обозначениями:

	Векторные тайлы
	Растровые тайлы
	GeoJSON
	Режим не определен (для внешних слоев)

Легенда

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

Автоматическая - формируется для заданных стилей Категории или Тематичекая карта. В первом случае сформируется список с различными обозначениями и соответствующими им названиями, во втором случае будет отображена палитра с граничными значениями и название колонки, по которой сформирована данная шкала;
Изображения - позволяет добавлять в качестве легенды картинки путем указания их URL-адреса;
Ручная - задается пользователеми вручную в формате JSON и отображается при любом стиле.

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

Отображаемые колонки

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

Выборка опредёленных колонок помогает оптимизировать загрузку данных, поскольку объём данных может быть большим. Поэтому важно в каждом объекте загружать только те поля, которые необходимы для отрисовки.

По умолчанию включен режим «Автоматическое определение колонок». В этом режиме приложение само определяет набор необходимых для отображения колонок. Например, если в стиле для текста и иконки выбрана колонка с кодом id для отображения, эта колонка будет указана в списке.

При выключенном режиме «Автоматическое определение колонок» появляется возможность вручную выбрать колонки, значения из которых будут подгружаться для каждого отображаемого объекта. Данный способ следует использовать при работе со стилями, которые могут быть слишком сложными для автоматического анализа, или при работе с кастомными темами.

Всплывающая подсказка

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

В режиме редактирования JSON заданная настройка всплывающей подсказки записывается в виде "tooltip": "<код колонки>". Также такая колонка передается в автоматически определяемый перечень колонок для попадания в векторные тайлы.

Примечание: Отображение всплыващей подсказки будет доступно для данных с режимами отображения векторные тайлы и geojson.

Стиль для точек

Стиль для точек позволяет определить следующие параметры отображения для точечных объектов:

Заливка - цвет и непрозрачность заливки выбирается при помощи интерактивной палитры, в соседнем поле можно ввести размер заливки в пикселях (px);
Контур - цвет и непрозрачность контура выбирается при помощи интерактивной палитры, в соседнем поле можно ввести толщину контура в пикселях (px);
Масштаб - позволяет ввести масштаб отображения указанного стиля в интервале «от» и «до».

Пример применения стиля для точек

Стиль для полигонов

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

Заливка - цвет и непрозрачность заливки выбирается при помощи интерактивной палитры;
Текстура - при нажатии на кнопку возможно указать иконку для заполнения полигона. Работа с иконками подробнее рассмотрена в стиле для текста и иконки;
Контур - цвет и непрозрачность контура выбирается при помощи интерактивной палитры;
Масштаб - позволяет ввести масштаб отображения указанного стиля в интервале «от» и «до».

Пример применения стиля для полигонов

Примечание: Стиль для границ полигона с расширенными параметрами можно задать при помощи стиля для линий.

Стиль для линий

Стиль для линий позволяет определить следующие параметры отображения для линейных объектов:

Контур - цвет и непрозрачность контура выбирается при помощи интерактивной палитры, в соседнем поле можно ввести толщину контура в пикселях (px);
Пунктир - длину линии и интервал между ними в пикселях (px) можно задать в соответствующих полях;
Масштаб - позволяет ввести масштаб отображения указанного стиля в интервале «от» и «до».

Пример применения стиля для линий

Стиль для текста и иконки

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

Текст

Для стилизации текста доступны следующие параметры:

Шрифт - при помощи выпадающего списка можно выбрать один из множества доступных шрифтов. В соседнем поле указывается размер отображаемого текста в пикселях (px);
Колонка - позволяет выбрать название колонки, значение которой будет отображаться в качестве текста для объекта на карте;
Цвет текста - позволяет задать цвет и непрозрачность текста при помощи интерактивной палитры;
Обводка - позволяет задать цвет, непрозрачность обводки при помощи интерактивной палитры, а также указать толщину обводки в пикселях (px);
Смещение текста - смещение текста по осям X и Y в пикселях (px);
Макс. ширина - позволяет задать максимальное содержание текста на одной строчке в ems (1 ems равняется текущему размеру текста в пикселях). При превышении этого значения текст будет переноситься на следующую строку;
Привязка - с помощью выпадающего списка можно указать точку привязки текста;
Выравнивание - позволяет указать стандартный параметр выравнивания текста;
Перекрытие - при включении данного параметра становится доступным отображение накладывающихся друг на друга строк текста.

Примечание: При работе с параметрами «Смещение текста» и «Привязка» необходимо учитывать, что верхний левый угол экрана считается началом координат (0, 0) и перемещение вправо обеспечивается увеличением положительной коортинаты X, а перемещение вниз – увеличением положительной координаты Y.

Иконка

При нажатии на кнопку открывается окно «Библиотека иконок». В данном окне доступен просмотр иконок, загруженных в карты выбранного проекта, которые доступны пользователю. Переключение между картами осуществляется при помощи выпадающего списка. С помощью функциональных элементов и можно изменить стиль отображения иконок: плиткой или списком.

При нажатии на кнопку открывается окно «Создать иконку», в котором перечислены следующие ключевые параметры:

Иконка - при нажатии на кнопку необходимо выбрать файл загружаемой иконки. Этот параметр является обязательным;
Название - указание названия добавляемой иконки;
Pixel Ratio - позволяет задать отношение исходного размера картинки к размеру отображаемой иконки. Например, если размеры иконки 64x64, а параметр pixel ratio равен 4, то итоговый размер отображаемой иконки будет 16x16;
Ширина - позволяет переопределить ширину иконки в пикселях (px);
Высота - позволяет переопределить высоту иконки в пикселях (px);
Настройки метаданных - дополнительная информация в формате JSON, которая в дальнейшем может использоваться разработчиком.

При отсутствии параметра «Название» иконка будет иметь имя загруженного файла.

Примечание: Параметр «Pixel Ratio» имеет приоритет над указываемыми значениями «Ширина» и «Высота».

Примечание: Параметр «Pixel Ratio» указывается как дробное положительное число.

Выбрав иконку в другой карте, ее можно скопировать в текущую карту нажатием на кнопку .

При двойном нажатии на иконку в списке открывается окно «Изменить иконку», в котором можно изменить параметры иконки, заданные при создании.

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

Примечание: Иконка удаляется без возможности восстановления.

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

Смещение - смещение иконки по осям X и Y в пикселях (px);
Привязка - с помощью выпадающего списка можно указать точку привязки иконки;
Перекрытие - при включении данного параметра становится доступным отображение накладывающихся друг на друга иконок;
Масштаб - позволяет ввести масштаб отображения иконки в интервале «от» и «до».

Примечание: При работе с параметрами «Смещение текста» и «Привязка» необходимо учитывать, что верхний левый угол экрана считается началом координат (0, 0) и перемещение вправо обеспечивается увеличением положительной коортинаты X, а перемещение вниз – увеличением положительной координаты Y.

Пример применения стиля для текста и иконки

Тематическая карта

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

Для настройки стиля доступны следующие параметры:

Шаблон. Шаблон выбирается исходя из объектов, содержащихся в слое (полигоны, точки, линии);
Колонка. Значения из указанной колонки используются для «раскраски» объектов слоя;
Алгоритм распределения. Содержит 3 варианта группирования объектов:
- Равные интервалы - алгоритм разбивает диапазон значений атрибута на поддиапазоны равного размера;
- Квантили - каждый класс содержит одинаковое число объектов;
- Естественные границы - границы классов определяются таким образом, чтобы сгруппировать схожие значения и максимально увеличить различия между классами.
Классов. Указывается количество классов для группирования объектов по цвету. От количества классов зависит количество оттенков одного цвета для выбранной палитры;
Палитра. Используется для выбора количества цветов в палитре: 2 или 3 цвета;
Цветовая схема. В выпадающем списке доступны на выбор шаблоны цветовых схем. Нажатие на квадрат с цветом позволяет интерактивно (или при помощи указания кода цвета) задать нужный оттенок. При помощи элемента можно менять порядок цветов в схеме;
Непрозрачность. Позволяет указать непрозрачность цвета объектов слоя в процентах (%), где 0 полностью прозрачный, 100 - полностью непрозрачный;
Размер. Позволяет указать размер в пикселях (px).
Контур. Используется для настройки параметров контура при помощи интерактивной палитры (цвет, непрозрачность) и поля ввода толщины контура в пикселях (px).

Примечание: Параметры размер и контур доступны только для шаблона типа точки. Для шаблона линии появляется 2 дополнительных параметра: толщина линии и шаблон вида линии.

Пример визуализации «Тематическая карта»

Категории

Категории позволяют отобразить объекты слоя с различными цветовыми оттенками в зависимости от значений выбранной колонки.

С помощью интерфейса доступен выбор колонки, по значениям которой будут выделяться категории. В выпадающем списке Тип можно выбрать способ отображения в зависимости от типа геометрии объектов слоя:

Заливка - указывается для полигонов;
Текстура - задается для полигонов, позволяет указать иконку для заполнения полигона;
Линия - указывается для линий. Для типа «Линия» доступная дополнительная настройка параметра толщины в пикселях (px);
Круг - указывается для точек. Для этого типа доступна дополнительная настройка радиуса круга в пикселях (px), а также толщины контура в пикселях (px) и выбор его цвета и непрозрачности при помощи интерактивной палитры;
Иконка - указывается для точек. При выборе типа «Иконка» становится доступной установка иконки по умолчанию, а также иконки для каждой добавленной категории. Включение параметра перекрытие позволяет отображать иконки на карте, наложенными друг на друга.

Примечание: В качестве категории можно выбрать колонки с типами «Целое число» или «Текст».

Для каждого указанного типа доступен выбор цвета/иконки/текстуры по умолчанию для объектов, не попавших ни в одну из категорий. Выбор цвета и непрозрачности осуществляется при помощи интерактивной палитры, иконки выбираются в библиотеке иконок.

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

Примечание: Количество добавляемых категорий ограничено числом уникальных значений для выбранной колонки.

Пример визуализации «Категории»

Кластеризация

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

Для включения режима кластеризации необходимо указать «GeoJSON» в качестве режима отображения, нажать на элемент и активировать переключатель.

Также в данном окне возможно указать радиус в пикселях (px), определяющий радиус кластера для объединения попадающих в него точек.

После включения кластеризации в стилях отображения для точек и для текста и иконки добавятся вкладки Все, Кластер и Точка. Соответствующие разделы определяют, в каких случаях будет применяться указанный стиль — только для точечного отображения одного объекта, для отображения кластера из нескольких элементов или в обоих случаях сразу.

Для кластера есть возможность выбрать иконку и указать количество объектов в нем. Данная настрока производится в стиле для текста и иконки. При стилизации текста в разделе Кластер в поле Колонка будет доступен единственный вариант «Количество объектов».

При нажатии левой кнопкой мыши по кластеру открывается информационное окно, в котором отображается список значений идентифицирующей колонки объектов, попавших в этот кластер. При выборе конкретного объекта из списка открывается балун, в котором указаны значения для каждой колонки выбранного объекта:

Примечание: Настройка кластеризации доступна только при выборе режима отображения «GeoJSON».

Пример применения стиля «Кластеризация»