В этой заметке я хочу познакомить Вас с возможностями построения многоугольников на карте, с помощью 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); |
Огромное спасибо за такую подробную статью.
Да действительно спасибо. Добавил в закладки.
Неделю уже мучаюсь, хочу сделать такую же карту как на циане. Информации с подробными примерами очень мало.
Отличные примеры, очень помогли!
Как рисовать, все понятно без статьи. А как это потом добавить на сайт, вопрос.