с использованием OSRM Маршрутизация в Openlayers 3 для рисования полининов на карте вдоль направления карты

Question

Я хотел бы реализовать маршрутизацию на своей карте с помощью OSRM и Openlayers 3, но, кажется, нет ни одного примера или учебника в любом месте. Весь образец путается

Источники, отсылаемые 1: http://workshop.pgrouting.org/chapters/ol3_client.html (в этом примере я не знаю, откуда взять данные для построения полилинии, я получаю данные как json, который содержит массив объектов с широтой и долгота)

2: http://wiki.openstreetmap.org/wiki/Routing/online_routers не знаю, с чего начать, чтобы выполнить это

3: Маршрутизация OSRM в Openlayers 3

Я могу нарисовать прямую линию, но я хотел нарисовать разные цветные линии вдоль направления карты, я узнал, что для этого мне нужно использовать сервис направления тело, пожалуйста, указать на некоторые примеры кода или после какой-либо помощи будут благодарны скажите, пожалуйста, способ сделать это

Answer 1

Пуск с помощью онлайн сервиса, и если вы чувствуете себя комфортно с ним идти на devloping свой собственный (в случае необходимости)

поэтому давайте предположим, что вы собираетесь использовать сервис маршрутизации YOURS. Информация и детали here

1. создать запрос GET http://www.yournavigation.org/api/1.0/gosmore.php?format=geojson&flat=52.215676&flon=5.963946&tlat=52.2573&tlon=6.1799&v=motorcar&fast=1&layer=mapnik

просто поставить выше URL в браузере. Он даст вам ответ, содержащий координаты линии, которую вы ищете. Чтобы использовать его в своем собственном приложении, вы, возможно, должны создать сервлет-прокси, чтобы избежать проблемы с перекрестными скриптами.

2. Проанализируйте ответ, полученный обратно. Обратите внимание, что ответ не является надлежащим geojson (по крайней мере, как ol3 может его понять), поэтому вы получаете координаты, создаете геометрию и перепроектируете их на свою проекцию.

3. Наконец, покажите свой маршрут на карту и увеличьте масштаб вашего маршрута

вот fiddle, чтобы увидеть его в действии. Обратите внимание, что я использую ответ вышеупомянутого запроса как json-объект в коде.

ОБНОВЛЕНИЕ

Тот же запрос будет OSRM

https://api-osrm-routed-production.tilestream.net/viaroute?instructions=true&alt=true&loc=52.215676,5.963946&loc=52.2573,6.1799

Это должно вернуть кодированной ломаной линии. Таким образом, вы можете декодировать свой маршрут, используя класс ol.format.Polyline. Проверьте это fiddle

Answer 2

Рассмотрим fiddle, чтобы начать с:

map.on('click', function(evt){ 
    utils.getNearest(evt.coordinate).then(function(coord_street){ 
    var last_point = points[points.length - 1]; 
    var points_length = points.push(coord_street); 

    utils.createFeature(coord_street); 

    if (points_length < 2) { 
     msg_el.innerHTML = 'Click to add another point'; 
     return; 
    } 

    //get the route 
    var point1 = last_point.join(); 
    var point2 = coord_street.join(); 

    fetch(url_osrm_route + point1 + ';' + point2).then(function(r) { 
     return r.json(); 
    }).then(function(json) { 
     if(json.code !== 'Ok') { 
     msg_el.innerHTML = 'No route found.'; 
     return; 
     } 
     msg_el.innerHTML = 'Route added'; 
     //points.length = 0; 
     utils.createRoute(json.routes[0].geometry); 
    }); 
    }); 
});