Рисуем многоугольник на карте, с помощью API Яндекс.Карт 2.х

В этой заметке я хочу познакомить Вас с возможностями построения многоугольников на карте, с помощью API Яндекс.Карт 2.х.

Рассмотрим несколько примеров с пояснением.

1. Построение многоугольника по заданным координатам.

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

Рассмотрим код примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Построение многоугольника по заданным координатам - API Яндекс.Карт v 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.317655,43.994362],
                    zoom: 15
                }),
                // Создаем многоугольник
               myPolygon = new ymaps.Polygon([[
                    // Координаты вершин внешней границы многоугольника.
			[56.316797,43.987925],
			[56.316177,43.990586],
			[56.316224,43.995564],
			[56.317703,44.002258],
			[56.319182,44.003288],
			[56.318943,43.997194],
			[56.318514,43.996679],
			[56.320803,43.990071]
                ]]);
 
            myMap.geoObjects               
                .add(myPolygon);
        }
    </script>
</head>
 
<body>
<h2>Построение многоугольника по заданным координатам</h2>
 
<div id="map" style="width:800px; height:600px"></div>
</body>
 
</html>

Здесь все предельно просто.

Мы создаем новый объект Polygon и передаем ему значения координат вершин многоугольника.

А затем добавляем его на карту.

Можно определять многоугольник как геообъект, с типом геометрии «полигон» :

myGeoObject = new ymaps.GeoObject({
// Геометрия.
 geometry: {
// Тип геометрии - полигон.
type: "Polygon",
 // Координаты.
coordinates: [
       [
        [56.316797,43.987925],
	[56.316177,43.990586],
	[56.316224,43.995564],
	[56.317703,44.002258],
	[56.319182,44.003288],
	[56.318943,43.997194],
	[56.318514,43.996679],
	[56.320803,43.990071]
     ]
    ]
   }
});

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

2. Построение многоугольника с заданными стилями

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

Рассмотрим код примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Построение многоугольника с заданными стилями - API Яндекс.Карт v 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.317655,43.994362],
                    zoom: 15
                }),
                // Создаем многоугольник
               myPolygon = new ymaps.Polygon([[
                    // Координаты вершин внешней границы многоугольника.
			[56.316797,43.987925],
			[56.316177,43.990586],
			[56.316224,43.995564],
			[56.317703,44.002258],
			[56.319182,44.003288],
			[56.318943,43.997194],
			[56.318514,43.996679],
			[56.320803,43.990071]
                ]], {
                    //Свойства
                    hintContent: "Многоугольник"
                }, {
                    // Опции.
                    // Цвет заливки (красный)
                    fillColor: '#FF0000',
                    // Цвет границ (синий)
                    strokeColor: '#0000FF',
                    // Прозрачность (полупрозрачная заливка)
                    opacity: 0.6,
                    // Ширина линии
                    strokeWidth: 5,
                    // Стиль линии
                    strokeStyle: 'shortdash'
                });
 
 
            myMap.geoObjects               
                .add(myPolygon);
        }
    </script>
</head>
 
<body>
<h2>Построение многоугольника с заданными стилями</h2>
 
<div id="map" style="width:800px; height:600px"></div>
</body>
 
</html>

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

цвет заливки — красный (fillColor: ‘#FF0000’) ;
цвет границы — синий (strokeColor: ‘#0000FF’);

прозрачность заливки многоугольника (opacity: 0.6);

ширина линии обводки (strokeWidth: 5);

стиль линии обводки (strokeStyle: ‘shortdash’).

В API имеется возможность построения многоугольников с полостями (отверстиями в многоугольнике).

3. Построение многоугольника с полостью

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

Рассмотрим код примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Построение многоугольника с полостью - API Яндекс.Карт v 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.317655,43.994362],
                    zoom: 15
                }),
                // Создаем многоугольник
               myPolygon = new ymaps.Polygon([[
                    // Координаты вершин внешней границы многоугольника.
			[56.316797,43.987925],
			[56.316177,43.990586],
			[56.316224,43.995564],
			[56.317703,44.002258],
			[56.319182,44.003288],
			[56.318943,43.997194],
			[56.318514,43.996679],
			[56.320803,43.990071]
                ],
 
				// Координаты вершин внутренней границы многоугольника.
                            [
                                [56.317536,43.991337],
				[56.319039,43.992839],
				[56.319039,43.993783],
				[56.318574,43.994233],
				[56.317274,43.992903]
                            ]
 
				], {
                    //Свойства
                    hintContent: "Многоугольник"
                }, {
                    // Опции.
                    // Цвет заливки (красный)
                    fillColor: '#FF0000',
                    // Цвет границ (синий)
                    strokeColor: '#0000FF',
                    // Прозрачность (полупрозрачная заливка)
                    opacity: 0.6,
                    // Ширина линии
                    strokeWidth: 5,
                    // Стиль линии
                    strokeStyle: 'shortdash'
                });                
 
            myMap.geoObjects              
                .add(myPolygon);
        }
    </script>
