Карта
Создание и удаление карты
Для создания карты предназначен класс YMap. В конструкторе класса необходимо указать:
- HTML-элемент, в котором будет размещена карта;
- координаты центра карты;
- коэффициент масштабирования.
<head>
<script>
ymaps3.ready.then(() => {
// HTML-элемент.
const map = new ymaps3.YMap(document.getElementById('first_map'), {
location: {
center: [37.588144, 55.733842],
zoom: 10
}
});
});
</script>
</head>
<body>
<p>Карта</p>
<div id="first_map" style="width:400px; height:300px"></div>
</body>
Карта может быть размещена в любом блочном HTML-элементе и полностью заполняет занимаемую им прямоугольную область. Вычисление размеров области производится при помощи ResizeObserver.
Для удаления карты из DOM используется метод destroy().
// Удаление карты.
map.destroy();
HTML-элемент, который был указан при создании карты, из DOM-дерева не удаляется.
Слои
Чтобы после создания карты на ней что-то отображалось, необходимо добавить слои.
Можно добавить преднастроенные слои. Через них создаются источник данных и слой для отображения схемы с тайлами Яндекса:
const layer = new YMapDefaultSchemeLayer();
map.addChild(layer);
Параметры карты
Основными параметрами карты являются:
- DOM-элемент, в котором размещается карта;
- участок отображаемой местности;
- режим отображения карты: растровый или векторный.
При создании карты необходимо обязательно задать область картографирования путем указания центра и уровня масштабирования. В дальнейшем область картографирования можно изменить с помощью метода setLocation().
map.setLocation({
center: [37.588144, 55.733842],
zoom: 5
});
map.setLocation({
bounds: [
[25.21, 55.27],
[25.23, 55.29]
]
});
Режим карты может быть задан как в конструкторе, так и с помощью метода setMode().
// Задание растрового режима в конструкторе.
const map = new YMap(element, {
// ... остальные опции.
mode: 'raster'
});
// Задание векторного режима с помощью метода setMode().
map.setMode('vector');
Поведения
Карта обладает набором поведений, определяющих реакцию карты на действия, производимые пользователем. Например, при перемещении курсора мыши в области показа при нажатой левой кнопке карта сдвигается вслед за курсором.
При инициализации карты ей присваивается набор поведений, который в дальнейшем можно изменить с помощью метода setBehaviors(). Доступ к поведениям карты предоставляется через поле behaviors.
const map = new YMap(element, {
// ... остальные опции
behaviors: ['drag', 'pinchZoom', 'mouseTilt']
});
map.setBehaviors(['drag', 'pinchZoom']);