使用 Openlayers 和 OSM 进行实时路由

Question

I'm building a navigation app. I am using openlayers and osm. So far I have drawn the path between 2 points. But since my location is updated every 5 seconds I have to recreate the path. Even when re-creating the path, the old path is not deleted. How can I solve this problem?

  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);

Location is updated every 5 seconds. Therefore, the route on the map also needs to be changed. But when I try to do it this way it doesn't delete the old route. It draws another route on the same route.

Answer 1

If you make the route feature a global variable you can create it, or if it already exists, update it

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);
    }
  },