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

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

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

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

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

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

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

Получите ключ доступа к Routing 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: 'Your Directions API key',
});

При помощи npm​

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

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

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

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

const directions = new Directions(map, {
    directionsApiKey: 'Your Directions API key',
});

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

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

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

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

directions.carRoute({
    points: [
        [37.582591, 55.775364],
        [37.656625, 55.765036],
    ],
});
directions.pedestrianRoute({
    points: [
        [37.582591, 55.775364],
        [37.656625, 55.765036],
    ],
});

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

directions.clear();

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

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

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

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

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

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

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

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

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

Пример:

directions.carRoute({
    points: [
        [37.582591, 55.775364],
        [37.656625, 55.765036],
    ],
    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,
    },
});

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