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

Продолжаем изучать API Яндекс.Карт версии 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример вывода ломаной линии, с использованием JavaScript API Яндекс.Карт 2.х</title>
<!-- Подключаем API  карт 2.x  -->
<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 () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.310073,43.998007], // Нижний Новгород
                    zoom: 14
                });
 
			var geometry = [[56.308475,43.982986], [56.30795,43.987793], [56.310073,43.998007], [56.314963,44.012555]],
 
			properties = {
				hintContent: "Ломаная линия"
			},
			options = {
				draggable: true,
				strokeColor: '#ff0000',
				strokeWidth: 5
 
			},
			polyline = new ymaps.Polyline(geometry, properties, options);
 
			myMap.geoObjects.add(polyline);				
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:800px; height:600px"></div>
</body>
</html>

В начале мы определяем основные параметры карты (координаты центра и масштаб),
после этого задаем параметры нашей полилинии:

геометрию (geometry) — в виде набора пар координат узловых точек;

данные геообъекта (properties) — в нашем примере текст подсказки, отображаемой при наведении мыши на нашу ломаную;

набор опций (options) — набор параметров для ломаной.

В данном примере к качестве опций используются следующие параметры:

draggable — задает возможность перемещения ломаной линии по карте, в нашем случае оно равно true, значение по умолчанию false;
strokeColor — задает цвет ломаной;
strokeWidth — определяет толщину ломаной

Кроме этого возможны и другие параметры:

strokeOpacity — определяет степень прозрачности геообъекта, значения в диапазоне от 0 до 1 (непрозрачный);
strokeStyle — определяет стиль линии (представляет собой точкитире и так далее)

Второй пример — задание стиля линии

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

Здесь код похож на предыдущий, за исключением двух параметров:

нет параметра draggable, по умолчанию false;
strokeStyle имеет значение 1 5, это означает, что надо нарисовать штрих длиной одну ширину линии, и потом 5 ширин пропустить.

Третий пример — включение режима редактирования линии

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

Для включения режима редактирования ломаной линии после добавления ее на карту нужно добавить строку:

polyline.editor.startEditing();

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

Четвертый пример — пример рисования ломаной линии.

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

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

Если еще раз кликнуть левой кнопкой мыши по крайним квадратным маркерам, мы можем продолжить построение от начала или конца ломаной.

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

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример рисования ломаной линии, с использованием JavaScript API Яндекс.Карт 2.х</title>
<!-- Подключаем API  карт 2.x  -->
<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 () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.310073,43.998007], // Нижний Новгород
                    zoom: 14
                });
 
				var polyline = new ymaps.Polyline([], {}, {
					strokeColor: '#ff0000',
                    strokeWidth: 5 // ширина линии
                });
 
			myMap.geoObjects.add(polyline);
			polyline.editor.startEditing();	
			polyline.editor.startDrawing();		
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:800px; height:600px"></div>
</body>
</html>

Здесь код отличается тем, что мы не задаем геометрию нашей ломаной.

А задаем только две опции: цвет линии и толщину.

Затем добавляем определенный объект на карту, включаем режим редактирования строкой

polyline.editor.startEditing();

Далее включаем режим рисования:

polyline.editor.startDrawing();

Пятый пример

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

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

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример рисования ломаной линии и вывод координат, с использованием JavaScript API Яндекс.Карт 2.х</title>
<!-- Подключаем API  карт 2.x  -->
<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.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.310073,43.998007], // Нижний Новгород
                    zoom: 14
                });
 
				var polyline = new ymaps.Polyline([], {}, {
					strokeColor: '#ff0000',
                    strokeWidth: 5 // ширина линии
                });
 
			myMap.geoObjects.add(polyline);
			polyline.editor.startEditing();	
			polyline.editor.startDrawing();	
 
 
