Многоугольник

Класс YMaps.Polygon позволяет рисовать многоугольники на карте. Класс во многом схож с YMaps.Polyline, поскольку многоугольник представляет собой замкнутую ломаную и ограниченную ею часть плоскости.

• Добавление многоугольника на карту
• Задание стиля многоугольника

Добавление многоугольника на карту

Чтобы добавить многоугольник на карту, создайте объект класса YMaps.Polygon и передайте ему массив вершин многоугольника. Затем с помощью метода карты addOverlay() добавьте объект на карту.

var polygon = new YMaps.Polygon([ new YMaps.GeoPoint(37.7,55.7),
                                  new YMaps.GeoPoint(37.7,55.8),
                                  new YMaps.GeoPoint(37.8,55.8),
                                  new YMaps.GeoPoint(37.8,55.7),
                                  new YMaps.GeoPoint(37.7,55.7)
                                ]);

map.addOverlay(polygon);

Открыть пример в новом окне

Для многоугольников, состоящих из большого количества вершин, координаты удобнее записывать в закодированном виде и передавать их в метод fromEncodedPoints(). Процесс кодирования вершин многоугольника такой же, как у ломаной.

В режиме редактирования пользователю дается возможность изменять положение вершин многоугольника, удалять имеющиеся вершины и добавлять новые.

Задание стиля многоугольника

По умолчанию многоугольник отображается непрозрачным, с заливкой красного цвета. Стиль отображения можно изменить, задав следующие параметры:

• fill - флаг, определяющий наличие заливки;
• fillColor - цвет заливки (в формате RGBA);
• outline - флаг, определяющий наличие обводки;
• strokeColor - цвет линии обводки (в формате RGBA);
• strokeWidth - толщина линии обводки.

Последние две цифры в fillColor и strokeColor задают прозрачность.

Пример:

var style = new YMaps.Style();
style.polygonStyle = new YMaps.PolygonStyle();
style.polygonStyle.fill = true;
style.polygonStyle.outline = true;
style.polygonStyle.strokeWidth = 10;
style.polygonStyle.strokeColor = "ffff0088";
style.polygonStyle.fillColor = "ff000055";

polygon.setStyle(style);

Открыть пример в новом окне