</head>
 
<body>
<h2>Построение многоугольника с полостью</h2>
 
<div id="map" style="width:800px; height:600px"></div>
</body>
 
</html>

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

Следующий пример демонстрирует возможность рисования многоугольника.

4. Режим рисования многоугольника

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

Рассмотрим код примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Режим рисования многоугольника - API Яндекс.Карт v 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.317655,43.994362],
                    zoom: 15
                }),
                polygon = new ymaps.GeoObject({
        geometry: {
            type: "Polygon",
            coordinates: []
        }
    });
 
    myMap.geoObjects.add(polygon);
    polygon.editor.startDrawing();
        }
    </script>
</head>
 
<body>
<h2>Режим рисования многоугольника</h2>
 
<div id="map" style="width:800px; height:600px"></div>
</body>
 
</html>

В этом примере мы сначала создаем объект polygon с пустым массивом координат, добавляем его на карту.

А затем включаем режим рисование

polygon.editor.startDrawing();

Последовательно кликая по карте, мы задаем вершины нашего многоугольника.

Мы можем добавить полость в многоугольник, если щелкнуть мышью по одному из узлов многоугольника, обозначенного квадратиком и в появившимся меню выбрать пункт «Добавить внутренний контур».

5. Пример рисования многоугольника с выводом координат

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

Рассмотрим код примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример рисования многоугольника с выводом координат - API Яндекс.Карт v 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
	<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>		
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [56.317655,43.994362],
                    zoom: 15
                }),
                polygon = new ymaps.GeoObject({
        geometry: {
            type: "Polygon",
            coordinates: []
        }
    });
 
    myMap.geoObjects.add(polygon);
    polygon.editor.startDrawing();
 
	$('input').attr('disabled', false);
 
            // Обработка нажатия на любую кнопку.
            $('input').click(
                function () {
                    // Отключаем кнопки, чтобы на карту нельзя было
                    // добавить более одного редактируемого объекта (чтобы в них не запутаться).
                    $('input').attr('disabled', true);
 
                    polygon.editor.stopEditing();
 
					printGeometry(polygon.geometry.getCoordinates());
 
                });	
 
 
        }
 
		// Выводит массив координат геообъекта в <div id="geometry">
        function printGeometry (coords) {
            $('#geometry').html('Координаты: ' + stringify(coords));
 
            function stringify (coords) {
                var res = '';
                if ($.isArray(coords)) {
                    res = '[ ';
                    for (var i = 0, l = coords.length; i < l; i++) {
                        if (i > 0) {
                            res += ', ';
                        }
                        res += stringify(coords[i]);
                    }
                    res += ' ]';
                } else if (typeof coords == 'number') {
                    res = coords.toPrecision(6);
                } else if (coords.toString) {
                    res = coords.toString();
                }
 
                return res;
            }
        }
 
 
    </script>
</head>
 
<body>
<h2>Пример рисования многоугольника с выводом координат</h2>
 
<div id="map" style="width:800px; height:600px"></div>
<input type="button" value="Завершить редактирование" id="stopEditPolyline"/>
<div id="geometry"/></div>
</body>
 
</html>

Мы также ка и в предыдущим примере рисуем многоугольник, после завершения нажимаем на кнопку «Завершить редактирование», координаты выводятся в виде строки под картой.

В этом примере мы используем JavaScript – библиотеку jQuery, подключая ее из хранилища скриптов Яндекса строкой:

<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

При нажатии на кнопку «Завершить редактирование», вызывается функция в которой завершается режим редактирования

polygon.editor.stopEditing();

А также вызывается функция для вывода значений координат printGeometry (взята из примера здесь ).

Сама кнопка становиться неактивной.

6. Простейший редактор для рисования многоугольников

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

Для ввода параметров с права от окна с картой добавим форму для их ввода, а также три кнопки: добавить, удалить и завершить редактирование.

Рассмотрим работу готового примера, а затем я поясню его код.

