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

Итак, я пишу приложение, которое позволяет пользователю администратора создавать путешествие по определенному месту с различными точками остановки.Mapbox gl направления API

Для отображения карты, добавления маркеров, местоположения flyTo и т. Д. Я использую Mapbox GL.

Я использовал cURL реализацию Mapbox API, чтобы получить направление движения, а затем провести линию на карте

Так как пример cURL вызова я получаю список координат, которые представляют свои направления.

Проблема возникает, когда я пытаюсь соединить эти точки на карте.

В качестве примера HTML с некоторыми JS

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title></title> 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' /> 
    <style> 
     body { margin:0; padding:0; } 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 

<div id='map'></div> 
<script> 
mapboxgl.accessToken = '<ACCESS TOKEN>'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v8', 
    center: [-122.486052, 37.830348], 
    zoom: 15 
}); 

map.on('load', function() { 
    map.addSource("route", { 
     "type": "geojson", 
     "data": { 
      "type": "Feature", 
      "properties": {}, 
      "geometry": { 
       "type": "LineString", 
       "coordinates": [ 
       [-155.088899,19.722942],[-155.08565,19.72472],[-155.084661,19.723701],[-155.083569,19.723139],[-155.079557,19.722262],[-155.074227,19.721938],[-155.069939,19.722545],[-155.070061,19.721225],[-155.07007,19.711726] 
       ] 
      } 
     } 
    }); 

    map.addLayer({ 
     "id": "route", 
     "type": "line", 
     "source": "route", 
     "layout": { 
      "line-join": "round", 
      "line-cap": "round" 
     }, 
     "paint": { 
      "line-color": "#888", 
      "line-width": 8 
     } 
    }); 
}); 
</script> 

</body> 
</html>

Вы можете увидеть набор координат, которые будут подключены, чтобы нарисовать линию. Мне было интересно, есть ли способ подключить эти точки, чтобы линия шла только по дороге (для вождения)?

Чтобы объяснить это лучше, это близко увеличение выхода

Я знаю, что это довольно общее объяснение моей проблемы, но я надеюсь, что это понятно.

Я пытался сделать магию с Mapbox Gl Directions API, но мне не повезло, поскольку мне нужно добавить contoller, которого я не хочу. Мне нужно только нарисовать маршрут и не разрешать публичному пользователю изменять его.

Все советы?

источник

2016-05-16 Andrejs Gubars

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

источник

2016-06-08 22:17:13

Я пытался сделать это сегодня и добился того, чтобы проложить маршрут на карте и удалить начальное и конечное управление, вытащив проект mapbox-gl-direction из git-хаба и сделав второстепенный мод для src/направлений .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);

Это было относительно легко проверить с установкой в НОМ и моих собственных тестовых файлах, запустив установку НОЙ согласно 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. Хотя у вас есть пример работают в НПХ вы можете получить доступ к новому комплекту версии плагина от 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>

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

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

UPDATE: Добавление ответа на здесь, так что я могу показать захватить экран. @Andrejus, так как этот хак полагается на поведение плагина mapbox gl direction, а не на рисование путей с нуля, вы получаете дорогу после сборки, и у вас есть доступ к API-интерфейсам маршрутов для добавления путевых точек для выполнения A-> B-> C-> D как таковое:

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-направления плагин не имеет возможность отключить элементы управления на экране, они добавляются в методе onAdd (карта) класса Directions, который вызывается, когда направления добавляются на карту. Я хотел посмотреть, смогу ли я удалить их раньше и экспериментировать, таким образом, взломать. Чтобы сделать гибкое решение, можно добавить параметр, переданный конструктору класса Directions. Есть и другие варианты, принятые там, хотя они, как представляется, связаны с параметрами для обращения к Directions API:

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

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

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

источник

2016-05-23 16:22:58

гм, интересный подход, хотя для меня это звучит как взломать. То, что я также хочу, - это расширяемость для создания таких маршрутов, как из A-> B-> C-> D, следуя этой схеме. Но мне все равно нравится твой путь! –

@AndrejsGubars: Я обновил ответ выше с некоторыми примечаниями о добавлении путевых точек, как вы просили об этом. Также добавлены некоторые замечания по созданию решения. Надеюсь, это поможет. –

Да, место на! Это именно то, что я хотел сделать. Наверное, я был слишком амбициозен и ожидал чего-то, что делает целая библиотека :) Но спасибо за ваши советы! –

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

ответ

Смежные вопросы