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: Object
Параметры
|
Параметр |
Тип |
Описание |
|
|
|
Ограничьте минимальное и максимальное масштабирование карты. Результирующий диапазон масштабирования карты будет совпадать с диапазоном масштабирования карты и всех источников данных при включенной опции |
|
|
|
Авторские права на источники данных. |
|
|
|
Z-индекс слоя. |
|
|
Описание источника растровых данных. |
|
|
|
Минимальное и максимальное увеличение для тайлов. |
Методы
update
update(changedProps): void
Метод обновления параметров.
Параметры
|
Параметр |
Тип |
Описание |
|
|
Новые значения |
Возвращается
void