API Яндекс.Карт изучаем работу с многоугольниками.

Автор: | 15.09.2009

API Яндекс.Карт изучаем работу с многоугольниками.

В версии API Яндекс.Карт 1.1 появился новый тип оверлея – многоугольники.

В этой заметке я хочу познакомить Вас с тем, как можно с ними работать.

За рисование многоугольника на карте отвечает класс YMaps.Polygon.

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

Для отображения многоугольника на карте необходимо создать объект класса YMaps.Polygon и передать ему массив вершин многоугольника.

Например:

var polygon = new YMaps.Polygon([ new YMaps.GeoPoint(44.074052,56.30871),
new YMaps.GeoPoint(44.074995,56.307946),
new YMaps.GeoPoint(44.074842,56.307851),
new YMaps.GeoPoint(44.076262,56.306717),
new YMaps.GeoPoint(44.077959,56.306862),
new YMaps.GeoPoint(44.078436,56.307007),
new YMaps.GeoPoint(44.078606,56.306877),
new YMaps.GeoPoint(44.078822,56.306223),
new YMaps.GeoPoint(44.077924,56.306153),
new YMaps.GeoPoint(44.077879,56.306248),
new YMaps.GeoPoint(44.077429,56.306213),
new YMaps.GeoPoint(44.077429,56.306083),
new YMaps.GeoPoint(44.075004,56.305879),
new YMaps.GeoPoint(44.074959,56.306023),
new YMaps.GeoPoint(44.074339,56.305973),
new YMaps.GeoPoint(44.072579,56.307417),
new YMaps.GeoPoint(44.072318,56.307367),
new YMaps.GeoPoint(44.072084,56.307546),
new YMaps.GeoPoint(44.072731,56.307846),
new YMaps.GeoPoint(44.072471,56.308071)
]);
 
polygon.name = "ТРЦ Фантастика";
polygon.description = "Новый торговый центр"; 
 
map.addOverlay(polygon);

Посмотреть пример в действии

Для многоугольника можно задавать стиль отображения.

По умолчанию он отображается непрозрачным, красного цвета, с заливкой 100%.

Стиль задается двумя параметрами: цвет (в системе RGB) и прозрачность.

Изменим наш пример, задав собственный стиль отображения.

var polygon = new YMaps.Polygon([ new YMaps.GeoPoint(44.074052,56.30871),
 new YMaps.GeoPoint(44.074995,56.307946),
 new YMaps.GeoPoint(44.074842,56.307851),
 new YMaps.GeoPoint(44.076262,56.306717),
 new YMaps.GeoPoint(44.077959,56.306862),
 new YMaps.GeoPoint(44.078436,56.307007),
 new YMaps.GeoPoint(44.078606,56.306877),
 new YMaps.GeoPoint(44.078822,56.306223),
 new YMaps.GeoPoint(44.077924,56.306153),
 new YMaps.GeoPoint(44.077879,56.306248),
 new YMaps.GeoPoint(44.077429,56.306213),
 new YMaps.GeoPoint(44.077429,56.306083),
 new YMaps.GeoPoint(44.075004,56.305879),
 new YMaps.GeoPoint(44.074959,56.306023),
 new YMaps.GeoPoint(44.074339,56.305973),
 new YMaps.GeoPoint(44.072579,56.307417),
 new YMaps.GeoPoint(44.072318,56.307367),
 new YMaps.GeoPoint(44.072084,56.307546),
 new YMaps.GeoPoint(44.072731,56.307846),
 new YMaps.GeoPoint(44.072471,56.308071)
], {
    style: "polygon#Example",
    hasHint: 1,
    hasBalloon: 1
});
 
polygon.name = "ТРЦ Фантастика";
polygon.description = "Новый торговый центр"; 
 
map.addOverlay(polygon);

Посмотреть пример в действии

Две последние цифры в strokeColor задают прозрачность заливки многоугольника.

И в заключении приведу еще один пример использования многоугольников – Районы Нижннего Новгорода.

Смотреть пример.

API Яндекс.Карт изучаем работу с многоугольниками.: 7 комментариев

  1. dmitry

    как вы определяли координаты для Районы Нижннего Новгорода., неужели это все в ручную или есть какой то способ более простого построения нежели определение координат всех точек по одной?

    1. admin Автор записи

      У меня имелся слой с районами Нижнего Новгорода в формате программы MapInfo, для примера я взял от туда координаты для границ

  2. Алекс

    Встал вопрос с определением площади полигона. В Google Maps есть функция getArea()…
    есть ли аналогичная функция в Яндекс Картах? Перерыд документацию, и к сожалению ничего не нашел…

  3. Marat

    Такой вопро автору, какое максимальное число точек для полигона ты использовал в своей практике?

  4. Marat

    Ясно.
    Не в курсе, как будет работать (в плане производительности в расчете на средний комп) около 5-10 полигонов, сумарно на 700 — 1000 точек?
    Просто данные для отрисовки получу не скоро, а на сколько это будет тормознуто, хотелосьбы узнать уже сейчас )

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *