Слой активных областей

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

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

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

Технология активных областейТехнология активных областей

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

Для того чтобы объекты стали интерактивными, то есть могли взаимодействовать с пользователем, поверх картиночного слоя на карту рисуется слой активных областей. Он предоставляет API сведения о том, какие участки карты должны быть интерактивными.

Интерактивный участок карты называется активной областью и представляется одной или несколькими простейшими геометрическими фигурами. Активная область является абстрактным понятием, на карте она не видна.

Слой активных областей содержит информацию об активных областях — их позицию, типы их геометрий, а также некоторые свойства. Эта информация представляется в формате JSON.

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

Слой активных областей обменивается данными с сервером с помощью YMapTileDataSource. В настройки источника данных можно реализовать callback-функцию fetchHotspots, в которой отправляется запрос за информацией об активных областях нужного тайла и возвращает данные слою.

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

Описания активных областейОписания активных областей

Описания активных областей должны быть сформированы отдельно для каждого тайла и для всех уровней масштабирования.

Позиция фигуры задается в пиксельных координатах относительно левого верхнего угла соответствующего тайла.

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

Хранение данных об активных областяхХранение данных об активных областях

API не имеет строгих условий как хранить данные об активных областях. В callback-функции fetchHotspots можно реализовать собственную логику получения этих данных.

Обычно описание активных областей для каждого тайла можно хранить в отдельном файле и расположить их на сервере, и обращаться к нему каждый раз, когда необходимо получить данные для нужного тайла:

fetchHotspots: async (x, y, zoom) => {
  // формируем url для запроса данных об активных областях в выбранном тайле
  const url = `http://server.domain/${zoom}/${x}/${y}`;

  // получаем данные об активных областях в выбранном тайле в виде массива
  const hotspotTileData = await (await fetch(url)).json();

  // возвращаем данные в формате, который ожидает слой активных областей
  return hotspotTileData.map((data) => {
    return {
      // Тип hotspot. Тип 'renderer' - означает что используются пиксельные координаты
      type: 'rendered',
      feature: {
        // Идентификатор активной области
        id: data.id,
        type: 'Feature',
        // Свойства активной области. Может содержать произвольные данные
        properties: data.properties,
        // Геометрия активной области в LngLat координатах. Формат аналогичен geojson geometry
        geometry: data.geometry
      },
      // Геометрия активной области в пиксельных координатах. Формат аналогичен geojson geometry
      geometry: {
        // Тип пиксельной геометрии
        type: data.pixelGeometry.type,
        // Пиксельные координаты геометрии
        coordinates: data.pixelGeometry.coordinates
      }
    };
  });
};

Подробный пример можно посмотреть по ссылке.