YMapTileDataSource

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

Использование объекта

Основным вариантом использования класса является отображение тайлов по ссылке:

const map = new YMap(element, {
  location: { center: [37.588144, 55.733842], zoom: 14},
  mode: 'vector'
});

map.addChild(
  new YMapTileDataSource({
    id: 'urlSource',
    raster: {
      type: 'tiles',
      // x, y — координаты тайла;
      // z — масштаб (зум);
      // scale — масштабирование для различных DevicePixelRatio.
      fetchTile: 'https://sitename.com/?x=x&y=y&z=z&scale=scale'
    }
  })
);

Более расширенным вариантом использования служит ипользование в качестве параметра raster.fetchTile асинхронной функции, которая возвращает HTMLImageElement или HTMLCanvasElement:

const tileSize = 256;

async function fetchTile(tileX, tileY, tileZ) {
  const canvas = document.createElement('canvas');
  canvas.width = tileSize;
  canvas.height = tileSize;
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#000000';
  ctx.fillText(`${tileX}:${tileY}:${tileZ}`, 10, 10);

  return {image: canvas};
}

map.addChild(
  new YMapTileDataSource({
    id: 'tileGeneratorSource',
    raster: {
      type: 'tiles',
      fetchTile: fetchTile,
      fetchHotspots: fetchHotspots,
      transparent: true,
      size: tileSize
    }
  })
);

Пример

К примеру, вы хотите отобразить на карте тайлы, полученные с сайта https://sitename.com:

const {YMap, YMapTileDataSource, YMapLayer} = ymaps3;

// Инициализируйте карту
const map = new YMap({...});

// Инициализируйте источник данных
const tileDataSource = new YMapTileDataSource({
  id: 'someSource',
  raster: {
    type: 'someType',
    fetchTile: 'https://sitename.com/?x=x&y=y&z=z&scale=scale'
  }
});

// Добавьте источник данных на карту
map.addChild(tileDataSource);

// Создайте слой с полученными данными
const layer = new YMapLayer({
  zIndex: 1,
  source: 'someSource',
  type: 'someType'
});

// Добавьте этот слой на карту
map.addChild(layer);

Примечание

Для связи источника данных и слоя используется текстовый идентификатор. Будьте внимательны, идентификатор для источника данных задается в поле id, а при передаче в слой используется поле source.

Конструктор

new YMapTileDataSource(props)

Параметры конструктора

Параметр

Тип

Описание

props

YMapTileDataSourceProps

Значение входных props.

Унаследовано от

YMapEntity.constructor

Props

YMapTileDataSourceProps: Object

Параметры

Параметр

Тип

Описание

clampMapZoom?

boolean

Ограничьте минимальное и максимальное масштабирование карты. Результирующий диапазон масштабирования карты будет совпадать с диапазоном масштабирования карты и всех источников данных при включенной опции clamp Map Zoom.

copyrights?

string[]

Авторские права на источники данных.

id

string

Z-индекс слоя.

raster?

RasterTileDataSourceDescription

Описание источника растровых данных.

zoomRange?

ZoomRange

Минимальное и максимальное увеличение для тайлов.

Методы

update

update(changedProps): void

Метод обновления параметров.

Параметры

Параметр

Тип

Описание

changedProps

Partial<YMapTileDataSourceProps>

Новые значения props.

Возвращается

void

Унаследовано от

YMapEntity.update

Предыдущая
Следующая