Настройка отображения мультимаршрута

Open in CodeSandbox

Правила отображения маршрутов задаются в опциях маршрутизатора.

Для задания опций составных частей мультимаршрута доступны следующие префиксы: 

<ul>
    <li>wayPoint - опции отображений путевых точек;</li>
    <li>wayPointStart - опции отображения начальной путевой точки;</li>
    <li>wayPointFinish - опции отображения конечной путевой точки;</li>
    <li>viaPoint - опции отображений транзитных точек;</li>
    <li>pin - опции отображений точечных маркеров в путевых точках;</li>
    <li>route - опции отображений маршрутов;</li>
    <li>routeActive - опции отображения активного маршрута;</li>
    <li>routePedestrianSegment - опции линий сегментов пешеходного маршрута;</li>
    <li>editor - опции редактора мультимаршрута (см. <a href="https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/multiRouter.Editor">multiRouter.Editor</a>).</li>
</ul>
В данном примере на карту добавляется два маршрута с разными опциями отображения. Как можно задать два разных отображения для маршрутов, имеющих общую модель, см. в справочнике. 
<!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="multiroute_view_options.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>

function init() {
    // Объявляем набор опорных точек и массив индексов транзитных точек.
    var referencePoints = [
            "Москва, Ленинский проспект",
            "Москва, Льва Толстого, 16",
            "Москва, Кремлевская набережная",
            "Москва, парк Сокольники",
        ],
        viaIndexes = [2];

    // Создаем мультимаршрут и настраиваем его внешний вид с помощью опций.
    var multiRoute = new ymaps.multiRouter.MultiRoute(
        {
            referencePoints: referencePoints,
            params: { viaIndexes: viaIndexes },
        },
        {
            // Внешний вид путевых точек.
            wayPointStartIconColor: "#333",
            wayPointStartIconFillColor: "#B3B3B3",
            // Задаем собственную картинку для последней путевой точки.
            wayPointFinishIconLayout: "default#image",
            wayPointFinishIconImageHref: "leaf.svg",
            wayPointFinishIconImageSize: [30, 30],
            wayPointFinishIconImageOffset: [-15, -15],
            // Позволяет скрыть иконки путевых точек маршрута.
            // wayPointVisible:false,

            // Внешний вид транзитных точек.
            viaPointIconRadius: 7,
            viaPointIconFillColor: "#000088",
            viaPointActiveIconFillColor: "#E63E92",
            // Транзитные точки можно перетаскивать, при этом
            // маршрут будет перестраиваться.
            viaPointDraggable: true,
            // Позволяет скрыть иконки транзитных точек маршрута.
            // viaPointVisible:false,

            // Внешний вид точечных маркеров под путевыми точками.
            pinIconFillColor: "#000088",
            pinActiveIconFillColor: "#B3B3B3",
            // Позволяет скрыть точечные маркеры путевых точек.
            // pinVisible:false,

            // Внешний вид линии маршрута.
            routeStrokeWidth: 2,
            routeStrokeColor: "#000088",
            routeActiveStrokeWidth: 6,
            routeActiveStrokeColor: "#E63E92",

            // Внешний вид линии пешеходного маршрута.
            routeActivePedestrianSegmentStrokeStyle: "solid",
            routeActivePedestrianSegmentStrokeColor: "#00CDCD",

            // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
            boundsAutoApply: true,
        }
    );

    // Настраиваем внешний вид второй точки через прямой доступ к ней.
    customizeSecondPoint();

    // Создаем кнопки.
    var removePointsButton = new ymaps.control.Button({
            data: { content: "Удалить промежуточные точки" },
            options: { selectOnClick: true },
        }),
        routingModeButton = new ymaps.control.Button({
            data: { content: "Пешком" },
            options: { selectOnClick: true },
        });

    // Объявляем обработчики для кнопок.
    removePointsButton.events.add("select", function () {
        multiRoute.model.setReferencePoints(
            [
                referencePoints[0],
                referencePoints[referencePoints.length - 1],
            ],
            []
        );
    });

    removePointsButton.events.add("deselect", function () {
        multiRoute.model.setReferencePoints(referencePoints, viaIndexes);
        // Т.к. вторая точка была удалена, нужно заново ее настроить.
        customizeSecondPoint();
    });

    routingModeButton.events.add("select", function () {
        multiRoute.model.setParams({ routingMode: "pedestrian" }, true);
    });

    routingModeButton.events.add("deselect", function () {
        multiRoute.model.setParams({ routingMode: "auto" }, true);
    });

    // Функция настройки внешнего вида второй точки.
    function customizeSecondPoint() {
        /**
         * Ждем, пока будут загружены данные мультимаршрута и созданы отображения путевых точек.
         * @see https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel-docpage/#event-requestsuccess
         */
        multiRoute.model.events.once("requestsuccess", function () {
            var yandexWayPoint = multiRoute.getWayPoints().get(1);
            // Создаем балун у метки второй точки.
            ymaps.geoObject.addon.balloon.get(yandexWayPoint);
            yandexWayPoint.options.set({
                preset: "islands#grayStretchyIcon",
                iconContentLayout: ymaps.templateLayoutFactory.createClass(
                    '<span style="color: red;">Я</span>ндекс'
                ),
                balloonContentLayout:
                    ymaps.templateLayoutFactory.createClass(
                        "{{ properties.address|raw }}"
                    ),
            });
        });
    }

    // Создаем карту с добавленной на нее кнопкой.
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.739625, 37.5412],
            zoom: 7,
            controls: [removePointsButton, routingModeButton],
        },
        {
            buttonMaxWidth: 300,
        }
    );

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

ymaps.ready(init);