The premise
How to create the map object and vector layer is omitted here, especially the API method provided by OpenLayer how to dynamically move the car in the original trajectory
methods
getCoordinateAt()
GetCoordinateAt () is a method that officially returns the coordinates of the fraction provided in the lineString. The fraction is a number between 0 and 1, where 0 is the beginning of the string and 1 is the end.
That’s easy to do. It’s the equivalent of lineString interpolation, and then building a moving trajectory from the point you went to to the last point.
Two points into the line to calculate the azimuth, set up the car moving direction, all ready, dry!!
Js method
function animation(step) { requestID = window.requestAnimationFrame(function () { if (step <= 1) { var second = fastLine.getGeometry().getCoordinateAt(step); Var first = point.getGeometry().getcoordinates (); // point: Var Angle = -math. Atan2 (second[1] -first [1], Second [0] -first [0]) // Coordinates(fastline.getGeometry ().setcoordinates (fastline.getGeometry ().getateat (step)) // Let coord = [] coord.push(first) // Let coord = [] coord.push(first) Coord. push(second) var Tempfeature = new ol.Feature({// The trolley moves trajectory geometry: new ol.geom.LineString(coord) }) vector2.getSource().addFeature(Tempfeature); Step = step + 0.0003; animation(step); } else { var second = ol.proj.fromLonLat([111, 20]) var first = point.getGeometry().getCoordinates() var angle = -Math.atan2(second[1] - first[1], second[0] - first[0]) point.getGeometry().setCoordinates(second) point.getStyle().getImage().setRotation(angle) let coord = [] coord.push(first) coord.push(second) var Tempfeature = new ol.Feature({ geometry: new ol.geom.LineString(coord) }) vector2.getSource().addFeature(Tempfeature) } }, 1) }Copy the code
CarTrack: Driving animation based on OpenLayer (github.com)