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

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

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

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

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

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

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

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

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

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

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

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

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

Колонки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст

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

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

Иконка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Категории

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

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

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

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

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

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

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

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

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

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

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

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

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

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