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

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 задают прозрачность заливки многоугольника.

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

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

  • Гость: как вы определяли координаты для Районы Нижннего Новгорода., неужели это все в ручную или есть какой то способ более простого построения нежели определение координат всех точек по одной?
  • Гость: У меня имелся слой с районами Нижнего Новгорода в формате программы MapInfo, для примера я взял от туда координаты для границ
  • Гость: Встал вопрос с определением площади полигона. В Google Maps есть функция getArea()... есть ли аналогичная функция в Яндекс Картах? Перерыд документацию, и к сожалению ничего не нашел...
  • Гость: К сожалению данной функции нет. Как решить данную проблему обсуждалось в <a href="http://clubs.ya.ru/mapsapi/replies.xml?item_no=8582" target="blank" rel="nofollow">клубе Яндекс.Карт</a>
  • Гость: Такой вопро автору, какое максимальное число точек для полигона ты использовал в своей практике?
  • Гость: Около 100
  • Гость: Ясно. Не в курсе, как будет работать (в плане производительности в расчете на средний комп) около 5-10 полигонов, сумарно на 700 - 1000 точек? Просто данные для отрисовки получу не скоро, а на сколько это будет тормознуто, хотелосьбы узнать уже сейчас )