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

Плагин Directions позволяет построить оптимальный маршрут между несколькими точками (до десяти).

Плагин использует Directions API, поэтому для его использования нужно получить ключ доступа к Directions API: см. инструкцию по оформлению ключей доступа.

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

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

Или установить нужный пакет npm:

npm install @2gis/mapgl-directions

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

Чтобы отображать маршруты на карте, нужно сначала инициализировать объект 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,
    },
});

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