Векторные карты в экосистеме HERE Technologies основаны на передаче географических данных в виде геометрических примитивов и атрибутов, а не готовых растровых изображений. Такой подход переносит процесс отрисовки на клиентскую сторону, позволяя динамически управлять стилями, слоями и детализацией без перезагрузки тайлов.
Ключевая особенность векторного подхода заключается в разделении данных и представления. Геометрия объектов хранится в виде:
Каждый объект сопровождается набором свойств (properties), которые используются для стилизации и фильтрации на стороне клиента.
В отличие от растровых карт, где изображение фиксировано, векторные тайлы допускают:
В JavaScript API платформы HERE Maps API for JavaScript векторные карты реализуются через систему слоёв (layers) и провайдеров данных (providers).
Базовая архитектура включает:
Векторный тайл представляет собой компактный бинарный формат (OMV — Optimized Map Vector), содержащий геометрию и атрибуты объектов для определённого географического квадрата и уровня масштаба.
Создание базовой векторной карты опирается на конфигурацию платформы и подключение слоя тайлов.
const platform = new H.service.Platform({
apikey: 'API_KEY'
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: { lat: 52.5200, lng: 13.4050 },
zoom: 10,
pixelRatio: window.devicePixelRatio
}
);
const beh * avior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);В данном контексте используется векторный слой
vector.normal.map, который загружает стилизованные
векторные тайлы и применяет стандартную тему отображения.
Каждый векторный тайл содержит несколько логических слоёв:
Каждый слой внутри тайла включает:
kind, name,
class, layer)Такая структура позволяет выполнять фильтрацию и стилизацию без изменения источника данных.
Стилизация векторных данных реализуется через декларативный стиль JSON-подобного формата, который описывает правила отображения объектов в зависимости от их свойств.
Пример базовой структуры стиля:
const style = {
"layers": {
"water": {
"draw": {
"fill": "blue"
}
},
"road": {
"draw": {
"lineWidth": 2,
"stroke": "#ffffff"
}
}
}
};Стиль применяется на уровне слоёв тайла, а не отдельных объектов, что обеспечивает высокую производительность даже при большом количестве геометрии.
Одним из ключевых преимуществ векторного подхода является возможность изменения визуального представления карты без перезагрузки данных.
const provider = new H.service.omv.Provider(defaultLayers.vector.normal.map.getProvider().getTileService(), {
style: new H.map.Style(style)
});
const vectorLayer = new H.map.layer.TileLayer(provider);
map.setBaseLayer(vectorLayer);Изменение параметров стиля позволяет:
Векторные данные содержат богатый набор атрибутов, которые используются в стилях для условной логики отображения.
Пример использования фильтрации:
"layers": {
"road": {
"filter": [
"==",
["get", "kind"],
"highway"
],
"draw": {
"lineWidth": 4,
"stroke": "#ff0000"
}
}
}В данном случае отображаются только объекты дорожной сети,
относящиеся к классу highway.
Фильтрация выполняется на клиентской стороне и не требует дополнительных запросов к серверу.
Векторные тайлы используют систему LOD (Level of Detail), при которой содержимое адаптируется под текущий масштаб карты.
Характер поведения:
Стиль может учитывать масштаб:
"layers": {
"building": {
"minZoom": 15,
"draw": {
"fill": "#cccccc"
}
}
}Векторный подход переносит основную нагрузку на GPU и позволяет эффективно обрабатывать большие объёмы данных.
Основные факторы производительности:
В JavaScript API используется аппаратное ускорение для отрисовки линий, полигонов и текстовых подписей.
Векторная модель позволяет добавлять собственные слои поверх базовой карты.
Пример добавления слоя объектов:
const dataPoints = [
{ lat: 52.52, lng: 13.405 },
{ lat: 52.51, lng: 13.40 }
];
dataPoints.forEach(point => {
const marker = new H.map.Marker(point);
map.addObject(marker);
});Хотя маркеры не являются частью векторного тайла, они интегрируются в ту же сцену рендеринга и подчиняются общей системе координат.
Векторные карты позволяют работать с событиями взаимодействия на уровне геометрии.
Поддерживаемые действия:
Пример обработки события:
map.addEventListener('tap', function (evt) {
const target = evt.target;
if (target instanceof H.map.Polygon) {
console.log('Объект полигона выбран');
}
});Интерактивность обеспечивается через сопоставление экранных координат с векторной геометрией.
Векторная архитектура позволяет создавать специализированные визуальные представления:
Каждая тема реализуется через модификацию слоёв и правил отрисовки без изменения исходных данных.
Несмотря на гибкость, векторные карты имеют особенности:
Эти факторы компенсируются масштабируемостью и гибкостью отображения, особенно в приложениях с динамическими сценариями использования.