Заливка многоугольника изображением

Open in CodeSandbox

Многоугольник, прямоугольник и круг можно залить фоновым изображением. Для этого нужно указать ссылку на фоновое изображение в опции fillImageHref.

Тип заливки фоном - fillMethod. Опция может принимать одно из двух значений:

  • stretch - фоновое изображение растягивается по размеру оверлея;
  • tile - фоновое изображение повторяется без изменений размера.

<!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_with_image.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: [60.179022977567406, 30.505805864880234],
            zoom: 12,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Создаем многоугольник, используя вспомогательный класс Polygon.
    var myPolygon = new ymaps.Polygon(
        [
            // Указываем координаты вершин многоугольника.
            [
                [60.1918981644201, 30.513391151974343],
                [60.190786978271895, 30.517596855709733],
                [60.18411906873506, 30.52532161767263],
                [60.17744980033012, 30.52789653832693],
                [60.17505537249033, 30.526866570065202],
                [60.16949620406973, 30.51313365990895],
                [60.16744334943163, 30.512961998532003],
                [60.16590362399728, 30.52034343774098],
                [60.16325170493725, 30.518626823971463],
                [60.161968441206376, 30.512790337155053],
                [60.16094179402215, 30.513476982662866],
                [60.1600006725024, 30.51055873925465],
                [60.16136956759276, 30.5016323476531],
                [60.16556145295854, 30.49922908837575],
                [60.16992386592128, 30.50060237939137],
                [60.171292346312335, 30.502147331783966],
                [60.17257524473589, 30.50060237939137],
                [60.17334495966222, 30.49734081322926],
                [60.176167092910546, 30.481719627926545],
                [60.17719326286712, 30.479659691403086],
                [60.17787735830078, 30.474509850094513],
                [60.181725128740176, 30.471248283932404],
                [60.18198163068699, 30.468158379147237],
                [60.18300761837183, 30.469531670162862],
                [60.182409129464446, 30.47210659081716],
                [60.18437555191994, 30.475368156979272],
                [60.18574342829046, 30.479659691403086],
                [60.18694027321249, 30.482921257565195],
                [60.1886499757379, 30.48446620995779],
                [60.189419312729555, 30.485496178219496],
                [60.189846714352946, 30.48927272851247],
                [60.1905305453375, 30.49098934228201],
                [60.19155626501584, 30.4903026967742],
                [60.192752897330365, 30.49665416772145],
                [60.191043409196396, 30.5042072683074],
                [60.19232553367115, 30.509185448239027],
                [60.1918981644201, 30.513391151974343],
            ],
        ],
        // Описываем свойства геообъекта.
        {
            // Содержимое балуна.
            balloonContent: "Рыбные места",
        },
        {
            // Описываем опции геообъекта.
            // Фоновое изображение.
            fillImageHref: "lake.svg",
            // Тип заливки фоном.
            fillMethod: "stretch",
            // Убираем видимость обводки.
            stroke: false,
        }
    );

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