Как скачать маршрут в 2гис

Как построить маршрут через несколько точек

В 2ГИС можно строить маршруты через несколько точек, отмечая пункты дополнительных остановок. Функция даёт возможность выбирать промежуточные точки маршрута, помимо начальной и конечной. Это позволяет гибко планировать поездки и прогулки с пунктами, куда нужно заехать или зайти по пути. Максимальное количество промежуточных точек — восемь.

Такая возможность сейчас доступна для автомобильных и пешеходных маршрутов в онлайн-версии 2ГИС, а в мобильном приложении — ещё и для велосипедных маршрутов.

Онлайн-версия

Чтобы построить маршрут с промежуточными точками в онлайн-версии:

1. Выберите начальную и конечную точку маршрута, а также тип маршрута — автомобильный или пешеходный.
2. Нажмите «Добавить точку» и укажите адрес, название организации или места.
3. Вы можете откорректировать построенный маршрут. Для этого нужно выбрать нужную точку маршрута на карте, зажать левую кнопку мыши и, не отпуская, перетащить её в нужную область.
4. Также вы можете изменить порядок промежуточных точек. Для этого нужно зажать курсор на иконке = (она находится справа от адреса точки маршрута) и перенести пункт маршрута на нужную строчку. Маршрут будет построен по порядку — от верхней до нижней строчки.

Дополнительные точки маршрута получают нумерацию от 1 до 8 — под этими же номерами пункты будут указаны на карте 2ГИС.

Как построить автомобильный маршрут между городами

В 2ГИС можно строить автомобильные маршруты между городами. При построении таких маршрутов система учитывает те же факторы, что и при выборе схемы проезда по городу.

При построении междугородного маршрута начальная и конечная точки маршрута должны находиться в границах России или Казахстана. Также возможно построение прямых и обратных маршрутов из России и Казахстана в Бишкек (Кыргызстан) и Ташкент (Узбекистан).

Мы можем не предложить схему проезда, если во время построения маршрута устройство не подключено к интернету — построение маршрутов в режиме офлайн пока доступно в пределах одного города или региона, если его база скачана на устройство.

Если все условия выполнены, но маршрут между городами не строится, пожалуйста, напишите нам об этом из приложения через кнопку «Я знаю, как сюда добраться» или «Неточность в маршруте?». Наши специалисты помогут решить этот вопрос.

Онлайн-версия

Чтобы построить маршрут:

1. Нажмите на кнопку «Поиск проезда» справа от поисковой строки;
2. Выберите способ проезда «На автомобиле»;
3. Задайте начальную и конечную точки маршрута (название города или конкретные адреса).

После этого на карте появится схема маршрута, а в боковой панели отобразится дополнительная информация — расстояние между заданными пунктами и время в пути с учётом пробок.

При необходимости маршрут, построенный в онлайн-версии, можно отправить на смартфон. Для этого нужно нажать на кнопку «Поделиться» в правом нижнем углу экрана.

В открывшемся окне можно выбрать один из вариантов:

• На мобильное устройство Если в онлайн-версии и на мобильном устройстве выполнен вход в профиль 2ГИС, на смартфон придёт уведомление, которое позволит открыть маршрут в приложении.
• Скопировать ссылку Полученную ссылку можно отправить любому человеку любым удобным для вас способом — почтой или с помощью мессенджеров.

Избранное в 2ГИС: что такое и как пользоваться

Чтобы запомнить важный адрес или интересную компанию, пользователи добавляют их в Избранное. Сохранённые таким образом объекты появляются на всех устройствах, где авторизован пользователь. Добавляйте компании на 2gis.ru и возвращайтесь к ним в мобильном приложении — и наоборот.

Избранные места и компании хранятся в отдельных папках — мы называем их подборками. Вы можете сохранять все компании в одной подборке или создавать для каждого случая новую. Пользователи могут дать новой подборке имя, а в мобильных приложениях можно указать в настройках, хотите ли вы видеть иконки объектов Избранного на карте.

Кроме того, в Избранное можно внести адреса своих дома и работы, чтобы быстрее искать способы проезда и строить маршруты.

Онлайн-версия

Добавить объект в «Избранное»

1. Откройте карточку компании или места.
2. Нажмите на «Сохранить» в самом верху карточки.
3. Чтобы добавить карточку в конкретную подборку, нажмите ещё раз на «Сохранить» и выберите нужную подборку или создайте новую.

Посмотреть своё «Избранное»

1. Нажмите на «Избранное» на главном экране.
2. Если вы ещё не авторизованы, 2ГИС предложит вам войти в свой профиль через любую удобную соцсеть. Избранное доступно только авторизованным пользователям.

