API направлений Mapbox gl

Не уверен, правильно ли я понял, но когда вы отправляете запрос на получение маршрута, включите в URL-адрес 'overview=full'. Это вернет более подробный путь, поэтому вам не нужно будет использовать Matching API после этого.

Пример: `https://api.mapbox.com/directions/v5/mapbox/driving/-74.50,40;-80,50?overview=full&geometries=geojson&access_token=

Я пытался сделать это сегодня, и мне удалось проложить маршруты на карту и удалить начальный и конечный элементы управления, вытащив проект mapbox-gl-directions из git hub и сделав небольшой мод для src/directions.js

Я закомментировал строки с 48 по 52.

// Add controllers to the page
//new Inputs(inputEl, store, this.actions, this.map);
//new Instructions(directionsEl, store, {
//  hoverMarker: this.actions.hoverMarker,
//  setRouteIndex: this.actions.setRouteIndex
//}, this.map);

Это было относительно легко проверить с помощью настройки в npm и моих собственных тестовых файлов, запустив настройку npm в соответствии с https://github.com/mapbox/mapbox-gl-directions/blob/master/CONTRIBUTING.md

npm install & npm start & open http://localhost:9966/example/

Я также добавил строку:

localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');

ниже требования ('../); в примере/index.js. Пока у вас есть пример, работающий в npm, вы можете получить доступ к новой версии подключаемого модуля в комплекте с http://localhost:9966/example/bundle.js

Затем я смог изменить строку

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v2.0.0/mapbox-gl-directions.js'></script>

to

<script src='http://localhost:9966/example/bundle.js'></script>

В примере запуска в npm происходит целая куча волшебства, о котором я ничего не знаю, но все это просто работало на моей машине. Надеюсь это поможет. Линия направления работает с анимацией и анимацией высоты тона, масштабирования и пеленга. См. снимок экрана ниже:

ОБНОВЛЕНИЕ: Добавление ответа сюда, чтобы я мог показать снимок экрана. @Andrejus, поскольку этот хак основан на поведении плагина направлений gl mapbox, а не на рисовании путей с нуля, вы получаете встроенную дорогу, и у вас есть доступ к API направлений, чтобы добавлять путевые точки для выполнения вашего A-> B-> C-> Д как так:

map.on('load', function() {
    directions.setOrigin(start); 
    directions.addWaypoint(0, [-0.07571203, 51.51424049]);
    directions.addWaypoint(1, [-0.12416858, 51.50779757]);
    directions.setDestination(end);  
});

В документации сказано, что у вас может быть до 25 путевых точек.

В плагине mapbox-gl-directions нет возможности отключить экранные элементы управления, они добавляются в методе onAdd(map) класса Directions, который вызывается при добавлении направлений на карту. Я хотел посмотреть, смогу ли я удалить их раньше, и экспериментировал, таким образом, взлом. Чтобы сделать гибкое решение, можно было бы добавить параметр, передаваемый в конструктор класса Directions. Там переданы и другие параметры, хотя они, похоже, привязаны к параметрам для вызова API направлений:

var directions = new mapboxgl.Directions({
  unit: 'metric',
  profile: 'cycling'
}); 

Так что может быть лучшее решение, чем это. Я использую Mapbox уже ‹1 день и мало знаю о том, как он написан или структурирован.

Также обратите внимание, что изменения кода находятся в плагине, а не в ядре mapbox gl, поэтому относительно изолированы. Кстати, этот плагин является оболочкой для вызываемого вами API cURL, который возвращает массив точек. Предположительно, исходный код на GitHub будет включать код, который следует тому пути, по которому он отображает строку, если это определенно то, что вы хотите сделать.

На самом деле это было проще, чем я думал. Все, что мне нужно было сделать, это получить ответ от API направлений и передать возвращенный массив в Mapbox Map Matching, таким образом, он возвращает идеальный маршрут. Все задокументировано в Mapbox API