API Яндекс.Карт — рисуем полилинию

В заметке «API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL» я описал процесс создания полилинии и сохранения ее координат в базе данных, здесь я хочу рассказать, как решить подобную задачу с применении ем API Яндекс.Карт.

В первой части я рассмотрю, как можно нарисовать полилинию и вывести координаты ее вершин на html-страницу с картой.

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

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

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

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

Если же мы выбираем пункт завершить редактирование – режим редактирования завершается и значения  координат вершин появляются в текстовой области справа от карты.

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

Реализация данного функционала достаточно проста и это вы увидите из исходного кода.

Исходный код примера:

<!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 Яндекс.Карт - рисуем полилинию</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
 
	<script type="text/javascript"> 
 
	var polyline
 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 13);
 
			map.addControl(new YMaps.Zoom());
	        map.addControl(new YMaps.TypeControl());
	        map.addControl(new YMaps.ToolBar());
 
            // Создание ломанной
            var polyline = new YMaps.Polyline();
 
            // Установка параметров режима редактирования
            polyline.setEditingOptions({
			drawing: true,
                 menuManager: function (index, menuItems) {
                    menuItems.push({
                        id: "StopEditing",
                        title: '<span style="white-space:nowrap;">Завершить редактирование<span>',
                        onClick: function (polyline, pointIndex) {
                       polyline.stopEditing();	                      		
                       YMaps.jQuery("#coords").attr("value", polyline.getPoints().join('n'));					   
                        }
                    });
                    return menuItems;
                }
            });        
 
            // Добавление ломаной на карту
            map.addOverlay(polyline);		
 
 
            // Включение режима редактирования
            polyline.startEditing();
 
        })
    </script> 
</head> 
 
<body> 
<table> 
 <tr> 
  <td>
     <div id="YMapsID" style="width:800px;height:600px"></div>
	</td>
	<td valign="top">
	 <textarea rows="15" cols="35" id="coords" name="coord"></textarea>
	</td>
	</tr>
	</table>
 
</body> 
</html>

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

Затем, задаем нашу ломаную строкой

var polyline = new YMaps.Polyline();

После этого задаются параметры для режима редактирования setEditingOptions.

drawing: true — включает режим добавления новых вершин в графическую фигуру.

menuManagerдиспетчер контекстного меню, открывающегося при щелчке по вершине графической фигуры (ломаной, многоугольника, и т.п.).

Принимает два аргумента: индекс вершины графической фигуры и массив объектов, описывающих пункты контекстного меню для этой вершины.

Диспетчер может изменять данные в переданном массиве.

Возвращает массив объектов, описывающих пункты контекстного меню.

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

Там же мы добавили строку

YMaps.jQuery("#coords").attr("value", polyline.getPoints().join(‘n’));     

Она помещает координаты вершин полилинии polyline.getPoints() в текстовую область с id="coords".

На этом пока все.

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