...
Основное внимание уделено JSON-структурам, описывающим слои, а также практическим примерам их использования.
Ключевые моменты
- Легенда – условные обозначения объектов слоя, настраиваемые через JSON с указанием цвета, типа геометрии и границ.
- Предфильтрация – фильтрация объектов по свойствам до загрузки слоя, реализуется с помощью JSON с логическими операциями (
eq,neq,and,or). - Расширенная стилизация – позволяет задавать несколько частей стиля (например, основная линия и подсветка при выборе), включая параметры цвета, ширины, формы концов и соединений, а также подписи с условиями отображения по зуму.
- Для корректной работы клика по объекту в стиле должен присутствовать слой с именем
main. - Для подсветки выбранного объекта используется слой с именем
select. - Цвета в стилях обычно задаются в формате HEX, но поддерживаются также RGB, RGBA, HSL и HSLA.
- SVG-иконки добавляются через символы; собственные изображения необходимо загружать на сервер.
- Чтобы добавить свои изображения, обратитесь к Ивану – он разместит их в нужной директории на сервере.
- Слои и стили можно клонировать и переносить между проектами, что упрощает работу и позволяет использовать готовые решения с минимальными изменениями.
Легенда в слоях ГИС
Легенда – это условное обозначение объектов слоя, отображаемое в панели слоёв.
...
- Зона платной парковки – линия сплошного цвета
- «Остановка запрещена» – линия другого цвета
- Дорожное ограждение – отображается как точка до 10-го зума и как линия после
Настройка отображения объектов по типу геометрии и зуму
Отображение зависит от типа геометрии: точка, линия, полигон.
...
- Пример: дорожное ограждение меняет отображение с точки на линию при переходе через 10-й зум.
- В JSON-описании слоя указываются диапазоны зума для каждого типа отображения.
- Цвета и типы линий/точек могут оставаться одинаковыми при смене типа геометрии.
- Разные типы геометрии требуют разных ключей и параметров в описании стиля.
Применение предфильтрации данных с использованием JSON
Предфильтрация ограничивает объём данных, загружаемых в слой, на основе заданных условий.
...
- Предфильтрация применяется до загрузки слоя, что повышает производительность.
- Неправильный синтаксис подсвечивается красным.
- Рекомендуется использовать готовые примеры из существующих проектов.
- Используйте только те ключевые слова и операторы, которые стандартизированы в системе.
- Документация по фильтрам предоставляется разработчиками (может быть недоступна публично).
Основы расширенной настройки стилей слоёв
Стиль слоя состоит из нескольких частей:
...
Для сложных случаев можно создавать несколько частей с разными параметрами. Например, мосты можно отображать сначала точкой, затем линией.
Пример настройки стиля линии с подсветкой и подписью
Основная линия:
line-color– цвет (HEX)line-width– ширина, изменяющаяся с зумомline-cap,line-join– форма концов и соединений (обычно круглые)
...
Такой стиль обеспечивает визуальную обратную связь и удобство взаимодействия.
Использование цветовых форматов и идентификаторов в стилях
Форматы цветов:
- HEX –
#FF5733(наиболее распространён) - RGB / RGBA – с альфа-каналом для прозрачности
- HSL / HSLA – удобны для цветокоррекции
...
Наличие правильных
idиsourceобязательно для корректной работы слоя.
Работа с SVG-иконками и добавление собственных изображений
SVG-иконки и изображения добавляются через тип symbol.
...
- Иконки можно просмотреть через инструменты разработчика (F12 → вкладка «Сеть»).
- Доступные имена иконок есть в JSON-списке.
- Ошибки отображаются в консоли браузера (красные сообщения).
Клонирование и перенос стилей между проектами
Слои и стили можно копировать между проектами.
...
- Ускоряет настройку
- Позволяет использовать проверенные решения
- Обеспечивает единый стиль оформления
Рекомендуемые ресурсы
- Внутренняя документация разработчиков по JSON-структурам слоёв и фильтров
- Документация по библиотеке Mapbox GL (основа стилизации)
- Онлайн-сервисы для подбора цветов (Color Picker, HEX, RGB, HSL)