Продолжаем изучать 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 и выводить обратно на карту из базы.
Огромное спасибо 🙂
В следующий раз, когда будешь писать про добавление в БД, если можно, включи возможность сохранения зума тоже 🙂
Большое спасибо! Очень помогает.
Вот была такая замечательная статья http://webmap-blog.ru/yandex-maps/poisk-blizhajshego-obekta-na-yandeks-karte
Можно попросить сделать аналогичное по версии 2.0?
А как сделать ломаные линии не по координатам а по заданию названия города?
Нужно провести предварительное геокодирование названия города, а затем уже строить ломаную