Транспортная аналитика в реальном времени: интерактивные карты в дашбордах

Введение

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

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

В Инновационном центре «Безопасный транспорт» при ЦОДД интерактивную отчётность и дашборды создают в BI-системе «Visiology». Платформа позволяет кастомизировать визуализацию, собирая из различных виджетов полноценные отчёты.

Но как из сырых данных создать комплексные интерактивные карты, пригодные для оперативной аналитики? Какие инструменты позволяют вывести многомерную геопространственную информацию на дашборд в браузере пользователя — в реальном времени, без долгой загрузки и потери производительности? В этой статье мы разберём, какие JavaScript-библиотеки и подходы лежат в основе современных картографических визуализаций, и покажем на примере наших дашбордов, как превратить телеметрию транспорта в наглядные и полезные отчёты.

Создание картографического виджета

Для создания карт мы используем JavaScript-библиотеку Leaflet. Это легковесное, но при этом функциональное решение, которое позволяет создавать виджеты с гибкой настройкой отображаемых элементов: от простых маркеров до сложных кластеров и тепловых карт. Библиотека не привязана к конкретному поставщику тайлов — мы можем подгружать подложки от OpenStreetMap или Mapbox.

Типичная структура виджета

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

// Header
// Raw Data
// GeoJSON
// Styles
// Map Body
// -- Map Elements
// -- -- City
// -- -- Area
// -- -- Link
// -- -- Poi
// -- -- Title
// Footer

Верхний уровень (Header) содержит элементы управления и конфигурацию, например, чтобы избежать конфликта между разными виджетами на дашборде, мы задаём уникальный префикс для CSS-классов:

const cssPrefix = map-widget-${widgetId};

Каждый виджет подключается к «Викубу» (Viqube) — это In-Memory СУБД с многомерной OLAP-моделью от «Visiology». Так называемые «Группы показателей» содержат измерения, в том числе «Показатели» (values) и «Измерения» (rows). В модуле Raw Data мы выбираем необходимые нам столбцы для дальнейшей отрисовки карты. В столбцах могут содержаться координаты, названия районов и числовые метрики.

// Конфигурация столбцов
const columnsConfig = [
     { name: 'Столбец 1', source: 'rows', index: 0 },
     { name: 'Столбец 2', source: 'rows', index: 1 },                 
{ name: 'Столбец 3', source: 'values', index: 2 },
{ name: 'Столбец 4', source: 'values', index: 3 }
/];

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

В блоке GeoJSON мы обрабатываем координаты объектов, полученных из базы данных. Дело в том, что в стандартном GeoJSON используется формат [долгота, широта] (x, y), а Leaflet ожидает [широта, долгота] (y, x), поэтому мы производим конвертацию.

Наконец, все подключенные ранее объекты рендерятся в теле карты (Map Body), где геоданные накладываются на тайловую подложку. В зависимости от задачи в качестве картографической подложки мы используем либо OpenStreetMap, либо Mapbox, где можно гибко настроить стили объектов.

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

Завершает структуру картографического виджета Footer, где происходит инициализация виджета.

Элементы управления картой

Leaflet.js имеет дополнительный функционал для интерактивного использования карты. Например, мы на своих картах используем:

• кнопки масштабирования (Zoom);

• кнопку разворота во весь экран (Fullscreen);

• легенду;

• всплывающие подсказки (тултипы);

• чек-боксы;

• кастомные кнопки для приближения к определённому месту на карте.

Взаимодействие карты с другими объектами дашборда

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

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

Заключение

В этой статье мы рассмотрели, как устроено картографирование в Инновационном центре «Безопасный транспорт» при ЦОДД на примере создания виджетов с помощью JavaScript-библиотеки Leaflet. Интерактивные дашборды с картами позволяют специалистам разных подразделений, диспетчерам и руководителям отказаться от десятков разрозненных отчётов и получать всю необходимую информацию в реальном времени — в одном окне и в привязке к географии. Такой подход не просто экономит время на анализ данных, но и помогает оперативно принимать решения там, где важна каждая минута.