Перейти к основному содержимому

Построение маршрутов

Вы можете строить оптимальные маршруты между несколькими точками на карте (до 10 точек) с помощью плагина Directions.

Начало работы​

Чтобы начать работу с плагином Directions, выполните следующие шаги:

  1. Получите ключ доступа.
  2. Подключите плагин.
  3. Инициализируйте плагин.

1. Получите ключ доступа​

Плагин работает на основе Routing API. Чтобы работать с API сервиса, нужно получить ключ доступа:

  1. Зарегистрируйтесь в личном кабинете Менеджер Платформы.
  2. Создайте демо-ключ или купите подписку для доступа к API.

Работать с ключами можно в Менеджере Платформы: подробнее см. в документации личного кабинета.

2. Подключите плагин​

При помощи тега script​

Чтобы подключить плагин, добавьте следующую строку в код HTML-страницы (после подключения MapGL):

<script src="https://unpkg.com/@2gis/mapgl-directions@^2/dist/directions.js"></script>

При помощи npm​

Если вы используете npm, подключите плагин с помощью пакета @2gis/mapgl-directions:

npm install @2gis/mapgl-directions

3. Инициализируйте плагин​

При помощи тега script​

Инициализируйте объект Directions:

const directions = new mapgl.Directions(map, {
    directionsApiKey: 'Ключ Directions API',
});

При помощи npm​

Импортируйте плагин как ES-модуль:

import { Directions } from '@2gis/mapgl-directions';

Или как модуль CommonJS:

const { Directions } = require('@2gis/mapgl-directions');

const directions = new Directions(map, {
    directionsApiKey: 'Ключ для Directions API',
});

Использование плагина​

После инициализации вы можете вызвать следующие методы:

  • carRoute() для построения автомобильного маршрута;
  • pedestrianRoute() для построения пешеходного маршрута.

Оба метода принимают массив географических координат в качестве параметра points. Например:

directions.carRoute({
    points: [
        [55.27887, 25.21001],
        [55.30771, 25.20314],
    ],
});
directions.pedestrianRoute({
    points: [
        [55.27887, 25.21001],
        [55.30771, 25.20314],
    ],
});

Чтобы удалить маршрут, вызовите метод clear():

directions.clear();

Примеры использования​

Автомобильный маршрут​

Выберите две точки на карте, чтобы построить между ними автомобильный маршрут.

Пешеходный маршрут​

Выберите две точки на карте, чтобы построить между ними пешеходный маршрут.

Настройки отображения​

Графически маршрут представляет собой несколько линий, расположенных друг под другом:

  • основная линия маршрута сверху (route line);
  • линия подложки посередине (substrate line);
  • линия обводки внизу (halo line).

Вы можете изменить ширину любой линии с помощью параметра style. Ширину можно задать в пикселях или как InterpolateExpression (в этом случае ширина будет меняться в зависимости от масштаба карты). Чтобы скрыть линию, укажите значение ширины 0.

Пример:

directions.carRoute({
    points: [
        [55.28273111108218, 25.234131928828333],
        [55.35242563034581, 25.23925607042088],
    ],
    style: {
        // Основная линия (зелёная)
        routeLineWidth: [
            'interpolate',
            ['linear'],
            ['zoom'],
            10,
            30, // Ширина основной линии будет меняться от 30 пикселей на масштабе 10 и ниже...
            14,
            3, // ...до 3 пикселей на масштабе 14 и выше
        ],
        // Линия подложки (белая)
        substrateLineWidth: [
            'interpolate',
            ['linear'],
            ['zoom'],
            10,
            3, // Ширина линии подложки будет меняться от 3 пикселей на масштабе 10 и ниже...
            14,
            50, // ...до 50 пикселей на масштабе 14 и выше
        ],
        // Ширина линии обводки равна 60 пикселям при любом масштабе карты
        haloLineWidth: 60,
    },
});

Увеличьте или уменьшите масштаб карты, чтобы увидеть, как изменится ширина линий.