Объекты на карте
Географическим объектам реального мира ставятся в соответствие программные объекты — геообъекты. К геообъектам относятся метки, круги, ломаные, прямоугольники, многоугольники, а также их коллекции.
Каждый геообъект описывается геометрией, которая задается геометрическим типом и географическими координатами.
Базовым классом, реализующим геообъект является GeoObject.
Экземпляр карты размещает геообъекты в собственном хранилище, реализованном в виде коллекции, ссылка на которую находится в поле geoObjects. Добавление геообъекта на карту, его изменение и удаление производится с помощью обращения к этой коллекции.
var myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 10
}),
myGeoObject = new ymaps.GeoObject({
geometry: {
type: "Point",// тип геометрии - точка
coordinates: [55.8, 37.8] // координаты точки
}
});
myMap.geoObjects.add(myGeoObject); // Размещение геообъекта на карте.
Для каждого типа геометрии определен вспомогательный класс, предоставляющий упрощенный синтаксис для создания геообъекта.
// Вспомогательный класс, который можно использовать
// вместо GeoObject c типом геометрии «Point» (см. предыдущий пример)
var myPlacemark = new ymaps.Placemark([55.8, 37.6]);
myMap.geoObjects.add(myPlacemark);
Геометрия геообъекта
В следующей таблице приведен список геометрий, их идентификаторов, используемых в классе GeoObject и соответствующих вспомогательных классов.
Тип геометрии / Идентификатор/ Вспомогательный класс |
Пример |
Точка / Point / Placemark |
Создание метки с помощью класса
Создание метки c помощью вспомогательного класса
|
Ломаная линия / LineString / Polyline |
Создание ломаной с помощью класса
Создание ломаной c помощью вспомогательного класса
|
Прямоугольник / Rectangle / Rectangle |
Создание прямоугольника с помощью класса
Создание прямоугольника c помощью вспомогательного класса
|
Многоугольник / Polygon / Polygon |
Создание многоугольника с помощью класса
Создание многоугольника c помощью вспомогательного класса
|
Круг / Circle / Circle |
Создание круга с помощью класса
Создание круга c помощью вспомогательного класса
|
Тип геометрии присваивается геообъекту в момент его создания и не может быть изменен в дальнейшем. При этом координаты геометрии могут быть изменены как программно, так и пользователем с помощью визуального редактора.
var myPlacemark = new ymaps.Placemark(
[55.754952, 37.615319],
{},
{
draggable: true, // метку можно перемещать
preset: 'twirl#whiteStretchyIcon'
}
);
myPlacemark.events.add('dragend', function(e) {
// Получение ссылки на объект, который был передвинут.
var thisPlacemark = e.get('target');
// Определение координат метки
var coords = thisPlacemark.geometry.getCoordinates();
// и вывод их при щелчке на метке
thisPlacemark.properties.set('balloonContent', coords);
});
Если геообъект был инициализирован без указания геометрии, то он не будет отображаться на карте. Присвоить тип геометрии такому геообъекту также будет невозможно.
Визуальное редактирование
Географические свойства геообъекта могут быть изменены пользователем в визуальном режиме. Для этого API предоставляет два способа: перемещение геообъекта как целого и визуальный редактор.
За возможность перетаскивания геообъекта как целого отвечает опция draggable
, которая может принимать значения true
и false
.
Визуальный редактор доступен для геообъектов с типом геометрии точка, ломаная и многоугольник. Ссылка на редактор содержится в поле editor экземпляра соответствующего класса.
|
|
Задание стиля метки
API предоставляет возможность выбрать стиль для значка метки из набора встроенных стилей. С помощью стилей задается цвет значка метки, а также его тип (например, значок без содержимого или значок, растягивающийся под контент).
Каждому стилю из набора ставится в соответствие уникальный ключ. Для того, чтобы установить нужный стиль, следует указать в качестве значения опции preset
соответствующий ключ:
|
|
Примечание
Стилем по умолчанию является 'twirl#blueIcon'
.
В качестве значка метки можно использовать также собственное изображение. Для этого необходимо в опции iconImageHref
указать URL графического файла значка. При необходимости можно указать опции icon_imagesize
и iconImageOffset
— размер изображения и его сдвиг относительно точки привязки соответственно.
|
|
Если же на карту необходимо добавить большое число меток с разными пользовательскими значками, то целесообразно использовать технологию CSS спрайтов. Суть технологии заключается в том, что все изображения объединяются в одном графическом файле - спрайте. Посредством CSS нужное изображение извлекается из спрайта и устанавливается в качестве значка определенной метки.
Ниже приведен пример спрайта, содержащего три изображения:
Для того, чтобы установить нужное изображение в качестве значка метки, необходимо данной метке задать следующие опции:
iconImageCliptRect
— позиция нужного изображения в спрайте. Определяется пиксельными координатами левого верхнего и правого нижнего углов прямоугольника, в котором размещается изображение.iconImageHref
— URL спрайта;
При необходимости можно указать опции icon_imagesize
и iconImageOffset
.
|
|
Примечание
С помощью спрайтов можно задавать изображения также и для других объектов, добавляемых на карту (например, для кластеров или элементов управления).
Использование технологии спрайтов позволяет сократить число HTTP-запросов к серверу, так как вместо большого числа изображений загружается только одно.
Подробнее о задании стиля для иконок меток см. в примере.
Коллекции геообъектов
Геообъекты могут объединяться в коллекции, которые позволяют определять свойства сразу всех своих членов и проводить групповые операции над ними.
В API Яндекс.Карт реализовано два вида коллекций: упорядоченные (GeoObjectArray) и неупорядоченные (GeoObjectCollection). Первые реализованы на основе массивов, вторые — на основе двусвязных списков.
Геообъект может принадлежать только одной коллекции. При добавлении геообъекта, принадлежащего одной коллекции, в другую коллекцию, он будет удален из первой.
При реализации собственных коллекций на основе этих классов рекомендуется использовать неупорядоченные коллекции во всех случаях, когда нет необходимости обращаться к элементу по порядковому номеру. Удаление элементов из неупорядоченной коллекции производится значительно быстрее, чем из упорядоченной.
|
|
Класс коллекции, которая может быть размещена на карте, должен реализовывать интерфейс IMapObjectCollection. Все упомянутые коллекции реализуют этот интерфейс и могут быть отображены на карте.
Кластеры
Точечные геообъекты могут находиться настолько близко друг другу, что на каком-то масштабе их метки начинают накладываться друг на друга. В этом случае пользователю приходится тщательно «прицеливаться», чтобы попасть курсором мыши на видимый фрагмент нужной метки. Существует даже специальный термин, описывающий эффекты такого рода — pixel hunting (пиксель-хантинг).
|
|
Если метки находятся в одной точке и размеры их иконок совпадают, то наведение на перекрытые метки невозможно в принципе.
Стандартным способом решения проблемы является объединение близко расположенных объектов в группу (кластер) и использование для группы специальной кластерной иконки. Часто на иконке кластера указывается число содержащихся в нем элементов.
Для кластеризации объектов в API Яндекс.Карт используется класс Clusterer.
|
|
При увеличении масштаба кластер визуально распадается на отдельные метки и/или другие кластеры.
При щелчке на иконке кластера может произойти либо увеличение коэффициента масштабирования либо открытие балуна, в котором будет отображен список геообъектов кластера. Это поведение контролируется с помощью опции clusterDisableClickZoom
(true/false).
|
|
Примечание
Если при отображении кластера коэффициент масштабирования карты является максимальным, то кластер не будет распадаться на отдельные метки при щелчке на его маркере. В этом случае независимо от значения параметра clusterDisableClickZoom
всегда будет открываться балун.
Таким образом, отобразить информацию о близко расположенных геообъектах можно даже в том случае, если их метки накладываются друг на друга при максимальном коэффициенте масштабирования.
Использование кластеризатора позволяет значительно увеличить производительность при отображении большого количества геообъектов в браузере.
Отрисовка и обработка геообъекта — дорогостоящая с точки зрения потребления ресурсов операция, и чем больше объектов кластеризуется, тем больше ресурсов экономится. Сильное снижение производительности наблюдается уже при отображении нескольких сотен объектов без кластеризации.