Многоугольник

Open in CodeSandbox

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

Многоугольник может быть создан двумя способами: с помощью класса GeoObject с указанием типа геометрии "Многоугольник" либо с помощью вспомогательного класса Polygon.

При создании многоугольника необходимо указать координаты его вершин. Также могут быть заданы свойства (например содержимое балуна или хинта) и опции (например цвет заливки или стиль контура) многоугольника.

Для многоугольников доступен визуальный редактор. Ссылка на редактор содержится в поле editor объекта-многоугольника.

Многоугольники, наряду с другими геообъектами, можно объединять в коллекции. 

<!DOCTYPE html>
<html>
    <head>
        <title>Многоугольник</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="polygon.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.73, 37.75],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Создаем многоугольник, используя класс GeoObject.
    var myGeoObject = new ymaps.GeoObject(
        {
            // Описываем геометрию геообъекта.
            geometry: {
                // Тип геометрии - "Многоугольник".
                type: "Polygon",
                // Указываем координаты вершин многоугольника.
                coordinates: [
                    // Координаты вершин внешнего контура.
                    [
                        [55.75, 37.8],
                        [55.8, 37.9],
                        [55.75, 38.0],
                        [55.7, 38.0],
                        [55.7, 37.8],
                    ],
                    // Координаты вершин внутреннего контура.
                    [
                        [55.75, 37.82],
                        [55.75, 37.98],
                        [55.65, 37.9],
                    ],
                ],
                // Задаем правило заливки внутренних контуров по алгоритму "nonZero".
                fillRule: "nonZero",
            },
            // Описываем свойства геообъекта.
            properties: {
                // Содержимое балуна.
                balloonContent: "Многоугольник",
            },
        },
        {
            // Описываем опции геообъекта.
            // Цвет заливки.
            fillColor: "#00FF00",
            // Цвет обводки.
            strokeColor: "#0000FF",
            // Общая прозрачность (как для заливки, так и для обводки).
            opacity: 0.5,
            // Ширина обводки.
            strokeWidth: 5,
            // Стиль обводки.
            strokeStyle: "shortdash",
        }
    );

    // Добавляем многоугольник на карту.
    myMap.geoObjects.add(myGeoObject);

    // Создаем многоугольник, используя вспомогательный класс Polygon.
    var myPolygon = new ymaps.Polygon(
        [
            // Указываем координаты вершин многоугольника.
            // Координаты вершин внешнего контура.
            [
                [55.75, 37.5],
                [55.8, 37.6],
                [55.75, 37.7],
                [55.7, 37.7],
                [55.7, 37.5],
            ],
            // Координаты вершин внутреннего контура.
            [
                [55.75, 37.52],
                [55.75, 37.68],
                [55.65, 37.6],
            ],
        ],
        {
            // Описываем свойства геообъекта.
            // Содержимое балуна.
            hintContent: "Многоугольник",
        },
        {
            // Задаем опции геообъекта.
            // Цвет заливки.
            fillColor: "#00FF0088",
            // Ширина обводки.
            strokeWidth: 5,
        }
    );

    // Добавляем многоугольник на карту.
    myMap.geoObjects.add(myPolygon);
}