Векторный рендеринг в современных картографических системах основан на разделении геометрии и визуального представления. В отличие от растровых тайлов, где изображение уже «запечено», векторные данные передаются в виде геометрии и атрибутов, а отрисовка выполняется на стороне клиента с использованием WebGL. Это обеспечивает гибкость стилизации, динамическое обновление внешнего вида карты и высокую масштабируемость.
В экосистеме HERE Maps JavaScript API векторный рендеринг реализован через сценографическую модель (scene graph) и движок рендеринга, который интерпретирует стили сцены и применяет их к данным тайлов.
Векторный рендеринг в HERE Maps строится вокруг нескольких ключевых компонентов:
Основной принцип заключается в том, что данные не содержат визуального представления. Вместо этого используются правила, описывающие, как отображать каждую сущность карты: дороги, здания, водные объекты, подписи и т.д.
Стилизация векторной карты в HERE Maps основана на JSON-подобной структуре сцены. Она определяет:
Пример логики стиля:
Ключевой концепцией является data-driven styling, где свойства объектов напрямую влияют на их визуализацию.
Векторные тайлы представляют собой структурированные данные, обычно в формате protobuf или специализированном бинарном формате HERE. Каждый тайл содержит:
Рендерер выполняет следующие шаги:
Scene API является основным инструментом модификации визуального представления карты.
Ключевые возможности:
Пример логики изменения стиля дорог:
scene.config.layers.roads.draw.lines.color = "#ff0000";
scene.config.layers.roads.draw.lines.width = 2;Такой подход позволяет быстро адаптировать карту под задачи UI/UX без изменения источника данных.
Система стилей поддерживает фильтры, позволяющие управлять отображением объектов на основе их атрибутов.
Типовые условия:
Пример логики:
Фильтры позволяют строить адаптивные карты, оптимизированные под разные сценарии использования.
HERE Maps поддерживает добавление пользовательских слоёв поверх базовой карты.
Основные сценарии:
Кастомный слой может использовать:
Пример логики добавления слоя:
const layer = new H.map.layer.ObjectLayer(customProvider);
map.addLayer(layer);Векторный рендеринг использует WebGL как низкоуровневый слой отрисовки. Это позволяет:
Ключевые этапы пайплайна:
Особое значение имеет batching — объединение геометрии для снижения количества draw calls.
Одной из ключевых возможностей векторного рендеринга является 3D-экструзия зданий.
Каждое здание описывается:
Визуализация выполняется путём построения объёмной геометрии на лету.
Основные параметры:
При увеличении zoom увеличивается детализация и точность теней.
Zoom-dependent стилизация является критическим механизмом адаптации карты.
Типовые сценарии:
Логика может задаваться диапазонами:
Подписи (labels) являются отдельным слоем рендеринга и имеют собственную систему приоритетов.
Основные параметры:
Система автоматически решает, какие подписи показывать, чтобы избежать перегрузки интерфейса.
Темы определяют глобальный визуальный стиль карты:
Каждая тема содержит набор правил для всех типов объектов. Переопределение темы позволяет:
Одним из ключевых преимуществ векторного рендеринга является возможность изменения стиля в реальном времени.
Изменения могут применяться без перезагрузки данных:
Рендерер пересчитывает только затронутые части сцены, что обеспечивает высокую производительность.
Векторный рендеринг требует строгой оптимизации:
Особое значение имеет управление памятью GPU, особенно при отображении сложных сцен с 3D-объектами.
Векторная модель позволяет привязывать стили к пользовательским событиям:
Пример логики:
Карта может одновременно отображать:
Система объединяет их в единый сценический граф, применяя приоритеты:
Каждый элемент сцены может быть включён или отключён:
Это позволяет строить специализированные карты:
Рендеринг сцены сопровождается событиями:
Эти события используются для синхронизации внешней логики приложения с картографическим движком.
Сцена не пересоздаётся полностью при изменениях. Вместо этого применяется дифференциальное обновление:
Это обеспечивает плавную работу даже при сложных стилевых трансформациях.