В самом начале мы должны ввести в форму необходимые параметры многоугольника, например, толщина линии обводки — 3, необходимый нам цвет самого многоугольника и обводки, используя в качестве инструмента выбора возможности плагина jQuery SimpleColor и уровень прозрачности 1 для многоугольника, 0.8 — для обводки.

Нажимаем на кнопку «Добавить»

Кликая по карте, стоим ломаную нужной формы.

Если нас что-то не устраивает, мы можем нажать на кнопку «Удалить» и начать новое построение с кнопки «Добавить».

После того, ка необходимый полигон построен, нажимаем на кнопу «Завершить редактирование» для вывода значений координат.

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

Рассмотрим код примера

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Простейший редактор для рисования многоугольников - API Яндекс.Карт v 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.simple-color.min.js"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
		var polygon;
 
        function init () {
 
		$('#color_polygon').simpleColor();
 
		$('#color_line').simpleColor();
 
            var myMap = new ymaps.Map("map", {
                    center: [56.317655,43.994362],
                    zoom: 15
                });
 
	//Добавляем элементы управления	
			 myMap.controls                
                .add('zoomControl')               
                .add('typeSelector')                
                .add('mapTools');
 
   // Обработка нажатия на кнопку Добавить
            $('#addPolygon').click(
                function () {
 
				$('#stopEditPolygon').attr('disabled', false);
 
 
				var color_polygon = $('#color_polygon').attr('value');
				var fillopacity_polygon = $('#fillopacity_polygon').attr('value');
 
				var width_line = $('#width_line').attr('value');
				var color_line = $('#color_line').attr('value');
				var opacity_line = $('#opacity_line').attr('value');
 
				polygon = new ymaps.Polygon([[]],
 
        {},		
		{
 
                    fillColor: color_polygon,
 
                    strokeColor: color_line,
 
                    opacity: fillopacity_polygon,
 
					strokeOpacity: opacity_line,
 
                    strokeWidth: width_line
		});
 
 
 
				myMap.geoObjects.add(polygon);
				polygon.editor.startDrawing();
 
				$('#addPolygon').attr('disabled', true);			
 
	});	
			// Обработка нажатия на кнопку Завершить редактирование	
			$('#stopEditPolygon').click(
                function () {	
 
				polygon.editor.stopEditing();
				printGeometry(polygon.geometry.getCoordinates());
				$('#stopEditPolygon').attr('disabled', true);
 
			});	
 
 
			// Обработка нажатия на кнопку Удалить
			$('#dellPolygon').click(
                function () {	
 
				myMap.geoObjects.remove(polygon);
				$('#geometry').html('');
				$('#addPolygon').attr('disabled', false);
			});
 
        }
 
 
 
		// Выводит массив координат геообъекта в <div id="geometry">
        function printGeometry (coords) {
            $('#geometry').html('Координаты: ' + stringify(coords));
 
            function stringify (coords) {
                var res = '';
                if ($.isArray(coords)) {
                    res = '[ ';
                    for (var i = 0, l = coords.length; i < l; i++) {
                        if (i > 0) {
                            res += ', ';
                        }
                        res += stringify(coords[i]);
                    }
                    res += ' ]';
                } else if (typeof coords == 'number') {
                    res = coords.toPrecision(6);
                } else if (coords.toString) {
                    res = coords.toString();
                }
 
                return res;
            }
        }
 
 
    </script>
</head>
 
<body>
<h2>Простейший редактор для рисования многоугольников</h2>
<table border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td width="800px">
    <div id="map" style="width:800px; height:600px"></div>
<div id="geometry"/></div>
    </td>
    <td width="250px" valign="top">
    <div id="formpolygon">
<strong>Форма ввода параметров многоугольника</strong><br />
<br />Цвет заливки: <input type="text" id="color_polygon" value="#0000ff" /><br />
<br />Уровень прозрачности заливки:<br /><input type="text" id="fillopacity_polygon" value="1">
<br />Толщина линии обводки: <input type="text" name="width_line" id="width_line" size="2" value="5" /><br />
<br />Цвет линии обводки:<br /><input type="text" id="color_line" value="#cc3333">
<br />Уровень прозрачности обводки:<br /><input type="text" id="opacity_line" value="1">
<p><input type="button" value="Добавить" id="addPolygon"/> <input type="button" value="Удалить" id="dellPolygon"/></p>
<p><input type="button" value="Завершить редактирование" id="stopEditPolygon"/></p>
</div>
    </td>
  </tr>
