Openlayers 和 openstreetmap plot 路线错误

Question

我有一个 WebView 车辆跟踪应用程序。 我完成了一切，但我无法绘制路径。 这里有什么问题？

var vectorSource = new ol.source.Vector(),
  url_osrm_nearest = '//router.project-osrm.org/nearest/v1/driving/',
    url_osrm_route = '//router.project-osrm.org/route/v1/driving/',
    icon_url = '//cdn.rawgit.com/openlayers/ol3/master/examples/data/icon.png',
    vectorLayer = new ol.layer.Vector({
      source: vectorSource
    }),
    styles = {
      route: new ol.style.Style({
        stroke: new ol.style.Stroke({
          width: 6, color: [40, 40, 40, 0.8]
        })
      }),
      icon: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: icon_url
        })
      })
    };
var utils = {
  getNearest: function(coord){

    var coord4326 =coord;    
    return new Promise(function(resolve, reject) {
      //make sure the coord is on street

      fetch(url_osrm_nearest + coord4326.join()).then(function(response) { 
        // Convert to JSON
        return response.json();
      }).then(function(json) {
        if (json.code === 'Ok') resolve(json.waypoints[0].location);
        else reject();
      });
    });
  },
  createFeature: function(coord) {
    feature = new ol.Feature({
      type: 'place',
      geometry: new ol.geom.Point(coord)
    });
    //feature.setStyle(iconStyle3);
    vectorSource.addFeature(feature);
  },
  createRoute: function(polyline) {

    var route = new ol.format.Polyline({
factor: 1e5,
    }).readGeometry(polyline);
    feature = new ol.Feature({
      type: 'route',
      geometry: route
    });
    feature.setStyle(styles.route);
    vectorSource.addFeature(feature);
  },
  to4326: function(coord) {
    return ol.proj.transform([
      parseFloat(coord[0]), parseFloat(coord[1])
    ]);
  }
};
view = new ol.View({
  center: [34.061624811814305,39.44893665949777],
  zoom: 16,
  projection: 'EPSG:4326',
});
const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
      vectorLayer
  ],
  target: 'map',
  view: view,
});
const markerEl = document.getElementById('geolocation_marker');
const marker = new ol.Overlay({
  positioning: 'center-center',
  element: markerEl,
  stopEvent: false
});

  map.addOverlay(marker);

const markerEl2 = document.getElementById('geolocation_marker_musteri');
const marker2 = new ol.Overlay({
  positioning: 'center-center',
  element: markerEl2,
  stopEvent: false
});

  map.addOverlay(marker2);

const positions = new ol.geom.LineString([], ('XYZM'));
feature.getGeometry().setCoordinates([longi_,lati_]);  
          utils.getNearest([longi_,lati_]);
          utils.getNearest([longi__v,lati_]);    
          utils.createFeature([longi__v,lati_]);
          var point1 = [longi_,lati_];
          var point2 = [longi__v,lati_];
          fetch(url_osrm_route + point1 + ';' + point2).then(function(r) { 
            return r.json();
          }).then(function(json) {
            if(json.code !== 'Ok') {              
              return;
            }      
            utils.createRoute(json.routes[0].geometry);

它绘制如下路径。

我正在使用相同坐标查看 openstreetmap 中的路线。 它在那里提供了正确的路线。 顺便说一下，坐标是某人动态的，即设备的position。 另一个坐标是静止的。

编辑：

我现在已经意识到了。 它在两点之间画一条直线。 它不根据道路绘制。

Answer 1

我努力了，找不到解决办法。 我还使用 openrouteservice 而不是 osm 进行几何。

function get_JSON(coor1,coor2)
{
  let request = new XMLHttpRequest();

  request.open('POST', "https://api.openrouteservice.org/v2/directions/driving-car/json");

  request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
  request.setRequestHeader('Content-Type', 'application/json');
  request.setRequestHeader('Authorization', 'api_key');
  request.onreadystatechange = function () {
    if (this.readyState === 4) {
      var data_json= JSON.parse(this.responseText);
      utils.createRoute(data_json.routes[0].geometry);
    }
  };
  const body = '{"coordinates":[['+coor1+'],['+coor2+']],"radiuses":120000}';
  request.send(body);
}