Объекты на карте
В API Яндекс Картесть возможность добавлять на карту различные объекты:
- источники данных;
- слои;
- геообъекты;
- маркеры.
Источники данных
API Яндекс Карт разделяет несколько источников данных:
- тайловый источник;
- источник для геообъектов.
Тайловый источник данных
Представляет собой класс 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
}
})
);
Источник данных для геообъектов
Представляет собой класс YMapFeatureDataSource.
Пример создания:
map.addChild(
new YMapFeatureDataSource({
id: 'featureSource'
})
);
Слои
Представляют собой аналогию слоеного пирога. Каждый экземпляр YMapLayer может отображаться над/под другим экземпляром того же класса.
Очередность отображения можно задавать порядком добавления на карту, а также через параметр zIndex (по умолчанию используется значение, указанное в YMapLayer.defaultProps.zIndex).
Внимание
Слой является отбражением того или иного источника данных, поэтому источник важно добавлять на карту до добавления слоя.
Примеры создания:
map.addChild(
new YMapLayer({
source: 'urlSource',
type: 'tiles'
})
);
map.addChild(
new YMapLayer({
source: 'tileGeneratorSource',
type: 'tiles',
zIndex: 2000,
raster: {
// Опция позволяет дожидаться загрузки всех видимых на экране тайлов до отображения.
awaitAllTilesOnFirstDisplay: true,
// Опция задаёт продолжительность анимации отображения загруженных тайлов
tileRevealDuration: 0
}
})
);
map.addChild(
new YMapLayer({
source: 'markerSource',
type: 'markers',
zIndex: 2020
})
);
map.addChild(
new YMapLayer({
source: 'featureSource',
type: 'features',
zIndex: 2010
})
);
Соответственно, порядок отображения будет следующий:
urlSourcetileGeneratorSourcefeatureSourcemarkerSource
Также для удобства использования предусмотрены слои по умолчанию:
YMapDefaultSchemeLayer— объединяет в себе тайловый источник данных и набор слоев для отображения схематической карты Яндекса.YMapDefaultFeaturesLayer— объединяет в себе источник данных для геообъектов и слой его отображения. Также добавляет слой для отображения DOM элементов.
Геообъекты
Геообъекты в API представлены двумя типами: ломаная линия и полигон.
Каждый объект описывается геометрией, которая задается типом и координатами, а также стилем отображения. Например, управление цветом фигуры или толщиной линий.
Ломаная линия
Тип: LineString.
Пример использования:
const lineStringFeature = new YMapFeature({
id: 'line',
source: 'featureSource',
geometry: {
type: 'LineString',
coordinates: [
[25.1229762, 55.189311],
[25.329762, 55.389311]
]
},
style: {
stroke: [{width: 12, color: 'rgb(14, 194, 219)'}]
}
});
map.addChild(lineStringFeature);
Полигон
Тип: Polygon.
Пример использования:
const polygonFeature = new YMapFeature({
id: 'polygon',
source: 'featureSource',
geometry: {
type: 'Polygon',
coordinates: [
[
[25.029762, 55.189311],
[25.229762, 55.289311],
[25.329762, 55.389311]
]
]
},
style: {
stroke: [{width: 6, color: 'rgb(14, 194, 219)'}],
fill: 'rgba(56, 56, 219, 0.5)'
}
});
map.addChild(polygonFeature);
Маркеры
Маркер представляет собой HTML-контейнер, привязанный к точке на карте. Таким образом на карте можно отобразить произвольную верстку.
Пример использования:
const markerElement = document.createElement('div');
markerElement.className = 'marker-class';
markerElement.innerText = "I'm marker!";
const marker = new YMapMarker(
{
source: 'markerSource',
coordinates: [37.588144, 55.733842],
draggable: true,
mapFollowsOnDrag: true
},
markerElement
);
map.addChild(marker);