</table>
</body>
 
</html>

Для реализации выбора цветов использован плагин jQuery SimpleColor, загрузить который можно здесь

Из всего архива нам нужен один файл jquery.simple-color.min.js

Копируем его в заранее созданную папку js.

И подключаем в наш код строкой:

<script type="text/javascript" src="js/jquery.simple-color.min.js"></script>

Использовать плагин очень просто, перед определением параметров карты мы добавляем строчки

$('#color_polygon').simpleColor();
 
$('#color_line').simpleColor();

где color_polygon и color_line — id-элементов ввода цвета полигона и обводки соответственно.

В секции body мы добавляем таблицу из одной строки и двух ячеек, в прервую помещаем контейнеры
div для вывода карты с id="map" и вывода координат id="geometry".

А во-вторую форму с полями для ввода значений и кнопками.

<div id="formpolygon">
<strong>Форма ввода параметров многоугольника</strong><br />
<br />Цвет заливки: <input type="text" id="color_polygon" value="#0000ff" /><br />
<br />Уровень прозрачности заливки:<br /><input type="text" id="fillopacity_polygon" value="1">
<br />Толщина линии обводки: <input type="text" name="width_line" id="width_line" size="2" value="5" /><br />
<br />Цвет линии обводки:<br /><input type="text" id="color_line" value="#cc3333">
<br />Уровень прозрачности обводки:<br /><input type="text" id="opacity_line" value="1">
<p><input type="button" value="Добавить" id="addPolygon"/> <input type="button" value="Удалить" id="dellPolygon"/></p>
<p><input type="button" value="Завершить редактирование" id="stopEditPolygon"/></p>
</div>

При нажатии на кнопки вызываются соответствующие функции для обработки.

Если кликнуть по кнопке «Добавить», то обрабатываем ее нажатие с id="addPolygon".

Значения переменных из формы передаются соответствующим переменным color_polygon, fillopacity_polygon, width_line, color_line и opacity_line.

Мы можем начинать построение многоугольника с заданными параметрами.

При нажатии на кнопе «Удалить» обрабатываем это событие удаляя полигон с карты строкой

myMap.geoObjects.remove(poligon);

Очищаем контейнер с id="geometry" строкой

$('#geometry').html('');

Включаем кнопку добавления многоугольника

$('#addPolygon').attr('disabled', false);

Загрузить архив с файлами примеров

  • Гость: Огромное спасибо за такую подробную статью.
  • Гость: Да действительно спасибо. Добавил в закладки. Неделю уже мучаюсь, хочу сделать такую же карту как на циане. Информации с подробными примерами очень мало.
  • Гость: Отличные примеры, очень помогли!
  • Anton Kashkan: Отлично, как сохранять эти данные в MySQL?
  • bu: Тут уже ваша реализация, можно ручками, можно программно.
  • Гость: Уровни прозрачности не работают
  • bu: Уровень прозрачности как и в css нужно указывать от 0 до 1, то есть если нужно чтобы было полупрозрачным, то укажите 0.5
  • Гость: В последнем примере
  • Гость: Ошибся все ок, просто дробные вводить можно
  • Гость: http://gyazo.com/ca31472460f31caabf086a7db7440d4a если заливка меньше единицы то прозрачность обводки уже ни на что не влияет
  • Evgeny Finogeev: Большое спасибо, помогли ваши примеры. Вот только вопрос есть. А возможно ли отредактировать созданный ранее полигон. Точнее не созданный, а полученный по geoXML. Если на одной странице сразу рисовать и редактировтаь через ( stopDrawing и startDrawing) это работает, он обращается к одному и тому же полигону, но вот как быть если данные подгружаются на карту
  • Гость: А подпись на полигоне можно добавить? У меня стоит задача нарисовать план коттеджного поселка - надо номера домов подсветить...
  • Гость: текстовые метки поверх полигона
  • Гость: Отличная статья! Огромное спасибо
  • Михаил Цимбаленко: СПАСИБО! Особенно за пример 5 - теперь все понятно. Удачи!
  • bu: Спасибо. Помогло для рисования контуров, пришлось бы самому реализовать такую карту, но тут уже все готово и с рабочими примерами. Удачи вам.
  • Гость: Очень спасибо, прям почти то что искал.
  • Гость: Добрый день! Не подскажите как вывести координаты вершин многоугольника не внизу страницы, а во всплывающей подсказке, при наведении курсора на вершину?