Задание изображений для редактора ломаной

Open in CodeSandbox

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

Опции vertexInteractiveOptions и edgeInteractiveOptions позволяют использовать для меток вершин и промежуточных точек опции с постфиксами, привязанными к текущему состоянию вершины. Если вам не требуется менять опции вершин и промежуточных меток в зависимости от их состояния, то нужно отключить соответствующую опцию. Доступны следующие постфиксы для меток вершин:

  • Hover - опции с данным постфиксом применяются при наведении на вершину указателя мыши;
  • Drag - опции с данным постфиксом применяются при перетаскивании вершины;
  • Active - опции с данным постфиксом применяются, когда для вершины открыто контекстное меню.
Примеры таких опций: vertexLayoutHover, vertexIconImageSizeActive, vertexIconImageShapeHover и т.д.

Доступны следующие постфиксы для промежуточных точек:

  • Hover - опции с данным постфиксом применяются при наведении на метку указателя мыши;
  • Drag - опции с данным постфиксом применяются при перетаскивании метки.
Примеры таких опций: edgeLayoutHover, edgeIconImageShapeHover и т.д. 

<!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;coordorder=longlat&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="editor_icon_layout.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: [90, 15],
            zoom: 3,
            controls: [],
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Создаем ломаную.
    var myPolyline = new ymaps.Polyline(
        [
            // Указываем координаты вершин.
            [70, 20],
            [70, 40],
            [90, 15],
            [70, -10],
        ],
        {},
        {
            // Задаем опции геообъекта.
            // Цвет с прозрачностью.
            strokeColor: "#FF008888",
        }
    );

    myPolyline.editor.options.set({
        // Задаём для меток вершин опции с постфиксами, привязанными к текущему состоянию вершины.
        // Класс макета для меток на вершинах ломаной линии.
        vertexLayout: "default#image",
        // URL графического файла.
        vertexIconImageHref: "icons/button1.svg",
        // Размеры слоя с картинкой.
        vertexIconImageSize: [16, 16],
        // Смещение картинки относительно точки привязки.
        vertexIconImageOffset: [-8, -8],

        // Опции с данным постфиксом применяются при наведении на вершину указателя мыши.
        vertexLayoutHover: "default#image",
        vertexIconImageSizeHover: [28, 28],
        vertexIconImageOffsetHover: [-14, -14],

        // Опции с данным постфиксом применяются, когда для вершины открыто контекстное меню.
        vertexLayoutActive: "default#image",
        vertexIconImageHrefActive: "icons/button1-active.svg",
        vertexIconImageSizeActive: [16, 16],
        vertexIconImageOffsetActive: [-8, -8],

        // Опции с данным постфиксом применяются при перетаскивании вершины.
        vertexLayoutDrag: "default#image",
        vertexIconImageHrefDrag: "icons/button1-active.svg",
        vertexIconImageSizeDrag: [16, 16],
        vertexIconImageOffsetDrag: [-8, -8],

        // Задаём для промежуточных меток опции с постфиксами, привязанными к текущему состоянию промежуточных меток.
        edgeLayout: "default#image",
        edgeIconImageHref: "icons/button2.svg",
        edgeIconImageSize: [16, 16],
        edgeIconImageOffset: [-8, -8],

        // Опции с данным постфиксом применяются при наведении на промежуточную метку указателя мыши.
        edgeLayoutHover: "default#image",
        edgeIconImageSizeHover: [28, 28],
        edgeIconImageOffsetHover: [-14, -14],

        // Опции с данным постфиксом применяются при перетаскивании промежуточной метки.
        edgeLayoutDrag: "default#image",
        edgeIconImageHrefDrag: "icons/button2-active.svg",
        edgeIconImageSizeDrag: [16, 16],
        edgeIconImageOffsetDrag: [-8, -8],
    });

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

    // Включаем режим редактирования.
    myPolyline.editor.startEditing();
}