使用 Openlayers 和 OSM 進行實時路由

Question

我正在構建一個導航應用程序。 我正在使用 openlayers 和 osm。 到目前為止，我已經繪制了 2 點之間的路徑。 但由於我的位置每 5 秒更新一次，我必須重新創建路徑。 即使重新創建路徑，舊路徑也不會被刪除。 我怎么解決這個問題？

  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) {
    var feature = new ol.Feature({
      type: 'place',
      geometry: new ol.geom.Point(coord)
    });
    feature.setStyle(iconStyle2);
    vectorSource.addFeature(feature);
  },
  createRoute: function(polyline) {

    var route = new ol.format.Polyline({
      factor: 1e5
    }).readGeometry(polyline);
    var 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])
    ]);
  }
};
const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
      vectorLayer
  ],
  target: 'map',
  view: view,
});
function first_route(data)
{
  lati = data.latii;
  longi = data.longii;    
  utils.getNearest([my_longi,my_lati]);
  utils.getNearest([longi,longi]);    
  utils.createFeature([longi,longi]);
  var point1 = [my_longi,my_lati];
  var point2 = [longi,longi];
  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);
  });
}

function locate() {
  const coordinates = geolocation.getPosition();
  iconCar.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null)
  if(iconCar.getGeometry() != null)
  map.getView().fit(iconCar.getGeometry(),{maxZoom: 16});
  if(coordinates != null)
  {
    my_lati = geolocation.getPosition()[1];
    my_longi = geolocation.getPosition()[0];
   
  }    
  utils.getNearest([my_longi,my_lati]);
  utils.getNearest([longi,lati]);    
  utils.createFeature([longi,lati]);
  var point1 = [my_longi,my_lati];
  var point2 = [longi,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);
  });
  
}

setInterval(locate, 14000);

位置每 5 秒更新一次。 因此，map 上的路由也需要更改。 但是當我嘗試這樣做時，它不會刪除舊路線。 它在同一條路線上繪制另一條路線。

Answer 1

如果您將路線特征設為全局變量，則可以創建它，或者如果它已經存在，請更新它

var routeFeature;


  createRoute: function(polyline) {
    var route = new ol.format.Polyline({
      factor: 1e5
    }).readGeometry(polyline);
    if (!routeFeature) {
      routeFeature = new ol.Feature({
        type: 'route',
        geometry: route
      });
      routeFeature.setStyle(styles.route);
      vectorSource.addFeature(routeFeature);
    } else {
      routeFeature.setGeometry(route);
    }
  },