Изменить имя подборки

1. Откройте «Избранное».
2. Наведите указатель на нужную подборку.
3. Нажмите «карандаш».

Изменить имя и описание объекта внутри подборки

1. Наведите на него указатель.
2. Нажмите на «карандаш», чтобы изменить название.
3. Нажмите на «+», чтобы добавить комментарий.
4. Нажмите на «ведро», чтобы удалить объект из подборки.

Удалить подборку

1. Наведите на неё указатель.
2. Нажмите на «ведро».

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

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

Плагин использует Directions API, поэтому для его использования нужно получить соответствующий ключ. Чтобы это сделать, заполните форму по адресу dev.2gis.ru/order.

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

Или установить нужный пакет 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(); 

Пример автомобильного маршрута

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

Interactive example Source code

html> html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>2GIS Map API title> meta name="description" content="MapGL API directions example" /> style> html, body, #container < margin: 0; width: 100%; height: 100%; overflow: hidden; > #reset < padding: 4px 10px; background: #00a81f; border-radius: 4px; box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5); border: none; color: #fff; font-size: 12px; cursor: pointer; > style> head> body> div id="container"> div> script src="https://mapgl.2gis.com/api/js/v1"> script> script src="https://unpkg.com/@2gis/mapgl-directions@^2/dist/directions.js"> script> script> const map = new mapgl.Map('container', < center: [55.31878, 25.23584], zoom: 13, key: 'Your API access key', >); const directions = new mapgl.Directions(map, < // This key can be used for demo purpose only! // You can get your own key on https://dev.2gis.com/order/ directionsApiKey: 'Your directions API access key', >); const markers = []; let firstPoint; let secondPoint; // A current selecting point let selecting = 'a'; const controlsHtml = `Reset points `; new mapgl.Control(map, controlsHtml, < position: 'topLeft', >); const resetButton = document.getElementById('reset'); resetButton.addEventListener('click', function( ) < selecting = 'a'; firstPoint = undefined; secondPoint = undefined; directions.clear(); >); map.on('click', (e) => < const coords = e.lngLat; if (selecting != 'end') < // Just to visualize selected points, before the route is done markers.push( new mapgl.Marker(map, < coordinates: coords, icon: 'https://docs.2gis.com/img/dotMarker.svg', >), ); > if (selecting === 'a') < firstPoint = coords; selecting = 'b'; > else if (selecting === 'b') < secondPoint = coords; selecting = 'end'; > // If all points are selected — we can draw the route if (firstPoint && secondPoint) < directions.carRoute(< points: [firstPoint, secondPoint], >); markers.forEach((m) => < m.destroy(); >); > >); script> body> html> 

Пример пешеходного маршрута

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

Interactive example Source code

html> html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>2GIS Map API title> meta name="description" content="MapGL API directions example" /> style> html, body, #container < margin: 0; width: 100%; height: 100%; overflow: hidden; > #reset < padding: 4px 10px; background: #00a81f; border-radius: 4px; box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5); border: none; color: #fff; font-size: 12px; cursor: pointer; > style> head> body> div id="container"> div> script src="https://mapgl.2gis.com/api/js/v1"> script> script src="https://unpkg.com/@2gis/mapgl-directions@^2/dist/directions.js"> script> script> const map = new mapgl.Map('container', < center: [55.31878, 25.23584], zoom: 17, key: 'Your API access key', >); const directions = new mapgl.Directions(map, < // This key can be used for demo purpose only! // You can get your own key on https://dev.2gis.com/order/ directionsApiKey: 'Your directions API access key', >); const markers = []; let firstPoint; let secondPoint; // A current selecting point let selecting = 'a'; const controlsHtml = `Reset points `; new mapgl.Control(map, controlsHtml, < position: 'topLeft', >); const resetButton = document.getElementById('reset'); resetButton.addEventListener('click', function( ) < selecting = 'a'; firstPoint = undefined; secondPoint = undefined; directions.clear(); >); map.on('click', (e) => < const coords = e.lngLat; if (selecting != 'end') < // Just to visualize selected points, before the route is done markers.push( new mapgl.Marker(map, < coordinates: coords, icon: 'https://docs.2gis.com/img/dotMarker.svg', >), ); > if (selecting === 'a') < firstPoint = coords; selecting = 'b'; > else if (selecting === 'b') < secondPoint = coords; selecting = 'end'; > // If all points are selected — we can draw the route if (firstPoint && secondPoint) < directions.pedestrianRoute(< points: [firstPoint, secondPoint], >); markers.forEach((m) => < m.destroy(); >); > >); script> body> html> 

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

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

• основная зелёная линия маршрута сверху (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, >, >); 

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