$('input').attr('disabled', false);
 
            // Обработка нажатия на любую кнопку.
            $('input').click(
                function () {
                    // Отключаем кнопки, чтобы на карту нельзя было
                    // добавить более одного редактируемого объекта (чтобы в них не запутаться).
                    $('input').attr('disabled', true);
 
                    polyline.editor.stopEditing();
 
					printGeometry(polyline.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>
<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.4.2/jquery.min.js" type="text/javascript"></script>

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

polyline.editor.stopEditing();

А также вызывается функция для вывода значений координат printGeometry (взята из примера по адресу http://api.yandex.ru/maps/doc/jsapi/2.x/examples/linestringedit.html ).

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

Шестой пример.

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

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

Будем использовать следующие параметры:

толщина линии strokeWidth;
цвет линии strokeColor;
величина прозрачности strokeOpacity

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

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

В самом начале мы должны ввести в форму необходимые параметры ломаной, например, толщина линии — 5, необходимый нам цвет, используя в качестве инструмента выбора возможности плагина jQuery SimpleColor и уровень прозрачности 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример рисования ломаной линии с заданием параметров - JavaScript API Яндекс.Карт 2.х</title>
<!-- Подключаем API  карт 2.x  -->
<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.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.simple-color.min.js"></script>
<script type="text/javascript">
 
		var polyline;
 
		ymaps.ready(init);
 
        function init () {
 
			$('#color_pline').simpleColor();
 
            var myMap = new ymaps.Map('map', {
                    center: [56.310073,43.998007], 
                    zoom: 14
                });
 
				//Добавляем элементы управления	
			 myMap.controls                
                .add('zoomControl')               
                .add('typeSelector')                
                .add('mapTools')
 
            // Обработка нажатия на кнопку Добавить
            $('#addPolyline').click(
                function () {
 
				$('#stopEditPolyline').attr('disabled', false);
 
				var widthpl = $('#width_line').attr('value');
				var colorpl = $('#color_pline').attr('value');
				var transparencypl = $('#transparency_pline').attr('value');
 
				polyline = new ymaps.Polyline([], {}, {
					strokeColor: colorpl,
					strokeOpacity: transparencypl,
                    strokeWidth: widthpl 
                });
 
				myMap.geoObjects.add(polyline);
				polyline.editor.startEditing();	
				polyline.editor.startDrawing();	
 
				$('#addPolyline').attr('disabled', true);			
            });				
 
			// Обработка нажатия на кнопку Завершить редактирование	
			$('#stopEditPolyline').click(
                function () {	
 
				polyline.editor.stopEditing();
				printGeometry(polyline.geometry.getCoordinates());
				$('#stopEditPolyline').attr('disabled', true);
 
			});	
 
 
			// Обработка нажатия на кнопку Удалить
			$('#dellPolyline').click(
                function () {	
 
				myMap.geoObjects.remove(polyline);
				$('#geometry').html('');
				$('#addPolyline').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>
 
<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="formpline">
<strong>Форма ввода параметров ломаной</strong><br />
<br />Толщина линии: <input type="text" name="width_line" id="width_line" size="2" value="5" /><br />
<br />Цвет линии:<br /><input type="text" id="color_pline" value="#cc3333">
<br />Уровень прозрачности:<br /><input type="text" id="transparency_pline" value="1">
<p><input type="button" value="Добавить" id="addPolyline"/> <input type="button" value="Удалить" id="dellPolyline"/></p>
<p><input type="button" value="Завершить редактирование" id="stopEditPolyline"/></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_pline’).simpleColor();,

где color_pline — id-элемента ввода цвета ломаной.

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

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

<div id="formpline">
<strong>Форма ввода параметров ломаной</strong><br />
<br />Толщина линии: <input type="text" name="width_line" id="width_line" size="2" value="5" /><br />
<br />Цвет линии:<br /><input type="text" id="color_pline" value="#cc3333">
<br />Уровень прозрачности:<br /><input type="text" id="transparency_pline" value="1">
<p><input type="button" value="Добавить" id="addPolyline"/> <input type="button" value="Удалить" id="dellPolyline"/></p>
<p><input type="button" value="Завершить редактирование" id="stopEditPolyline"/></p>
</div>

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

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

Значения переменных из формы передаются соответствующим переменным widthpl, colorpl и transparencypl.

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

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

myMap.geoObjects.remove(polyline);

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

$(‘#geometry’).html(»);

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

$(‘#addPolyline’).attr(‘disabled’, false);

Конечно это пример не идеальный, но мы уже получили простой редактор для рисования ломаных линий на Яндекс.Карте.

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

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

  • Гость: A kak narisovati liniu so strelkami ? ili tak shto bi mojno bilo otmetiti kak-to nachalo puti i konets.
  • Гость: Возможно ли построение ломаной по введенным координатам ? Имеется список координат в столбце , перемещения объекта полученный с GPS трекера - необходимо построить на карте маршрут передвижения. В идеале с указанием длины пройденного пути.
  • Михаил Кукушкин: Пара вопросов: 1. Есть лиобещанная статья по сохранению данных в mysql. 2. Можно ли как то выводить еще и длину полученной полилинии с сохранением данных в mysql. Хотя сохранение в mysql, наверно, очень просто, если выкинуть выводимые данные в input, можно hidden, а потом POST-ом отправить на сервер.