Работа с z-index

В системе отображения Leaflet порядок наложения графических объектов определяется не только стандартным CSS z-index, но и внутренней моделью «панелей» (panes). Каждая категория объектов рендерится в собственном контейнере, что позволяет управлять перекрытием слоёв на уровне библиотеки без прямого вмешательства в DOM.

Панели (panes) как основа системы наложения

Leaflet разделяет все визуальные элементы карты на набор слоёв-контейнеров:

  • tilePane — базовые тайлы (карта)
  • shadowPane — тени маркеров
  • overlayPane — векторные слои (Polyline, Polygon, Circle)
  • markerPane — маркеры
  • tooltipPane — всплывающие подсказки
  • popupPane — всплывающие окна

Каждая панель имеет собственный z-index, задающий относительный порядок отображения. Внутри одной панели элементы также могут управляться через изменение порядка DOM-узлов или динамическое перенесение между слоями.

Базовая логика z-index в Leaflet

Иерархия слоёв строится следующим образом:

  1. Тайлы карты располагаются на самом нижнем уровне.
  2. Векторные данные накладываются поверх тайлов.
  3. Маркеры отображаются выше векторных слоёв.
  4. Попапы и тултипы находятся на самом верхнем уровне.

Такое разделение минимизирует необходимость ручного управления CSS и снижает вероятность конфликтов наложения.

Настройка порядка панелей через Pane API

Leaflet позволяет создавать собственные панели с заданным приоритетом отображения:

map.createPane('customPane');
map.getPane('customPane').style.zIndex = 650;

Каждой панели назначается числовое значение z-index, которое определяет её положение относительно других слоёв.

Стандартные значения находятся в диапазоне:

  • tilePane — около 200
  • overlayPane — около 400
  • markerPane — около 600
  • popupPane — около 700

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

Привязка объектов к панели

Любой геообъект может быть привязан к определённой панели через опцию pane:

L.circle([51.5, -0.09], {
    radius: 200,
    pane: 'customPane'
}).addTo(map);

Маркер также может быть перенесён в отдельную панель:

L.marker([51.5, -0.09], {
    pane: 'markerPane'
}).addTo(map);

Это позволяет разделять визуальные группы объектов по уровню приоритета отображения.

Управление порядком внутри одной панели

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

  • bringToFront()
  • bringToBack()
const polygon = L.polygon(coords).addTo(map);
polygon.bringToFront();

Операции изменяют порядок DOM-элементов внутри контейнера панели, влияя на перекрытие объектов одного типа.

z-index и SVG/Canvas рендеринг

Векторные слои могут рендериться в двух режимах:

  • SVG (по умолчанию)
  • Canvas (для больших объёмов данных)

В SVG-режиме каждый слой является отдельным DOM-элементом с управляемым z-index через панель. В Canvas все объекты рисуются в одном контексте, поэтому порядок определяется не CSS, а последовательностью отрисовки.

Canvas-панель (leaflet-overlay-pane) сохраняет общий z-index, а управление наложением осуществляется через порядок добавления слоёв.

Попапы и тултипы как верхний слой

Popups и tooltips размещаются в отдельных панелях с максимальным приоритетом:

map.openPopup(popup);

Их позиционирование требует более высокого z-index, чем у маркеров и векторных объектов. При необходимости можно изменить поведение через переназначение панели:

popup.options.pane = 'customPane';

Конфликты z-index и типичные причины

Нарушение корректного наложения слоёв возникает при:

  • изменении z-index без синхронизации с панелями Leaflet
  • создании DOM-элементов вне системы панелей
  • смешивании SVG и HTML-слоёв без учёта порядка панелей
  • использовании кастомных overlay без назначения pane

Leaflet игнорирует произвольные CSS-правила z-index для элементов внутри управляемых панелей, если они противоречат внутренней структуре слоёв.

Динамическое изменение порядка отображения

Перенос объекта между уровнями достигается сменой панели:

marker.setZIndexOffset(1000);

Для маркеров также используется смещение z-index, которое влияет на визуальный приоритет внутри markerPane.

Система приоритетов событий и z-index

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

Leaflet использует геометрию DOM-слоёв и порядок панелей для определения «верхнего» объекта при клике, что делает z-index частью не только визуальной, но и событийной модели.

Оглавление